Understanding the difference between the local and global locations of a three.js Object3D

Question

Understanding the difference between the local and global locations of a three.js Object3D

Initially, I envisioned my small 'ship' with turrets that could track a target. This is the jfiddle I created to showcase it. You can view it here. However, when the turrets track, they behave strangely. I noticed that the turret seems to believe it is slightly off from its intended location (at the origin), as indicated by this piece of code:

turret_a.position.y = .25;
turret_a.position.z = 2;

The reason I set these values was to establish a relative position when adding the turret to the 'base ship', as shown in the following code snippet:

ship = new THREE.Object3D();
ship.add( ship_base );
ship.add( turret_a ) ;

Surprisingly, when I adjusted the position of turret_a after it was already added to the ship and the ship was included in the scene, the turret started to track in a way that aligned more closely with my vision.

My question pertains to why the lookAt() function appears to be using the previous location of the turret rather than its current position relative to its parent object when determining the necessary rotation angles. Why does this happen?

javascript 3d three.js

Answer 1

Answer №1

Upon examining the code for Object3D.lookA(), it becomes apparent that:

// This function does not accommodate objects with rotated and/or translated parent(s)

The code will function properly only if the parent ship is positioned at the origin and remains unrotated.

Check out the updated version here: http://jsfiddle.net/czGZF/4/

Using three.js r.59

Answer 2

Upon examining the code for Object3D.lookA(), it becomes apparent that:

// This function does not accommodate objects with rotated and/or translated parent(s)

The code will function properly only if the parent ship is positioned at the origin and remains unrotated.

Check out the updated version here: http://jsfiddle.net/czGZF/4/

Using three.js r.59

Answer 3

Answer №2

According to the documentation on the website, when it comes to Camera objects, the lookAt() method utilizes world positions, just as you have observed. This approach seems to be a common and standard practice in handling such situations.

Even though I am not overly familiar with the three.js API, it seems that in order to obtain the global position of the ball, you can utilize the following code snippet:

var targetPos = ball.position.clone();
ball.localToWorld(targetPos);

By implementing the above code, you should be able to make progress towards achieving your desired outcome. However, it is worth noting that the fiddle you are working with appears to be quite unpredictable, which may complicate finding a complete solution in a timely manner.

Answer 4

According to the documentation on the website, when it comes to Camera objects, the lookAt() method utilizes world positions, just as you have observed. This approach seems to be a common and standard practice in handling such situations.

Even though I am not overly familiar with the three.js API, it seems that in order to obtain the global position of the ball, you can utilize the following code snippet:

var targetPos = ball.position.clone();
ball.localToWorld(targetPos);

By implementing the above code, you should be able to make progress towards achieving your desired outcome. However, it is worth noting that the fiddle you are working with appears to be quite unpredictable, which may complicate finding a complete solution in a timely manner.

Understanding the difference between the local and global locations of a three.js Object3D

Answer №1

Answer №2

Similar questions

The computed properties in Vue are not receiving any values when an array is passed using v-bind

Modify the hover color of <TextField /> within the createMuiTheme() function

Guide on resetting the scrollHeight values of DOM elements obtained using ClientFunction

Filtering Sails.js query model based on a collection attribute

Is there a way to modify AJAX response HTML and seamlessly proceed with replacement using jQuery?

What is the best way to showcase information from multiple JSON files simultaneously?

Utilizing solely ThreeJS for crafting immersive user interfaces without the need for HTML DOM overlays is the optimal method to achieve

What are the steps to implement server side routing using react-router 2 and expressjs?

Getting the width of children components in Reactjs can be achieved by using the

Would it be considered improper to implement an endless loop within a Vue.js instance for the purpose of continuously generating predictions with Tensorflow.js?

Tips for resolving the problem when encountering the "undefined data" issue in the success callback of an AJAX request

Incorporating list items in a React component is not functioning as expected

Using React JS to iterate over an array and generate a new div for every 3 items

Is there a way to ensure that any updates made to the backend database are immediately visible in the browser?

Enhancing the appearance of individual cells in jQuery DataTables

Learning how to track mouse wheel scrolling using jQuery

leveraging a callback function alongside the useState hook

Manipulating a React table: Customizing a row in the table

How can I incorporate popups in React using mapbox-gl?

What is the best way to halt a jQuery function when hovering over it?