Take the THREE.js matrix data from an object

I am trying to perform matrix multiplication in Three.js. In my code, I have an Object3D and I managed to retrieve the correct matrix by using console.log like so:

console.log(scene.getObjectByName("Pointer").matrix)

The output looks something like this:

T…E.Matrix4 {elements: Float32Array[16]} elements: Float32Array[16] 0: 1, 1: 0, 2: 0, 3: 0, 4: 0, 5: 1, 6: 0, 7: 0, 8: 0, 9: 0, 10: 1, 11: 0, 12: -150, 13: 0, 14: 0, 15: 1

Pay attention to the 12th element which has a value of -150 (resulting from obj.translationX(-150)).

var newMat = new THREE.Matrix4();
console.log(scene.getObjectByName("Pointer").matrix.elements)
// output: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]
newMat = newMat.copy(scene.getObjectByName("Pointer").matrix);
console.log(newMat);
// output: elements: Float32Array[16] 1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1

This results in an identity matrix being returned (indicating that the 12th element is: 0).

Can anyone spot what might be wrong here?

UPDATE: It seems that inside the render loop, newMat.copy(...) works just fine!

javascriptmatrixthree.js

Answer №1

When three.js renders the page, it automatically updates the object matrix based on its position, scale, and rotation. This means that if you manually set the object matrix, it will soon be overwritten. To prevent this, you need to set autoupdate to false.

object.matrixAutoUpdate = false;

After doing this, you can use the following code:

var newMatrix = new THREE.Matrix4();
console.log(scene.getObjectByName("Pointer").matrix.elements);
// Output: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]
newMatrix = newMatrix.copy(scene.getObjectByName("Pointer").matrix);
console.log(newMatrix);

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

Combine consecutive <p> tags within a <div> container

Can you group all adjacent <p> elements together within a <div> element? For example, assuming the following structure: <div class="content"> <p>one</p> <p>two</p> <h2> not p</h2> <p>thr ...

javascriptjqueryhtmldom

Select either one checkbox out of two available options

My form includes two checkboxes, allowing users to click on both of them. I'm wondering if it's possible to set it up so that only one checkbox can be selected at a time. For example, clicking on the first checkbox would turn it on while turning ...

javascripthtmljquerycss

JQuery addClass function not functioning properly when used in conjunction with an AJAX request

I have a website where I've implemented an AJAX pagination system. Additionally, I've included a JQUERY call to add a class to certain list items within my document ready function. $(document).ready(function(){ $(".products ul li:nth-child(3 ...

javascriptphpajaxjquery

Capturing Ajax Success in Rails

After extensive googling, I have been unable to find my mistake. As a beginner with JS, this may be an easy fix for someone with more experience. Working with Rails 4. I am working on a modal that contains a form and I want to perform certain actions afte ...

javascriptruby-on-railsajaxtwitter-bootstrapruby-on-rails-4

Having trouble with the clip-path in d3.js liquid fill gauge

Attempting to integrate the d3.js liquid fill gauge into my angular2 webapp has been a challenge. The clippath functionality seems to be malfunctioning, resulting in no wave being generated at all. https://i.stack.imgur.com/3Bmga.png instead of https://i. ...

javascriptd3.jstypescriptangular

Add a sound file to the server and configure the images based on the server's response

I am a newcomer to JavaScript and AJAX, and I am facing an issue while trying to upload an audio file to the server and display the image from the server response. When attempting to pass the audio file from the input tag to an AJAX call, I encounter an il ...

javascriptjavahtmlajaxjakarta-ee

Build a Docker container for a project that requires utilizing yarn link for dependencies

While working on my NextJS project, I made the decision to utilize yarn as my package manager and utilized yarn link for import aliases/absolute imports. This feature of yarn is quite handy and is recommended for managing aliases within a project. However, ...

javascriptreactjsdockernext.jsyarnpkg

Creating a ROT13 cipher in JavaScript

In my JS function, I need to handle a variable called i. My goal is to encode this variable using ROT13 before proceeding with the function. The challenge lies in decoding the variable and integrating it into the script. I came across a JavaScript implem ...

javascriptrot13

What strategies can be employed to tackle the challenges posed by Ajax asynchronous calls?

Beginner in JavaScript - I just wanted to mention that upfront. Take a look at this straightforward example where I aim to create X number of gauges, with the value of X being retrieved from JSON using an Ajax call. <body> <div id="gServer"> ...

javascriptjqueryajax

`Troubleshooting a rotation problem with PhysiJS`

I've recently started working with this library and I've run into a persistent issue that has been quite challenging for me. My current setup involves two cubes, one utilizing physi.js and the other using three.js. I have a function in place to ...

javascriptthree.jsphysijs

How to Force a jQuery Redraw Following Data Retrieval Using Ajax

Hey everyone, It's been a long time since I started listening, but this is my first post... I have a client who needs a complex feature on their website. They want to merge the content of 3 different pages into one seamless experience for users afte ...

javascriptjqueryajaxsimultaneoussimultaneous-calls

What type of technology is typically utilized in creating functional platforms such as goDaddy, wix, and other web design websites?

I am currently working on a web development project that aims to allow users to edit webpages without needing any coding knowledge. Users with authorization will be able to modify not only the text but also various HTML tags on the page, similar to platfor ...

javascriptjavahtml

Steps for Removing Multiple CSS Styles from an Element's Style:

When my application generates inline styles, I sometimes need to remove the height, width, and max-width styles from certain elements. I have identified the element using this code: const elems = window.$('.myElements'); window.$.each(elems ...

javascriptjquerycss

Issue encountered in React: Unable to access object value within ComponentDidUpdate method

I'm struggling to retrieve the value from an object key. componentDidUpdate(prevProps) { if (prevProps !== this.props) { console.log("component did update in top menu", this.props.topmenudata[0]) this.setState({ ...

javascriptreactjs

Tips for troubleshooting JavaScript within an embedded V8 environment

Currently, I am endeavoring to grasp the functioning of the Debug object in V8 for debugging javascript within an embedded-javascript C++ application. After invoking v8::Debug::SetDebugEventListener and specifying a callback function, I proceed to execute ...

javascriptv8embedded-v8

Ways to manage absent embedded expressions in template literals

I'm curious about the most effective way to handle expressions in a template literal. The following code functions correctly var val1 = "Hello" var val2 = "world" var template = `${val1} ${val2}!` console.log(template) However, suppose for some rea ...

javascriptnode.js

What is the best way to sequentially invoke an asynchronous function within an Observable method?

Presently, I have the following method: public classMethod( payload: Payload, ): Observable<Result> { const { targetProp } = payload; let target; return this.secondClass.secondClassMethod({ targetProp }).pipe( delayWhen(() ...

javascriptnode.jsasync-awaitrxjs

Has xlink:href become outdated for svg <image> elements?

In the realm of SVG attributes, it is noted by MDN xlink:href that href should be used over xlink:href. Interestingly, on the svg example page, last revised on July 6, 2017, the attribute utilized in the given example is xlink:href. The question arises: ...

javascriptsvg

The sorting feature for isotopes is malfunctioning following the addition of a new div element

Isotope was utilized for sorting divs based on attribute values, however, a problem arises when a new div is added or an existing div is edited. The sorting functionality does not work properly in such cases, as the newly created or edited div is placed at ...

javascriptjquery-isotope

How can I confirm that all elements have been properly reset to their original positions prior to making any further adjustments to them?

In need of some creative brainstorming, I'm working on a website design featuring ten overlapping cards. When the mouse hovers over a card, it expands while others move away. My goal is for each card to return to its original position once the cursor ...

javascripthtmlcssdom