Rebalancing Rotation with Three.js

Currently, I am utilizing Three.js and my goal is to swap out an object in the scene with a new one while maintaining the same rotation as the one I removed.

To achieve this, I take note of the rotation of the object I'm removing and then utilize the following function to apply the rotation to the new object:

rotateToWorldAxis  = function(object, xradians, yradians, zradians)  {
  axisX = new THREE.Vector3(0, 1, 0);
  axisY = new THREE.Vector3(1, 0, 0);
  axisZ = new THREE.Vector3(0, 0, 1);

  rotationMatrix = new THREE.Matrix4();
  rotationMatrix.setRotationAxis(axisX.normalize(), xradians)
  object.matrix = rotationMatrix;
  object.rotation.setRotationFromMatrix(object.matrix);

  rotationMatrix = new THREE.Matrix4();
  rotationMatrix.setRotationAxis(axisY.normalize(), yradians);
  rotationMatrix.multiplySelf(object.matrix);
  object.matrix = rotationMatrix;
  object.rotation.setRotationFromMatrix(object.matrix);

  rotationMatrix = new THREE.Matrix4();
  rotationMatrix.setRotationAxis(axisZ.normalize(), zradians);
  rotationMatrix.multiplySelf(object.matrix);
  object.matrix = rotationMatrix;
  object.rotation.setRotationFromMatrix(object.matrix);
}

While the x and y rotations work as intended, the z rotation does not produce the desired outcome.

I would greatly appreciate it if someone could identify where I may be going wrong or suggest an alternative approach?

Thank you!

Answer №1

Follow these steps:

object.rotation.set( xradians, yradians, zradians );

Where

xradians = originalObject.rotation.x
, etc...

Additionally, if you haven't made any changes, the default setting for object.matrixAutoUpdate is true, so there's no need to manually adjust the object.matrix. Just modify the rotation and the render() function will take care of updating the matrix.

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

Tips for achieving a slow scrolling effect similar to the one displayed on these websites

I've noticed smooth slow scrolling on various websites and have been searching for React or Vue plugins to achieve this effect. However, I am interested in learning how to implement it using vanilla JavaScript. Feel free to suggest plugins, libraries, ...

Searching for a way to detect when a user clicks the back button on their Android or iPhone device using JavaScript or

In the process of building a Single Page Application (HTML5) utilizing the following plugins: - Sammy.js - Knockout.js - Require.js - Jquery.js This app is designed for Android, iPhone, and Windows mobile devices. Many scenarios revolve around cli ...

Comparing the syntax of JSON to the switch statement in JavaScript

I recently came across a fascinating post on discussing an innovative approach to utilizing switch statements in JavaScript. Below, I've included a code snippet that demonstrates this alternative method. However, I'm puzzled as to why the alter ...

How can one determine the direction towards the camera from a vertex in a vertex shader using GLSL?

I'm working with the following code snippet: vec4 localPosition = vec4( position, 1.); vec4 worldPosition = modelMatrix * localPosition; vec3 look = normalize( vec3(cameraPosition) - vec3(worldPosition) ); vec3 transformed = vec3( position ) + look; ...

Ways to modify React icons upon clicking them?

Dealing with some icons from react-icons that seem to be causing trouble. Whenever I try to change an icon from outline to filled upon clicking, all the icons end up changing together. It's not functioning as expected. Take a look at my code snippet ...

Error encountered while trying to retrieve Instagram JSON data via request due to an abrupt end of input

I am attempting to retrieve the JSON data from Instagram's URL: . When I enter this URL in my browser, it displays the JSON information. However, I want to be able to access this data using Express so that I can extract any necessary information. co ...

What is the process for accessing someone's birthday information using the Facebook API?

Working on integrating Facebook login and successfully retrieving user details such as first_name, email, etc. However, encountering an issue with fetching the birthday information. When attempting to call for birthday using the code snippet below, no data ...

Attempting to send a request from the front-end to the back-end is resulting in a 404 endpoint error

I encountered an issue while sending a post request from the front end to the backend. The error message I received was: " Error: Request failed with status code 404 " " Had Issues POSTing to the backend, endpoint " My main concern is ...

What is the best way to convert a state variable into a string in this scenario?

I have encountered an issue while using the NPM package react-date-countdown-timer. The countdown timer in this package requires a specific format for implementation: <DateCountdown dateTo='January 01, 2023 00:00:00 GMT+03:00' callback={()=> ...

Enhancing the getDate function in JavaScript with additional days

My function for selecting the date is working perfectly: formatDateField(event: Date, formControl: string) { this.form .get(formControl) .patchValue( this.datePipe.transform(event.getTime(), "yyyy-MM-dd'T'HH:mm:ss&quo ...

(Javascript - Arrays) Find the leftmost and rightmost connected characters

Looking for the leftmost and topmost connected '1' character in a 2D matrix? Find the most left & top connected '1' character Find the most right & bottom connected '1' character EDIT 2.0: To start, provide the coordina ...

Installing libraries using npm can be done in two ways: using the command `npm install`

While working, we encountered an issue where the icon for the menu block from the rc-menu library was not displaying. Every time we run mvn install We also run npm install In our package.json file, we had included this library "rc-menu":"^5.1 ...

Float over a specific line in a drawing

I am looking to develop a unique rating system using css, html, and potentially js : https://i.sstatic.net/pQP79.png My goal is for the user to hover over a specific section of a circular stroke and have it fill with a particular color, all while maintai ...

Is there a solution for passing multiseries data in JSON that works with AnyChart in ReactJS since the standard method is not functioning correctly?

I need help implementing a column chart using AnyChart in react with multi-series data. Below is a sample JSON structure that I am having trouble passing to the chart. const multiSeriesSettings = { width: 800, height: 600, type: "column", ...

Issues occurring with PhoneGap preventing the execution of AngularJS code

I've recently delved into learning AngularJS with PhoneGap and I have a basic HTML code along with some AngularJS snippets. While everything runs smoothly in the browser, only the HTML portion seems to work when I attempt to run it on my Android phone ...

I'm having trouble getting my ms-auto to properly align the contents within a div

I've been trying to use the ms-auto class in my code, but it doesn't seem to be working properly: <div class="p-5 rounded bg-light text-dark"> <div class="container row"> <div class="col-sm-6"> ...

I am attempting to adjust the color of the active tab, but I seem to be encountering issues in my code. Can anyone help me

The currently active tab should change along with the text inside the box, but it's not working as expected. I'm struggling to find out why. Here is a fiddle to demonstrate my progress so far: var btn1 = document.getElementById("btn1"); va ...

Set values for all variables that begin with a specific string

[WARNING! Proceed with caution] One of my most recent coding dilemmas involves creating a JavaScript script that can identify specific surveys. These surveys use variables that share a common string followed by a random number, like this: variableName_46 ...

Retrieve the HTML data and save it as page.html, displayed in a VueJS preview

After developing an innovative VueJS-based application for managing front-end content, I am now eager to enhance it with a 'download' button feature. This new functionality will allow users to easily download the previewed and edited content in H ...

Angular 2 - Changes in component properties not reflected in view

I'm currently delving into Angular 2 and as far as I know, interpolated items in the view are supposed to automatically update when their corresponding variable changes in the model. However, in the following code snippet, I'm not observing this ...