The Order of Matrix Transformation in Three.js

I'm curious about how threejs handles multiple matrix ordering.

For example, 

......
var mesh = new THREE.Mesh( geometry, material );
mesh.position.set( 0, 20, 0 ); // T , transform matrix
mesh.rotation.set( 0, Math.PI, 0 );//R , rotation matrix
mesh.scale.set( 1, 1, 10 );//S , scale matrix

So, when combining the three matrices in threejs, does it follow the order I specify (In my case, TRS, so final matrix should be T\*R\*S) or is there a fixed default order (e.g. always SRT ordering resulting in S\*R\*T)?

javascriptmatrixthree.js

Answer №1

When setting parameters for the mesh, ensure that the property 'matrixAutoUpdate' is true and follow the order of scale, rotation, and translation.

If a more complex series of translations and rotations is needed, set matrixAutoUpdate to false and calculate the matrix manually.

Note: when using the matrix multiply function, reverse order is crucial. For example, positioning a limb would involve:

1) Applying local rotation

2) Moving the limb with respect to its offset

3) Rotating according to body rotation

4) Moving to body offset

The actual operations should be executed in reverse order as follows:

arm_mesh.matrixAutoUpdate = false;

var mat4: THREE.Matrix4 = new THREE.Matrix4();
var arm_matrix = arm_mesh.matrix;

arm_matrix.identity();  // reset

arm_matrix.multiply(mat4.makeTranslation(body_pos.x, body_pos.y, body_pos.z));
arm_matrix.multiply(mat4.makeRotationFromQuaternion(body_rotation));
arm_matrix.multiply(mat4.makeTranslation(arm_offset.x, arm_offset.y, arm_offset.z));
arm_matrix.multiply(mat4.makeRotationFromEuler(new THREE.Euler(arm_angle, 0, 0)));

Please note that this does not consider parent/child relationships.

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

Sending user credentials to a new page in JavaScript

My goal is to direct the user from one web page to another that requires a password for access. The user arrives on the initial page by scanning a barcode with a specific terminal, similar to a smartphone equipped with a customized barcode reader applicati ...

javascript

How to change an HTML value to a string using jQuery

Looking for some assistance here: Here is the code snippet I am working with: <td id="myid">something</td> Here is the related JavaScript: var test = $("#myid").html(); console.log(test); if(test == "something"){ alert("Great!"); } I am en ...

javascriptjquery

Bootstrap icon issue: square displaying instead of the intended icon

I am currently in the process of creating a responsive website using Bootstrap 3. I have successfully downloaded and imported Bootstrap 3 into the root directory of my website. However, I have encountered an issue where the icon does not display correctly ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Implementing a fixed top navigation bar with jQuery to override default CSS properties

My latest project involves creating a WordPress site, and I recently found a way to fix my navbar at the top of the page as users scroll down. Here's the code snippet I used: (function( $ ){ var navOffset = jQuery("nav").offset().top; jQu ...

javascriptjquerywordpress

What is the process for converting an array of integers into a byte stream and sending it to the client using Node.js?

How can I convert an array of integers into a bytestream and send it to the client using Nodejs? Let's say I have the array [17, 256, 82]. I am setting the content-type as application/octet-stream. My goal is to send a response with the binary stre ...

javascriptarraysnode.js

Which Web Browsers Support Canvas and HTML5?

Currently working on a project that involves using the HTML5 Canvas element. I am curious about which major browsers (including specific versions) actually support the Canvas tag. I am not interested in hearing about IE. In this tutorial Drawing shapes - M ...

javascripthtmlcanvascross-browser

Incorporate a fresh attribute to the JSON data in an Angular API response

I'm currently working on updating my JSON response by adding a new object property. Below is an example of my initial JSON response: { "products": [{ "id": 1, "name": "xyz" }] } My goal is to include a new object property ca ...

javascriptangulartypescriptangular2-services

What are some ways to customize the default Head tag in Next.js?

After using create-next-app to create a basic page, I decided to style the index.js page. I added a navigation bar within the header and now I'm trying to customize it. I've been wondering if there's a way to style the custom Head tag in Ne ...

javascriptreactjsnext.js

"Bridging the Gap: Establishing Communication Among Backbone Marionette Views

I recently started working as a junior javascript developer at a company that utilizes Backbone and Marionette. My first project involves implementing searching, filtering, and sorting capabilities in a collection based on user input. The challenge lies in ...

javascriptjquerybackbone.js

Animate the fire with a click instead of a hover

Is there a way to incorporate a flip animation into a button using a click event instead of hover? Perhaps starting with the + button on the frontside could be a good starting point. Check out this link for reference I have grasped that the animation is ...

javascripthtmlcss

Ways to extract a number that comes after a specific word in a URL

I have a URL and need to extract a specific value from it by removing a certain step. I am looking for a regex solution to accomplish this task For example, if I have the window.location.href, the URL might look like this: https://mypage/route/step-1/mor ...

javascriptregex

Adjusting the Transparency of the Background in a Pop-Up

I am experiencing an issue with my popup where I want the background to be transparent. However, when I set the opacity in CSS to 0.5 or less, the text also becomes transparent and very dark. How can I achieve a background with 50% opacity while keeping th ...

javascripthtmlcsspopup

Creating a 2D array in JavaScript filled with data retrieved from a PHP-MySQL database

Having just started learning Javascript/PHP, I have encountered a particular issue that I hope someone can assist me with. When attempting to generate a javascript array from PHP, everything works smoothly until I reach the column 'Function' in m ...

phpjavascriptmysql

Is it possible for object destructuring in Javascript to include dynamic non-rest keys using ...rest?

Suppose we have an object: const obj = { key1: "value1", key2: "value2", key3: "value3", key4: "value4" }; My goal is to filter out specific keys from this object to create a smaller one. I am aware of the following ...

javascriptarraystypescriptdynamicdestructuring

Using Vue to append elements that are not part of the loop

While looping over a table row, I realized that each of the table rows should be accompanied by another table row containing additional data from the loop. Unfortunately, I am struggling to insert <tr class="data-spacer"></tr> <tr& ...

javascriptvue.js

Using jest.fn() to simulate fetch calls in React

Can anyone explain why I have to include fetch mock logic within my test in order for it to function properly? Let's take a look at a simple example: Component that uses fetch inside useEffect and updates state after receiving a response: // Test.js ...

javascriptreactjstestingjestjsreact-testing-library

React: The onClick function for the button is executing upon page load instead of when the button is clicked

I am currently utilizing the ButtonGroup and Button components from ReactStrap. Within my code, I have specified an onClick function for one of the buttons: <ButtonGroup> <Button>Edit</Button> <Button onClick={console.log("Print s ...

javascriptreactjsbuttonbootstrap-4react-bootstrap

Enhancing the performance of jquery selection speed

I am currently working on a code that manipulates the HTML code of an asp.net treeview. Since this code runs frequently, I need to ensure that it executes with maximum speed. I am interested in expanding my knowledge on jQuery selectors and optimizing th ...

javascriptjqueryhtmlperformancecpu-speed

Locating the Smallest Value in an Array of Objects

Looking at an object with keys containing arrays of objects that each have a price value. The goal is to find and return the lowest price value. In this scenario, aiming to return the value 8. Wondering if using the reduce method would be the best approach ...

javascriptarraysobjectecmascript-6

Chrome erroneously assigns locality to values within CSSStyleSheet

Could there be a glitch in Chrome version 65.0.3325.146 on macOS High Sierra causing CSSStyleSheet to apply locale to its values? The code below demonstrates the issue, resulting in incorrect output for users with Russian system locale utilizing "," as the ...

javascriptcssgoogle-chrome