How can one implement a matrix transformation and establish it as the default state in ThreeJS?

I am working with a group of THREE.Mesh objects and my objective is to apply a rotation using the code snippet 

group.applyMatrix( new THREE.Matrix4().makeRotationX( Math.PI / 2) );
. Afterwards, I want to set this resulting matrix as the default state for the group so that I can use matrixUpdate() in my animation.

According to the ThreeJS documentation, it states: "Calling updateMatrix will clobber the manual changes made to the matrix, recalculating the matrix from position, scale, and so on."

Is there a method to preserve the manual changes I make and then designate the result as the default state of the group?

javascriptmatrixthree.js

Answer №1

Inspired by @EastLangley's insightful response, I have successfully resolved my issue! By performing a series of matrix transformations as needed, the final step was simply:

group.shapes.forEach( function(object) {
    object.geometry.applyMatrix( group.matrix );
});
group.updateMatrix();

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

Having trouble with JQuery Ajax when trying to send multiple data at once?

name = "John Doe"; username = "johndoe123"; password = "secure123"; $.ajax({ type: 'POST', url: "https://example.com/api", data: { name: name, username: username, password: password }, success: function(response, status, xhr ...

javascriptjqueryajax

Steps to retrieve a file following an AJAX request

Is it possible to automatically download a file following an AJAX call? Currently, when I make the AJAX request, it redirects me to the resource instead of initiating the file download. This is the AJAX function I am using: $('.download').click ...

javascriptjqueryajax

Error in Typescript: Function expects two different types as parameters, but one of the types does not have the specified property

There's a function in my code that accepts two types as parameters. handleDragging(e: CustomEvent<SelectionHandleDragEventType | GridHandleDragEventType>) { e.stopPropagation(); const newValue = this.computeValuesFromPosition(e.detail.x ...

javascripttypescript

Using jQuery AJAX to Populate a Textbox and Dropdown Menu

I am new to using JQuery AJAX, so I am still learning the syntax. Currently, I am retrieving values from a database and populating a dropdown box. What I would like AJAX to do is fill in three other fields with hardcoded information when a selection is mad ...

javascriptphpjqueryajax

Inject Angularjs Controller into Module Once DOM is Initialized: Tips and Tricks

When injecting new DOM elements with a controller, I encountered the following issue: app.controller('cart', function ($scope, $http) { $scope.content = { label: "hello, world!", }; }); var $html = '<div ng-controller="c ...

javascriptjqueryangularjs

What is the best method for clearing DOM variables and storage when a new innerHTML is loaded dynamically in a Single Page Application?

When I load Dynamic HTMLs with JS into a div on an index page, the content of the div gets updated dynamically based on user actions using the JQuery.load function. The loaded HTML includes JS files that are also added to the DOM and work as expected. How ...

javascriptjqueryhtmlangularjsdom

Animating multiple cubes at the same time with KeyFrameTracks in ThreeJS

How can I integrate a second animated cube moved via KeyFrameTracks in addition to the first cube in the following Three.js code example? Thank you! // To animate a second cube, create an animation sequence with the tracks // If a negative time value i ...

animationthree.js

Ways to retrieve information from a URL using the .get() method in a secure HTTPS connection

As I work on handling user input from a form using node.js, express, and bodyParser, I encounter an issue. Even after using console.log(req.body), the output is {}. This is puzzling as there is data in the URL when the form is submitted successfully at htt ...

javascriptnode.jsajaxexpresshttps

Would combining node.js with express for the back-end and emberjs for the client side be a suitable choice for my project?

As a seasoned web developer, I have limited experience with nodejs and have yet to dive into the world of emberjs (although I have worked extensively with backbone). I am embarking on a new project to create a web-based writing application focused on lite ...

javascriptnode.jsember.jsexpress

creating interconnections between input fields by employing event listeners in JavaScript

I've been experimenting with binding multiple input fields to a span element using jQuery. Specifically, I have two input fields containing integer values and the sum of these values is displayed in a span element. I want the span element to update wh ...

javascriptjquery

How can I efficiently make multiple API calls using redux-thunk?

This is the approach I took. const redux = require('redux') const thunkMiddleware = require('redux-thunk').default const axios = require('axios') const reduxLogger = require('redux-logger') const createStore = redu ...

javascriptnode.jsredux

Problem with integrating MEAN stack and bootstrap using bower

Recently, I've been delving into new methods of development and stumbled upon the MEAN stack. You can learn more about it here - After setting up Mongo, Node (and npm, among others) following the instructions on the website, I encountered a problem w ...

javascriptnode.jsbowermean-stack

Is there a way to instantly remove script from the document head using jQuery instead of waiting a few seconds?

I currently have a setup where I am utilizing Google Maps in production. To make this work, I must include a script in the head of my document that contains the API key for the Google Maps JavaScript API that my application relies on. The API key is being ...

javascriptjqueryvue.js

Use AJAX to send the form instead of using the action attribute

Struggling to get a form to submit using ajax instead of an action attribute, but so far, nothing seems to be working. The PHP script functions correctly when tested with an action submit. I've researched examples, read documentation, asked questions ...

javascriptajaxjquery

Decoding a serialized string into an object

I have a data string that is serialized in the format a=4&b=2&c=7. I am looking to convert this string into an object where each key-value pair is represented like this: { a:4, b:2, c:7 }. When I use serializeArray(), it only gives me an array with ...

javascriptjsonserialization

I'm interested in learning more about how to select or deselect all checkboxes

How can I uncheck the "all" checkbox when I uncheck another checkbox? $('#All').click(function () { var status = $(this).is(":checked"); if (status) { $.each($('input[name="checkbox"]'), function () { this. ...

javascriptajaxcheckbox

How to customize the color of Navbar pills in Bootstrap 4 to fill the entire height

Is there a way to ensure that the background of nav-items is completely filled with color rather than just partially? I attempted to use Bootstrap pills, but it did not achieve the desired effect. I also experimented with my own CSS, but encountered simil ...

javascripthtmlcssbootstrap-4twitter-bootstrap-4

I am interested in obtaining the latitude and longitude of a specific city

I need to relocate the Google Map to a particular city based on user selection from a dropdown menu. I must obtain the latitude and longitude of the chosen city. Once the city is selected, I will determine its coordinates using the following code: var c ...

javascriptphpjqueryajax

The callback functions, such as afterMove, are not being executed

This code snippet is copied from Owl Carousel's official website. I am having trouble getting the callback functions like afterMove to work. Can anyone help me figure out why the afterMove function is not being called? It seems that none of the callba ...

javascriptjqueryowl-carousel

javascript categorize data by key and display in a tabular format

I have a Client ID and gender information available. Shown below is a JSON response along with a JavaScript function to display the data in a table format. The JSON response structure is as follows: studies = [{ "id": { "Value&qu ...

javascriptjson