How can the camera in Three.JS be set up to avoid flipping the model upside down?

Currently, I am working on a 3D building model using Three.JS and Collada loader. My focus right now is on enhancing the interactivity of the system, but I am encountering two main challenges:

1- Whenever I rotate the model within the scene, it rotates on all 3 axes, resulting in it being upside down at times! I am looking to maintain the model's orientation along the horizontal axis while only rotating it along the Y axis (Up).

Check out this live example of the issue. How can I achieve a rotation of the cube solely around the Y Axis (Up)?

2- I am also seeking guidance on how to implement a smoother control system through mouse movements. In larger models, smoothly zooming into a specific object can be quite challenging. How can I adjust the camera settings to enable fluid zooming, panning, and rotation?

Your insights and suggestions would be greatly appreciated. Thank you.

javascriptthree.jswebglinteractivecollada

Answer №1

Your model rotation should be controlled by the camera, not the other way around.

To ensure the camera stays correctly oriented, consider using OrbitControls instead of TrackballControls.

Make sure the movement with OrbitControls is smooth; any issues may point to problems with your model that need to be addressed individually.

It's recommended to update from the outdated one-year-old library version to the latest version for optimal performance.

Current version of three.js: r.57.

Answer №2

To improve your script's performance, include the following code:

controls.getMouseProjectionOnBall2 = controls.getMouseProjectionOnBall;
controls.getMouseProjectionOnBall = function(x, y){
    return controls.getMouseProjectionOnBall2.call(controls, x, controls.screen.height/2);
}

In addressing the issue of jerky movements, it seems like you've already covered all bases (don't forget about requestAnimationFrame). Unfortunately, reducing complexity in your design might be the only way to minimize jerkiness.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason behind the failure of next/script with Google reCAPTCHA?

Currently, I am in the process of upgrading from next js version 8 to version 11. I wanted to take advantage of the amazing next js feature for "next/script". However, when I tried to implement it for Google reCAPTCHA using "react-recaptcha": "^2.3.10", th ...

javascriptreactjsnext.jsseopagespeed

Encountered an error while trying to find the Node JavaScript view

Whenever I attempt to render the URL for displaying index.js in the browser, an error arises: **Error:** Failed to locate view "index" in views directory "D:\NodeJs\Example\5expressnodjsexmp\views" Below is my application code: //Hea ...

javascriptangularjsnode.jsexpressejs

jQuery and handling multiple forms - the first form steals the show!

I encountered an issue on my page where I have several form elements and jQuery code to execute when a form is clicked. Here is the structure of the form: <form method="post" action=""> {% csrf_token %} <input id="vote" name="vote" type="hidden" ...

javascriptjqueryhtml

The dynamic page fails to export with a static export in NextJS, resulting in an output error: "

I'm struggling to export a route in my NextJS 14 project. I've set the output to export and all routes are exporting correctly except for the dynamic ones. The folder for the dynamic route is not showing up in the output folder The version of Ne ...

javascriptreactjsnext.jsbuildexport

What is the best approach for dynamically accessing or rendering Children within an Angular Component?

I am facing an issue with reusing a component called wrapper with different child components. I found some helpful resources such as this SO question and this article. However, these only address cases where the child component is known in advance. In my s ...

javascriptangulartypescript

What is the method to escape from a for loop in Protractor?

Check out my code snippet: formElements[0].findElements(by.repeater(repeater)).then(function(items){ console.log(i, '>>>>>>>>>.No of items in the list --- '+items.length); (function(items){ ...

javascriptnode.jsselenium-webdriverprotractor

What is the best way to include additional items in a list?

Trying to add a new element of an array to the list while updating one property (id) by making it 1 more than the length of the array has resulted in strange outputs. Each new object added causes all elements to have values of array.length + 1. Various at ...

javascriptarraysreactjs

Combining NPM Script Commands: A Comprehensive Guide

I am aware that NPM scripts can be chained using &&, pre-, and post- hooks. However, I am wondering if there is a way to simply break down lengthy script lines into a single, concatenated line? For instance, can I convert the following: "script": ...

javascriptnode.jsnpm

Change the value of the checked property to modify the checked status

This is a miniCalculator project. In this mini calculator, I am trying to calculate the operation when the "calculate" button is pressed. However, in order for the calculations to run correctly in the operations.component.ts file, I need to toggle the val ...

javascriptangulartypescript

Nothing is in the Laravel array when using `$request->all()`

In the process of developing a shopping cart using Laravel. Here are the details : Routes : Route::post('/cart/add', 'CartController@store')->name('cart.store'); Route::patch('/cart/{product}', 'CartContro ...

javascriptphpajaxlaravelaxios

Styling with CSS and JavaScript: The ultimate method for desaturating multiple images

I am currently designing a portfolio website that will feature desaturated thumbnails of all my work. When you hover over each thumbnail, the color will fade in and out upon mouseover. Since this page will include numerous thumbnails, I have been contempl ...

javascriptimage-processingphotoshop

What is the best way to reset an angularJS form after it has been submitted

I am trying to figure out a way to clear form fields on a modal window after the user executes the save method. I have attempted using $setPristine in AngularJS, but it's not working as expected. Any suggestions on how to achieve this task? Here is t ...

javascripthtmlangularjs

Detection of numerous Google Analytics tags

To troubleshoot a client's Google Analytics account connected to their website, I decided to utilize the Tag assistant by Google extension. Upon running it, an alert popped up displaying "Multiple Google Analytics tags detected." One tag was the one I ...

javascripthtmlgoogle-analytics

Consistent information displayed on Google Maps infowindow

I am facing an issue where this code is always returning the last value on click. How can I fix this error? Any help would be greatly appreciated. js: <?php foreach($pets as $pet):?> var markerData = { lat: <?php echo $pet['pet_lat']?& ...

javascriptphpgoogle-maps

Is there a way to connect the select2 plugin to a select element that contains plugin options in a JSON object stored in the data attribute?

Utilizing various select2 plugins, I am looking to set the options and values of the plugin based on the data attributes of related elements. The following is an example: HTML <select data-plug="select2" data-plug-op='{"placeholder":"text1","con ...

javascriptjqueryjsonjquery-select2custom-data-attribute

Can a href from a "<Link>" component be passed through a Higher Order Component (HOC) into an "<a>" tag?

I am currently facing a situation with the main component where I have the following code: <Link href={'test'}> <PrimaryAnchor>Welcome</PrimaryAnchor> </Link> Within the PrimaryAnchor component, the code looks like ...

javascriptreactjsnext.js

ASP TextChanged event is not triggering unless the user presses the Enter key or tabs out

My code is functioning correctly, however, the TextChanged event is triggered when I press enter or tab, causing my code to execute. I would like to be able to search for a record without having to press enter or tab. ASP: asp:TextBox ID="txtNameSearch ...

javascriptasp.nethtmlwebwebforms

Tips for managing the return value of a PHP function in AJAX requests

Looking for some help with inserting HTML form data using PHP and Ajax. Below is the code I've written: <!DOCTYPE HTML> <html lang="en"> <head><title>Ajax Test</title> <meta charset="utf-8" name="viewport" con ...

javascriptphpajaxfunctionreturn-value

When using AngularJS to compile HTML with $compile and $scope, an error may occur stating: "Unable to convert circular

I have a project that involves creating dynamic HTML and adding it to an object array. This HTML needs to be displayed on the page and be responsive to user interactions, such as clicking. Angular requires me to use $compile to create an angularized templa ...

javascriptangularjs

Selecting a "non-operational" collection location on an e-commerce platform

Recently I discovered a bug on an online shopping website. It seems that by using inspect element, it was possible to alter the HTML code and change an unavailable pickup point to available. This allowed me to place an order, make a payment, and even recei ...

javascripthtmlgoogle-chrome-devtoolsonline-store