Spin the object around the world's central axis

I've encountered several different methods that claim to rotate an object around the world axis, but they all seem to rotate the object around its own axis instead of the world's. Can anyone advise on the correct approach to rotate an object around the world's axis?

If my issue is not clear, here's a visual representation of the problem:

Edit: I forgot to mention that I am working with Three.js

Edit2:

//camera is the object I intend to rotate 
//I attempted another method using Euler, but it did not yield the expected result

/**Method 1**/

//Came across this solution on Stack Overflow
var rotateAroundWorldAxis = function(object, axis, radians) {
  var rotWorldMatrix;
  rotWorldMatrix = new THREE.Matrix4();
  rotWorldMatrix.makeRotationAxis(axis.normalize(), radians);
  rotWorldMatrix.multiply(object.matrix);
  object.matrix = rotWorldMatrix;
  object.rotation.setFromRotationMatrix(object.matrix);
}

//implementation of the method
rotateAroundWorldAxis(camera, new THREE.Vector3(0,1,0), movementX*-0.001);
rotateAroundWorldAxis(camera, new THREE.Vector3(1,0,0), movementY*-0.001);
/**Method 1**/


/**Method 2**/
//Attempted this other method as well
var q = new THREE.Quaternion();

q.setFromAxisAngle( new THREE.Vector3(0,1,0), movementX*-0.001 ); // axis must be normalized, angle in radians
camera.quaternion.multiplyQuaternions( q, camera.quaternion );
/**Method 2**/


//movementX and movementY are values obtained from mouse movements while using pointer lock. 
//These values function correctly when using rotateOnAxis.

Answer №1

Utilize quaternions for more precise rotation calculations.

function rotateAroundWorldAxis(object, axis, angle) {
  var rotation = new THREE.Quaternion();
  rotation.setFromAxisAngle(axis, angle);
  object.quaternion.multiply(rotation);
}

rotateAroundWorldAxis(myObject, new THREE.Vector3(0,1,0), movementX * -0.001);

The key to successfully using quaternions for rotation is to ensure that you multiply the quaternions in the correct order. This way, you can rotate around the global Y axis first and then apply the local rotation, effectively rotating along the local Y axis.

Answer №2

After evaluating different options, I decided to implement the FirstPersonControls class for my project. However, I needed to customize it by making some modifications to better suit my 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

When I attempt to conceal the filter within mat-table using *ngIf, I encounter an issue where I am unable to read the property 'value' due to it being

After creating a mat-table, I encountered an issue when trying to show and hide my input filter area using a button. If I use *ngIf="showInputFilter" to hide the filter area, I receive the error message Cannot read property 'value' of u ...

Please use Shift + Enter feature only when using desktop devices

In my React chat application, I have implemented a textarea for message input to allow multiline support. This works smoothly on mobile devices as pressing Enter creates a new line and a send button is available to submit the message. However, I want a di ...

Circular dependency in Typescript/Javascript: Attempting to extend a class with an undefined value will result in an error,

Query Greetings, encountering an issue with the code snippet below: TypeError: Super constructor null of SecondChild is not a constructor at new SecondChild (<anonymous>:8:19) at <anonymous>:49:13 at dn (<anonymous>:16:5449) ...

Issue with AngularJS factory $http.get request receiving HTML files as response

Could someone please explain why I keep receiving an HTML file as a return from my Angular factory? This is the route on my backend: function ensureAuthenticated(req, res, next) { if (!req.headers.authorization) { return res.status(401).send({ mess ...

What are the different ways to utilize request.profile in a Node.js environment?

I recently stumbled upon a code snippet that utilizes req.profile to read data. How is this even possible? const listNewsFeed = async (req, res) => { let following = req.profile.following following.push(req.profile._id) try{ let posts = await ...

Passing a JavaScript variable to a URL parameter can be achieved by

Can anyone advise me on passing JavaScript string variables and displaying them in the URL? For instance, let's say the URL is "xyc.com". Upon populating a variable (a), I wish for that variable to appear in the address bar as URL = "xyc.com/?a=". Cur ...

Implementing a Preloader in a React Web App

I am looking to implement a preloader in my React application because it takes a long time to load. I want the preloader to automatically render until all the contents of my application are fully ready to be loaded. Is it possible to achieve this? I could ...

Angular filter - organizing objects based on a specific property or a combination of properties

I modified the Angular filter group by example by converting the team into an object. var app = angular.module('myApp',['angular.filter']); app.controller('MainController', ['$scope', function($scope){ $sc ...

`` I am experiencing a problem with CSS display block in Internet Explorer

Looking to implement a basic tab menu using a combination of tables and div elements. The goal is to have the tabs switch styles when clicked, giving the appearance of being toggled, while also swapping out the corresponding content in separate div blocks ...

What is the best way to include the application version in an Electron project using JavaScript

While attempting to publish an update for my app, I encountered a strange error. Can anyone pinpoint the issue? (Note: Node.js is included) Error Message: Unexpected token < <script> console.log(process); let output = <h2 class="page- ...

Tips on how to interact with a hyperlink in Python using a Selenium driver even when the content within the anchor tag is unknown

Utilizing a combination of selenium, phantomJS, and scrapy to scrape javascript content has proven to be an effective method. However, I am encountering an issue where I need to click on a link within a table after the javascript content has loaded. The ch ...

When attempting to call iFrame in JavaScript, it may not be recognized and result

At the moment, I am in the process of developing my personal portfolio and have come across a perplexing issue that has left me stumped. The structure of my webpage operates on a main-frame structure, which means that instead of navigating through separate ...

How to delete a div element in Material UI's Date Picker

In my project, I am utilizing Material UI's simple Date Picker module. However, I am looking to solely display the calendar section without the month and year indicators along with the navigation arrows. Is it possible to remove these specific element ...

Styling Input elements with a unified border in Bootstrap

[Issue Resolved] I have been working on setting a single border between multiple inputs inside a form-group in Bootstrap. Currently, the border is only visible when the input is not focused and it is the last one. However, my expectation is for the bo ...

Executing a node.js function within an Angular 2 application

Currently, I am running an Angular2 application on http://localhost:4200/. Within this app, I am attempting to call a function located in a separate node.js application that is running on http://localhost:3000/. This is the function call from my Angular2 ...

Searching for the search parameter in the Wordpress admin-ajax.php file. What could it

Just diving into the world of php and wordpress. Are there any search parameters I can include in admin-ajax.php? Here are the parameters in the ajax post; action: rblivep data[uuid]: uid_search_0 data[name]: grid_small_1 data[posts_per_page]: 8 data[pagin ...

Is there a way to turn off the pinch-to-zoom trackpad gesture or disable the Ctrl+wheel zoom function on a webpage

Take a look at this example - While zooming in on the image by pressing ctrl + scroll, the image zooms but the page itself does not scale. Only the image is affected by the zoom. I am attempting to replicate this functionality on my Next.js page. I have ...

Faulty HLSL code generated by ANGLE from a WebGL shader

Encountered an issue with a webgl shader that seems to be linked to ANGLE, as it only arises on Windows when using Firefox or Chrome. Surprisingly, the problem disappears if I manually switch to opengl (chrome --use-gl=desktop). To shed more light on this ...

What is the best way to send a JSON response from a Symfony2 controller?

I am utilizing jQuery to modify my form, which is created using Symfony. The form is displayed within a jQuery dialog and then submitted. Data is successfully stored in the database. However, I am unsure if I need to send some JSON back to jQuery. I am ...

How can I create a new div element for every item in an array by utilizing JSX?

I am currently working on creating a div element for each item in an array using reactjs JSX. I wasn't sure how to tackle this, so I attempted the following approach: {results.map((element, index) => ( <div key={index} className={ ...