How to maintain global position, rotation, and scale when adding an object to a group in Three.js

I need to transfer an object from one group (or world/scene) to another group while maintaining its global transformation. I want the object to appear unchanged.

Here is an example of what I am trying to achieve:

//store the current world transformation
var origWorldMatrix = myObject.matrixWorld.clone();

//move the object to a group (positioned and rotated arbitrarily)
someGroup.add(myObject);

//restore the previous world transformation
myObject.matrixWorld.copy(origWorldMatrix);

Unfortunately, this method does not seem to work. I believe this is because the world matrix is constantly updated in the next frame based on the local properties of position, rotation, and scale. I have attempted to use matrixAutoUpdate = false, but that has also proved ineffective.

It seems like achieving the desired result should be straightforward, so I must be overlooking something obvious. Can anyone provide me with some guidance on how to accomplish this?

Thank you!

Answer №1

UPDATE: Utilize the Object3D method attach() to seamlessly add the object as a child of the parent:

// Attach the object to the parent while preserving its world transform

parent.attach( object );

Based on three.js r.109

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

Click a button to switch the visibility of a section in an

Is there a way to create a toggle feature in Angular.JS that will open and close a div when clicked on the same div again? Currently, it opens the div when clicked but I want it to also close the div when clicked again. <a ng-href ng-click="openAccordi ...

Opposition.js conditional graph insertion

Currently, I am in the process of developing an import feature for our software that allows users to import data from Excel files into the system. We utilize objection.js (a creation tool) and I am using the insertGraph() method to insert content. My main ...

Getting map data from Mapbox and displaying it on an HTML page

I have been working with Mapbox GL JS and successfully retrieved data in the console. However, I am facing issues when trying to display this data on an HTML page. Can anyone assist me with this problem? I specifically need the data inside mapdata to be sh ...

Refresh Div/PartialView periodically

I have a function that performs an Ajax call, retrieves a result, and functions perfectly. @foreach (var fighter in Model.Fighters) { @Ajax.ActionLink(fighter.FirstName + " " + fighter.LastName, "ShowResults",new {id = fighter.FighterID }, new AjaxOptions ...

How to activate select only when specific options are chosen using jQuery

I am working on a form that has 1 select element disabled, with 4 options. I am looking to implement a jQuery function that will perform the following actions: If OPTION #1 is clicked, it should check if any other options are selected and reset them (eras ...

Display several modal pop ups using AngularJS

I'm currently using AngularJS and I have a requirement where I need to check if a student ID exists in the database when a user clicks a button. If the student ID is found in the database, I want to display #modal1, otherwise show #modal2. Is it achie ...

At what stage of the Angular JS application life cycle is this code being loaded?

I am facing a difficult issue with the timing of Angular JS life cycle in relation to the code snippet below. There seems to be a random occurrence where controllers dependent on this code are loaded before it, leading to errors. Even after multiple atte ...

Utilizing Slots in Vue: Accessing Component Methods

I recently started working with Vue and am facing an issue with Vue slots. The component structure is as follows: <template> <div class="dropDown__container"> <div v-show="isOpened" class="dropDown__content" style="display:non ...

Deleting a hyperlink within a content-editable area

Presently, I am in the process of working on a straightforward project where users can format text using contenteditable. I have successfully implemented a feature that allows users to add hyperlinks to selected text by clicking on the "Create Link" button ...

Exploring Unicode Symbols for Icon Selection

I'm currently working on integrating an icon picker into my application that will enable the user to select a mathematical operator for data comparison. While I have successfully implemented the fontawesome-iconpicker on the page, I am encountering d ...

JavaScript treats string as a primitive value

When it comes to JavaScript, a String is considered a primitive value. However, it can also be treated as a String object. In programming terms, a primitive value refers to a value assigned directly to a variable. This raises the question: var d = "foo"; ...

Error message: The requested resource could not be loaded due to a server error (status code 500) when using

I have been struggling to identify the exact issue with my code, despite referencing previous questions on the topic. function viewcalldetails(obj) { alert("clicked"); var id = $(obj).attr("id"); $(".style-t ...

Implement a click event for the X-Axis label in Angular 2 Highcharts

I'm currently facing a challenge with hand-rolling a solution that involves adding a click listener to an X-Axis label in a column chart using the HighCharts API within an Angular 2+ application. Here is what I have gathered so far: I am utilizing ...

"Why is the comparison function of bcryptjs returning null even though the hash being used is the one that was generated

For security purposes, I securely store hashed passwords in MongoDB. However, when I attempt to compare the stored password with a user-entered string, bcryptjs returns a null value. https://i.stack.imgur.com/4sTXM.png The hashed password is stored in bin ...

Is there a way to differentiate the color of an active link from an inactive one, so users can easily identify which link they are currently viewing?

How can I customize the color of text for the active page on my website's sidebar? For example, I have two hyperlinks, one for HOME and one for ABOUT. When a user clicks on the HOME link, I want the text color to change to green while the ABOUT link r ...

What makes a pointer to pointer function like a matrix?

Could someone shed light on why a pointer to pointer is sometimes likened to a matrix in certain cases? Which specific property of C enables this comparison? Please refrain from responses like "A pointer to pointer is not always a matrix". I am aware of t ...

"Encountering an issue where the route function in Passport and ExpressJS is not being

When using passport for admin authentication, I am facing an issue where the redirect is not calling my function. Consequently, all that gets printed on login is [object Object] Here is my code: app.get('/admin', isLoggedIn, Routes.admin); ...

Having trouble getting your custom Angular directive to function properly with dynamically changing images?

Currently in the process of developing a custom directive for AngularJs that involves an image rotator based on a Jquery Plugin I created, you can check it out here Below is the code snippet for my directive: .directive('imageRotator', function ...

Creating a menu header similar to Gmail's design is a great way to

How can I create a fixed menu similar to the one in Gmail? I've attempted using CSS, but the div remains centered instead of sliding up on scroll like the Gmail menu. View in full-size image I've experimented with CSS properties, here's an ...

Utilizing MongoDB query for geoLocation with maxDistance parameter

Customer location: customerCoordinates: [83,24] stores: { id:1, location: {coordinates:[85,44]...} maxRadiusDelivery: 2000 //meters }, { id:2, location: {coordinates:[82,34]...} maxRadiusDelivery: 100 //meters } Query: db.wh.find({ 'locati ...