In Three.js, make everything rotate except for the camera

After struggling with orbiting a camera around my scene in Three.js, I have decided to go back to rotating everything except the camera like I used to do in XNA.

I faced issues with getting the camera to complete a full 360-degree orbit in all axes without inversion when it passed over the top or under the bottom. Using THREE.OrbitControls didn't resolve this problem as it only restricted rotation in specific axes rather than fixing the core issue.

My focus now is on making this alternative rotation method work. I've placed all objects, excluding the camera, into another object named "rotSection" and am rotating that object instead. While this approach is effective, the rotation always seems to occur based on the relative (0, 0, 0) position of the rotation object, which remains fixed in one corner. Ideally, I want to rotate around the center of my world instead of the edge. Even after attempting to center the rotSection relative to the scene, it still rotates around the corner rather than the center. Does anyone have suggestions on how to achieve rotation of an Object3D around a specific point?

javascriptcamerarotationthree.js

Answer №1

In the realm of space travel, it is not the engines that propel the ship forward. Rather, it is the ship itself that remains stationary as the engines manipulate the universe around it.

From the show Futurama

When working with 3D cameras, it's important to understand that the camera never physically rotates. Instead, objects are manipulated and moved in relation to the camera's local space. This process involves setting matrices, configuring shaders, and applying proper transformations, which are all handled by technologies like Three.js.

If you're looking for more advanced techniques, consider exploring quaternions, particularly the conversion from axisAngle to quaternions. Keep in mind that standard tools like THREE.OrbitControls may not always meet your specific needs.

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

Trouble toggling styles in React Component CSS

I'm currently working on a React Notes App that includes the functionality to switch between Dark and Light Mode. I've implemented a React Toggle for this purpose, but it seems that the code is only changing the background and h1 colors without a ...

javascriptcssreactjs

Determining if an event is already associated with a marker in Google Maps API v3

I've set up a marker with a click event listener attached to it. However, I want to check if the click event has already been added to the marker, and if not, add the click event listener. // Add click event listener if it doesn't already exist ...

javascriptgoogle-mapsgoogle-maps-api-3

Refresh a function following modifications to an array (such as exchanging values)

Looking to re-render a function after swapping array values, but the useEffect hook is not triggering it. I need assistance with this as I plan to integrate this code into my main project. Below are the JSX and CSS files attached. In App.js, I am creating ...

javascriptcssreactjsreact-hooks

Are you looking for outcomes related to Bootstrap typeahead feature?

I am facing an issue with returning results for the bootstrap typeahead after making an ajax request. Strangely, it works fine without initiating the ajax request. The code that doesn't work: $(".typeahead").typeahead({ source: function(query, pr ...

javascriptjqueryajaxtwitter-bootstrap

Should I consolidate my ajax requests into groups, or should I send each request individually?

Currently working on an ajax project and feeling a bit confused. I have 3 functions that send data to the server, each with its own specific job. Wondering if it's more efficient to group all the ajax requests from these functions into one big reques ...

javascriptajax

Tips for implementing non-repeating tiling textures in three.js

I am working on creating a panorama similar to krpano. I am wondering if there is a way to use small images as textures for each face of a cube. I came across this example that uses 6 pictures as textures for the cube: . Is it possible to use multiple ...

three.jstile

The background and border colors of the div are not displaying

Check out this link for the code snippet I'm experiencing an issue where the styles applied to the 'main-content' div are not being displayed. What could be causing this? Interestingly, the styles work perfectly fine on my personal website ...

javascripthtmlcsssass

Command for Angular Universal build to have package.json in root of dist directory

As I work on deploying my angular universal app to AWS Elastic Beanstalk, I encounter a challenge. I have set up a code pipeline on AWS to send the build output to Elastic Beanstalk. However, in order for Elastic Beanstalk to run the application, it requir ...

javascriptangularamazon-web-servicesamazon-elastic-beanstalkangular-universal

Displaying a sneak peek of the information along with a "See More" button beneath the title in React

My goal is to create a section header followed by preview content that defaults to showing only the first few lines. The text would then fade out, with an option to expand on click labeled "Show More." This functionality is similar to how Reddit displays p ...

javascriptreactjsnext.jspreviewexpand

Having trouble with jQuery Ajax not transmitting data properly in a CodeIgniter project?

I am brand new to the Codeigniter MVC framework. Whenever I attempt to send data through ajax from the views to the controller, I encounter an error. Please click here to view the image for more details. Here is the code snippet: views/ajax_post_view.php ...

javascriptphpjqueryajaxcodeigniter

Unusual characteristics found in a select list controlled by Angular

The article titled "How to set the initial selected value of a select element using Angular.JS ng-options & track by" by @Meligy served as my guide while working on implementing a select list (ng-options). Despite achieving the desired basic functional ...

javascriptjquerycssangularjs

Mastering form reset functionality using jquery

When attempting to register, an error is generated if any field is left blank in the form (from PHP). The input fields that have been filled out are retained using Smarty: {if isset($smarty.post.registratie.naam)} value="{$smarty.post.registratie.naam}"{el ...

javascriptjqueryformsfieldreset

Monitoring user engagement using Socket.io and Firebase

In my Node/Express app, I am working on monitoring active users without using sessions. The app relies on an external API for handling JWT tokens that are directly passed to the client for storing and subsequent API requests. To track active users, I am u ...

javascriptnode.jsexpresssocket.io

Guide on converting a material datepicker date value into the format "MM-DD-YYYY" in Angular 6

I need help formatting the date below to MM-DD-YYYY format in my Angular 6 project. I've checked out various solutions on SO and other websites, but so far, none have worked for me. Currently, I am using Material's Angular DatePicker component. ...

javascriptangularangular6

The anchor links fail to navigate to specific page sections when refreshing the browser or navigating back and forth

I've created a webpage using HTML that contains links within the page. <div> <a href="#first">first</a> <a href="#second">second</a> <div id="first">First div</div> <div id="second">Second div</div&g ...

javascriptjqueryhtmljquery-plugins

Transferring a state from a Child component to the App component using React Context within an Image Editor Application

I've been working on a basic image editor that allows users to upload an image from their drive and apply various CSS filters. The file upload functionality is contained within a component called FileUpload, which is a child component of App. My issue ...

javascriptreactjs

What is the best way to load information from the initial array onto a randomly chosen card?

Is there a way to populate data from the first array on a randomly selected card? I am trying to create a random card in Angular, where when I click on the first card, it will display the first value from the array and automatically fill the other cards w ...

javascriptangulartypescript

Error in translation: Some parts of JavaScript code are not functioning properly in Django

Check out this snippet of code: var text = `<div id='weather_data'> <img id='weather_icon' src='${weather_icon}'> <span id='centered'>${data[0].temperature}°c</span> ...

javascriptdjangointernationalizationgettext

A step-by-step guide to identifying the clicked bar on a Chart.js graph

When using Chart JS to create a line bar chart, I am looking to specifically identify which bar was clicked on the chart and determine the index of that bar. This will allow me to display specific details for each clicked bar on a table. For example, click ...

javascripthtmlcsschart.js

Restrict the quantity of user responses with JavaScript

For this questionnaire, users are limited to selecting and ranking only 3 out of the 5 listed Social Apps. I am currently using questback to build the survey, but I require assistance in implementing a JavaScript condition. <table> <tr> & ...

javascript