Adjusting the Global Position of a Child Element in Three.js

Is it possible to manipulate the global position of a child object in Three.js?

My main objective is to:

1) Unlink the child from its parent (without changing its location)
2) Move the parent to a different position
3) Reconnect the child (without altering its location)

In my scenario, the 'child' is actually a group of objects (and I want to maintain their original global positions)

So far, I have successfully accomplished steps 1 and 2 using the following method:

scene.updateMatrixWorld();
var vector = new THREE.Vector3();
vector.setFromMatrixPosition( child.matrixWorld );
grandParent.remove( parent );
scene.add( parent );
parent.children[0].position = vector;

When attempting to reverse the process by saving and updating the matrixWorld to its original value, I encountered difficulties. I understand that modifying the matrixWorld directly is not recommended, but it has been the most effective approach thus far.

Answer №1

Absolutely, it is possible to separate the child from the parent, modify the parent, and then rejoin the child.

Here is the specific method to achieve this:

parent.attach( object );

This code snippet will attach the object as a child of the parent without altering its world transform.

This solution is applicable for three.js version r.113

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

The server is currently pointing towards my local C drive directory instead of the desired message location

My goal is to create a functionality where, upon clicking the calculate button (without performing any calculations yet), the user will be redirected to a new screen displaying a response message that says "Thanks for posting that!". However, instead of th ...

What is the best way to display a collection of images in an HTML page?

I have a list of strings containing images. How can I display these images on a webpage using Angular? images: [ "https://images.oyoroomscdn.com/uploads/hotel_image/1097/340ea5ee01acc37f.jpg", "https://images.oyoroomscdn.com/uploads/hotel_image/1097 ...

Implement image uploading feature with Ant Design library in a React JS application

I need assistance with a basic application that allows users to upload images. Once the image is uploaded and the user clicks on the get data from upload button, the result should be displayed in the console as console.log("Received values of form: ", valu ...

Darken the entire webpage and gradually fade in a specific div element using Jquery

Currently, I am working on implementing the following functionality: - When a link is clicked, it should trigger a function to show a DIV (#page-cover) that will dim down the entire background. This div has a z-index of 999. - Following the dimming effect, ...

I seem to be having trouble with my JavaScript code when attempting to search for items within

I want to implement an onkeyup function for a text input that searches for patient names from column 2 in my table. However, it seems to be not working properly as I don't get any results in return. Below are the snippets of what I have done so far. ...

Parallel ajax function

After creating a form for registering new accounts, I wanted to ensure that the chosen email is available by checking it against a webservice. However, this process takes a few seconds. Let's take a look at the method used: function validateEmail(ema ...

Attempting to extract a parameter from a URL and pass it as an argument to a function for the purpose of locating objects based on

I am trying to retrieve data from a URL http://localhost:3000/share/user=sampleuser to display objects with an author value that matches the one in the URL. However, I encountered an error when attempting to call a function that extracts the value from t ...

Firebase Cloud Functions - Deleting the eldest offspring

I have created an onWrite cloud function that listens for updates made by a user. My goal is to delete the oldest child if there are more than three children present in the database. Here's where I currently stand: exports.removeOld = functions.datab ...

full-page graphics with dynamic transition

I have been experimenting with creating a smooth fade-in and fade-out transition between two pages that feature full-screen images. My current approach involves using the swup plugin. To display a new full-screen image on each page, I assign a class to ev ...

Tips for showcasing model data dynamically on a webpage using HTML

My model is constantly updating within a function, and I need a way to dynamically display this updated data without the need to refresh the page. How can I achieve this? models.py class MyLongProcess(models.Model): active_uuid = models.UUIDField(&apo ...

Ways to bypass a promise within a sequence

Currently, I am involved in a nodejs project and I am looking for a way to bypass a promise in a chain. Here is the code snippet I am working with. The initial promise block resolves a value of {success: true}. In the following block, I need to assess th ...

Looking for assistance with JQuery and JavaScript?

I oversee a team of employees, each with a 7-day work schedule. To streamline the process, I have developed a PHP form that I would like to use to collect data for verification in JavaScript before submitting it to an SQL database using AJAX. My main cha ...

Angular - Collaborative HTML format function

In my project, I have a function that sets the CSS class of an element dynamically. This function is used in different components where dynamic CSS needs to be applied. However, every time I make a change to the function, I have to update it in each compo ...

The shadows in Three.js do not appear on a specific section of the scene

I encountered a scenario where I was experimenting with casting shadows using a sphere on my plane. Everything looked fine in the initial picture. Initial Picture However, when I moved the sphere to a different location, the shadow did not fully cast ont ...

Create a new canvas for each iteration of a Vue.JS template loop

I'm having trouble figuring out how to initialize a local "signaturePad" canvas for each loop or required signature. Additionally, I am interested in binding "dataURL" to signaturePad.toDataURL("image/jpg"). This means displaying the dataURI for ever ...

Can spreading be used for destructuring?

These were the initial props I attempted to pass to a component: const allprops = { mainprops:{mainprops}, // object pageid:{pageId}, // variable setpageid:{setPageId}, // state function makerefresh:{makeRefresh} // state function } <Na ...

Combine functions from two objects that share the same properties into an array for each property

I need help combining the methods from two objects into one, resulting in an array of methods for each property in the parent object: obj1 = {"prop1":"method1","prop2":"method2"} obj2 = {"prop1":"method3","prop2":"method4"} Expected result: obj1 = {"pro ...

Tips for effectively splitting arrays nested within an array using JavaScript

Here is an example of slicing an array to generate a new one: var array= [ [1,"dataA","dataB","dataC","dataD"...], [2,"dataA","dataB","dataC","dataD"...], [3,"dataA","dataB","dataC","dataD"...], [4,"dataA","dataB","dataC","dataD"...]... ...

Is `send()` considered an anonymous function?

I am testing ajax on a local server, but encountering an issue where the console is showing that send() is being identified as an anonymous function and I am receiving a blank document. The console displays: XHR finished loading: GET "http://localhost/js ...

Tips for aligning text to the right with JavaScript

I have a function that contains a few words. I want to display them in a single column with right alignment, each word on a separate line. For instance, 'I will get everything I want' should be displayed as: see image here I will ...