Is there a way to reset a three.js mesh's matrix to its original value after multiple transformations have been applied? I want to ensure that each subsequent transformation is based on the original state of the mesh. How can this be achieved?
I attempted the following approach, but it did not yield the desired result
const identity = model.matrix.identity();
model.matrix = identity;
model.matrixWorld = identity;
model.updateMatrix();
model.updateMatrixWorld();
model.applyMatrix4(newMatrix);
UPDATE: I am revising my response entirely due to discovering that using Object3D.applyMatrix4 not only modifies the matrix, but also updates the position, quaternion, and scale properties.
To handle this situation, it is recommended to save the original matrix of the model and restore it before each subsequent update. This can be achieved by leveraging the Object3D.userData feature.
// Make sure to set the local matrix from position/quaternion/scale before any updates:
model.updateMatrix();
// Save a copy of the current matrix as a backup:
model.userData.originalMatrix = model.matrix.clone();
// Reset the model to its original state before every update
model.userData.originalMatrix.decompose(model.position, model.quaternion, model.scale);
model.matrix.copy(model.userData.originalMatrix);
Here is a simple method to reset the matrix in Three.js ():
newMatrix.decompose(obj.position, obj.quaternion, obj.scale);
obj.updateMatrix();
Alternatively, you can use the applyMatrix4 method along with an initial transformation:
var initialTransformation = new THREE.Matrix4().identity(); // any initial transformation matrix
initialTransformation.decompose(obj.position, obj.quaternion, obj.scale);
obj.updateMatrix();
obj.applyMatrix4(newMatrix);
obj.updateMatrix();
I'm struggling with programming a calculator for my class. I followed the instructions from our lesson, but it's not functioning properly and I can't pinpoint the issue. I just need a hint on where the problem might be located. The calculat ...
While creating a money manager application utilizing the MERN Stack, I encountered an issue with posting data to the database. Whenever I click on the register button, an error is thrown stating that it Cannot POST /api/users/register. Despite setting up a ...
I am facing an issue with mapping two sets of JSON data, which I will refer to as Set 1 and Set 2. In Set 1, the data (named sizingData) is being mapped to text fields using the following function: const fillTextField = () => { let result = []; ...
I am presented with the following snippet of HTML code: <select id="choice1"> <option value="0">Option 0</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3 ...
Wondering if there is a solution for preventing page scroll when a simple menu button opens a semi-transparent overlay with an opacity of 0.9. I tried using techniques like setting body: overflow hidden and position fixed, but it only works on iPhone Safar ...
I am working on rendering API data using Express (REST) and EJS (template engine) based on the value of the "status" field. If any item in the array has a status other than "CLOSED," it should be displayed, but if all items have the status set to "CLOSED," ...
I am seeking a way to consolidate the export of my classes, interfaces, and enums from multiple files into a single file. In JavaScript, I achieved this using the following method: module.exports = { Something = require("./src/something").default, ...
Today, I have a new challenge to tackle on my website. I am determined to implement an INSTANT SEARCH feature that will search through all of my posts. One great example to draw inspiration from is found here: Another impressive implementation can be se ...
In the process of developing an API using the next.js app router, I encountered an issue. Specifically, I was successful in parsing the data with const res = await request.json() when the HTTP request type was set to post. However, I am facing difficulties ...
After following the steps outlined in this particular blog post (section 3, event binding), I successfully added an event listener to my component class. I can confirm that it responds when the mouse enters and exits. <p class="title" (mouseenter)="unf ...
On a regular basis, I utilize these flashcards. Recently, I have started using images as answers. However, I am facing an issue - I am unable to conceal the pictures. My preference is for the images to be hidden when the webpage loads. function myShowTe ...
Is there a way to add an array of objects to chartjs? In the controller of the view, an array is passed to the Twig template using the variable {{cg}}. However, I am encountering an error that suggests the array I am working with is actually an array of ar ...
I found a way to retrieve the z-index value using this code snippet: findHighestZIndex('div'); function findHighestZIndex(elem) { var elems = document.getElementsByTagName(elem); var highest = 0; for (var i = 0; i < elems.length; ...
Currently, I have a React, Redux, and Next.js app up and running. Within my redux store, there is a user object that contains an attribute called "type". Each type of user has its own set of "routes" they are allowed to access. I am looking for the most e ...
Question: I have multiple dynamic forms on a web page, each with a file input field. How can I specifically target the correct file input using $(this) in JavaScript? Here is an example of one of my forms: <form enctype="multipart/form-data" action="c ...
I'm currently using Angular 9 and Node.js 12. When I input ng serve, I encounter the following problem: C:\Users\homz\my-app>ng serve 93% after chunk asset optimization SourceMapDevToolPlugin vendor.js generate SourceMap <--- ...
I am in the process of updating a portion of my script to use AJAX instead of Synchronous JAX to prevent the page from freezing. My goal is to check if a password is valid before sending it to the server. If the password is not valid, I want the password f ...
I am currently working on a project that involves creating a realistic rendering of a scene where a point light hits an object and reflects off at the same angle in relation to the face's normal (angle of incidence = angle of reflection), illuminating ...
<li class="megamenu-content"> <div class="megamenu-content-wrapper clearfix"> <ul class="col-lg-3 col-sm-3 col-md-3 "> <li class="cat-header">DISPLAY MEMBERS</li> ...
I'm looking to develop a real-time news application that displays a list of countries with the latest news next to each country name, automatically updating as new information is added to the API. For instance, I have an endpoint like this: (for Aust ...