Don't pay attention to the parent's rotation in THREE.JS

Question

Don't pay attention to the parent's rotation in THREE.JS

Currently, I am attempting to have a child object mimic its parent's position while maintaining its original rotation. I am concerned about performance, as I am already running 2 workers and have a large number of objects to manage. Is there a way to achieve this without impacting CPU usage significantly?

Is there a setting that would allow only the child's position to be affected, keeping its rotation unchanged?

It is crucial that when the parent is rotated, the child's position adjusts accordingly to maintain synchronization.

javascript matrix three.js position

Answer 1

Answer №1

To stop a child object from rotating along with its parent's rotation, you can implement one of the following two methods, each with slightly different effects.

The first approach involves creating a new Three.js Gyroscope object:

var gyro = new THREE.Gyroscope();

scene.add(parent);
parent.add(gyro);
gyro.add(child); // attach child to the gyroscope

child.position.set(x, y, z);

The second method involves using an Object3D object:

object = new THREE.Object3D();
object.position.set(x, y, z); // set child's desired position relative to parent

scene.add(parent);
parent.add(object); // attach object to parent
scene.add(child); // attach child to the scene

If you opt for the second technique, you will need to manually update the child's position within the render loop, as shown below:

child.position.setFromMatrixPosition(object.matrixWorld);

Version used: three.js r.71

Answer 2

To stop a child object from rotating along with its parent's rotation, you can implement one of the following two methods, each with slightly different effects.

The first approach involves creating a new Three.js Gyroscope object:

var gyro = new THREE.Gyroscope();

scene.add(parent);
parent.add(gyro);
gyro.add(child); // attach child to the gyroscope

child.position.set(x, y, z);

The second method involves using an Object3D object:

object = new THREE.Object3D();
object.position.set(x, y, z); // set child's desired position relative to parent

scene.add(parent);
parent.add(object); // attach object to parent
scene.add(child); // attach child to the scene

If you opt for the second technique, you will need to manually update the child's position within the render loop, as shown below:

child.position.setFromMatrixPosition(object.matrixWorld);

Version used: three.js r.71

Answer 3

Answer №2

One alternative solution is to use the following code:

child.position.copy(object.position);

This is a different approach from WestLangley's suggestion, which is:

child.position.setFromMatrixPosition( object.matrixWorld );

I found that the latter method caused inaccuracies and jitter in the child's position.

Keep in mind that this response only addresses the first part of your question, specifically how to track the parent's position while maintaining the child's rotation.

If you could provide more details or clarification on the second part of your inquiry, it would be helpful in providing a more comprehensive answer.

Answer 4

One alternative solution is to use the following code:

child.position.copy(object.position);

This is a different approach from WestLangley's suggestion, which is:

child.position.setFromMatrixPosition( object.matrixWorld );

I found that the latter method caused inaccuracies and jitter in the child's position.

Keep in mind that this response only addresses the first part of your question, specifically how to track the parent's position while maintaining the child's rotation.

If you could provide more details or clarification on the second part of your inquiry, it would be helpful in providing a more comprehensive answer.

Don't pay attention to the parent's rotation in THREE.JS

Answer №1

Answer №2

Similar questions

Implementing Event Handlers Post-Infinite Scroll Refresh

Are you able to locate <td>s with identical classes using just a portion of the string?

Executing a javascript function using PHP

Tips for effectively using $interval for ongoing polling in AngularJS?

Optimizing Animation Effects: Tips for Improving jQuery and CSS Transitions Performance

Retrieve the image by its unique identifier while viewing a preview of the image before it is uploaded

How can I achieve unique spacing between rows in material-ui grid components?

Unable to update state in my React app when clicking on a button

Resolving the issue of multiple instances of React within a single application

Accessing the observable's value by subscribing to it

Submit the form without displaying any output in the browser, not even in the view source code

XPath Selector in Puppeteer version 22.x

Serve static assets files based on the route path instead of using absolute paths

The undead browser refuses to display a window upon attempting to open using the open function

"findByIdAndUpdate continues to work successfully even when the request body includes parameters that are not defined in

React error #425: Timezone formatting causing minification issue

Guide to sending and receiving JSON data using XAMPP PHP

Generate interactive tables using data from an XML file

I am looking to extract a specific value from my JSON file

Confirm Submission Issue in HTML Form