Three.js - Rotation does not follow local orientation accurately

In my current project, I have created an extensive array of objects centered around a focal point within a scene. My goal is to manipulate these objects along their local axes. Initially, I aligned all the objects to face the origin by using a reference object and the lookAt() method. Then, to ensure correct alignment of the other axes, I followed this specific method. This method worked perfectly for setting the initial rotation. However, when attempting to rotate these objects dynamically using 

object.rotation.x = <amount>
, the rotations do not adhere to the local axis of the object.

Adding to the confusion, the rotations don't seem to follow the global axis either. It appears that the rotation is based on an unexpected set of axes. To showcase this issue, I have prepared a demonstration in a JSFiddle here. In the provided example, you can observe that the looker.rotation.z behaves correctly by rotating along the Z axis as intended. However, changing it to X or Y does not result in rotations along the local or global axes. If anyone can shed light on why this behavior occurs, it would be greatly appreciated.

javascript3drotationthree.js

Answer №1

Adding some rotation to the current orientation involves setting the variable looker.rotation.z.

To calculate the rotation matrix of the looker, a series of functions are used:

this.matrix.multiply( makeXRotationMatrix(this.rotation.x) )
this.matrix.multiply( makeYRotationMatrix(this.rotation.y) )
this.matrix.multiply( makeZRotationMatrix(this.rotation.z) )
DrawGeometry(this.geom, this.matrix)

However, composition of rotations can be non-intuitive, which may give the perception that it doesn't follow any axis system.

If a rotation in a specific axis needs to be applied to the existing matrix, functions such as rotateX (angle), rotateY (angle), rotateZ (angle), and rotateOnAxis (axis, angle) can be used with axis being a THREE.Vector3.

Directly changing looker.rotation.z works because it is the rotation closest to the geometry, unaffected by other rotations due to the order in which transformation matrices apply (e.g., T*R*G first rotates the geometry G then translates it).

Summary

I recommend avoiding the line:

looker.rotation.z += 0.05;

Instead, use

looker.rotateZ (0.05);

or

looker.rotateX (0.05);

for better results. I hope this clarifies things :)

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

Building a spherical pie chart using three.js: A step-by-step guide

Is it possible to generate a mesh similar to this one using three.js? Essentially, it's a 3D pie chart that is cut in half by a sphere. The only solution that comes to mind is utilizing clipping planes. Are there any easier methods to achieve this eff ...

three.js

Preventing pop-up windows from appearing when triggered by a mouse click event

I am looking for a solution to trigger a popup window when a user right-clicks on a specific area. Here is the current code I am using: $("#popup").bind('mousedown', function(e) { var w; if(e.which==3) { w=window.open('link& ...

javascriptjquerypopupwindow.openright-click

Tips for managing unexpected TCP disconnects?

Using Node.js, I set up both a TCP server and an HTTP server. The TCP server was intended to connect with hardware devices via TCP connection. I have 100 TCP clients that are maintaining their connections with the server. Normally, when a TCP client disc ...

javascriptnode.jssocketstcp

Validating an email address without the "@" symbol or if the "@" symbol is the last character

I've been working on validating email addresses using regex, but I'm encountering an issue. The problem is that the validation fails for emails that don't contain the "@" character or have it at the end of the word. For example, if I type "a ...

javascriptreactjsvalidationemail

Game Mapping Techniques: Utilizing Spatial Data Structures

In order to efficiently store and retrieve intersecting rectangles, I am currently working on implementing a spatial data structure in JavaScript. My initial approach involves using a Quad Tree to narrow down the search space. However, for dynamic objects ...

javascriptdata-structuresspatial

Understanding the inner workings of a Mongoose model without the need for

server.js process.env.NODE_ENV=process.env.NODE_ENV || 'development'; var mongoose=require('./config/mongoose'); express=require('./config/express'); var db=mongoose(); var app=express(); app.listen(3000,function(){ ...

javascriptnode.jsmongodbexpress

Resolving the Angular5 (Angular Universal) problem with page source visibility

Currently tackling a server-side rendering project, inspired by the Angular Universal guide. Everything seems to be on track, but I'm facing an issue where even when navigating to different routes, the source code for the initial page is displayed whe ...

javascriptangularangular-universal

The expected behavior is not displayed when using Async.waterfall within a promise queue

In our software implementation, we have utilized a promise queue feature using the q library. The sequence of functions is structured as follows: PQFn1 -(then)- PQFn2 - .... Within PQFn1, an array of values is passed to a callback function implemented wi ...

javascriptnode.jsqasync.js

Navigating through directory paths in JavaScript can be a daunting task for many

In my app.js file, I've included the following code: app.use(multer({dest:'./uploads'})) What does './uploads' refer to here? It is located in the same directory as app.js. In what way does it differ from simply using uploads? I ...

javascriptnode.js

Is there a way to retrieve the id of a jQuery autocomplete input while inside the onItemSelect callback function?

I am currently utilizing the jquery autocomplete plugin created by pengoworks. You can find more information about it here: Within the function that is triggered when an entry is selected, I need to determine the identifier of the input element. This is i ...

javascriptjqueryautocomplete

Issues with template literals not displaying line breaks

I am working with a template literal on node8.1.2 let gameDayReport = `Next 7th Day: ${nextSeventh} ${gameHours} : ${gameMinutes} Day: ${gameDay}` When I view it in my browser, the text appears as a single line instead of retaining the line breaks. It se ...

javascriptnode.jstemplate-strings

qunit timer reset

I have developed a user interface for manually launching qunit tests. However, I have noticed that the qunit test timer starts when displaying the interface, rather than when starting the actual test. For example: var myFunction = function (){ test ...

javascriptjqueryqunit

Strategies for preserving context throughout an Ajax request

In my project, I am looking to implement an Ajax call that will update a specific child element within the DOM based on the element clicked. Here is an example of the HTML structure: <div class="divClass"> <p class="pClass1">1</p> &l ...

javascriptajaxjquery

Issues arise with transferring React component between different projects

My goal is to develop a React component that serves as a navigation bar. This particular component is intended to be imported from a separate file into my App.js. Currently, the component is designed to simply display a 'Hello world' paragraph, ...

javascriptreactjstypescript

Utilizing a function within the App.js file located in the public folder using React JS

I need to execute a function called callMe that is defined in src/App.js from the public folder. In App.js import messaging from './firebase-init'; import './App.css'; function App () { function callMe() { console.log('Call m ...

javascriptreactjs

Why isn't the nested intricate directive being executed?

After watching a tutorial on YouTube by John Lindquist from egghead.io, where he discussed directives as components and containers, I decided to implement a similar structure but with a more dynamic approach. In his example, it looked something like this ...

javascriptangularjsnestedangularjs-directive

Change the input field font style in AngularJS

Check out this Plunker link for validation of input field: http://plnkr.co/edit/iFnjcq?p=preview The validation only allows numbers to be entered and automatically adds commas. My query is, if a negative number is entered in the field, how can I change th ...

javascriptjquerycssangularjsvalidation

What is the reason behind div elements shifting when hovering over a particular element?

Currently, I have floated all my div elements (icons) to the left and margin-lefted them to create space in between. I've displayed them inline as well. However, when I hover over one element (icon), the rest of the elements move. Can you please help ...

javascriptjqueryhtmlcss

I have been tirelessly attempting to resolve this issue, yet all my efforts have proven futile thus

Encountering an issue with web packs and nextjs. import NextDocument, { Html, Head, Main, NextScript } from 'next/document' import theme from '../libs/theme.js' export default class Document extends NextDocument { render() { retu ...

javascriptnext.js

Why won't the state change when using Angular's ui-router $state.go method?

I have developed a factory that is responsible for detecting state changes and checking if a form has been modified. When the form is dirty, a modal window like a confirmation prompt should appear. However, I am encountering an issue where the $state.go() ...

javascriptangularjsangular-ui-router