Determine the scene vector's object-relative local orientation in Three.js based on provided world orientation coordinates

Question

Determine the scene vector's object-relative local orientation in Three.js based on provided world orientation coordinates

One vector, V, is specified in a particular scene. The vector is defined using World Coordinates (VWx,VWy,VWz), and it is important to note that this is a direction vector, not a position vector.

In the same scene, there is an Object3D with a random orientation (and position).

The goal is to determine the local coordinates (VLx,VLy,VLz) of the direction vector V relative to the Object3D.

An attempt has been made using the following code (derived from WestLangley's response in this thread), but the results are incorrect:


var VW = new THREE.Vector3(10,20,30); 
var VL = new THREE.Vector3(0,0,0); 

givenObject.updateMatrixWorld();

var ob_WorldQuaternion = new THREE.Quaternion(); 
ob_WorldQuaternion  = givenObject.getWorldQuaternion();

var ob_InvWorldQuaternion = new THREE.Quaternion(); 
ob_InvWorldQuaternion = ob_WorldQuaternion.inverse();

VL = VW.applyQuaternion( ob_InvWorldQuaternion);

EDIT(1): It should be noted that the .worldToLocal(vector) method provided by THREE.js for Object3D is not suitable as it is designed for converting position vectors, rather than direction vectors.

EIDT(2): An example application can be seen in this jsfiddle. In this demonstration, the green cone is a child of the green box, and the objective is to keep the green cone pointing in the same world direction as the white world cone.

javascript vector three.js rotation

Answer 1

Answer №1

(Here is an enhanced version of my original response).

Check out this jsfiddle showcasing 3 different methods for aligning child cones.

The red cone maintains a fixed orientation in relation to its parent box.

The green cone is aligned so that its z-axis aligns with the white world cone.

As for the blue cone, its XYZ axes are co-aligned with the XYZ axes of the white world cone.

Here is the code snippet from the initialization function:

cone_geometry = new THREE.CylinderGeometry(3, 40, 120, 40, 10, false);

// The following modification is based on WestLangley's recommendation at:-
// http://stackoverflow.com/questions/13757483/three-js-lookat-seems-to-be-flipped
// When cone.LookAt(PosX) is used, it points the cone Z-axis towards PosX
// (assuming both cone.position and PosX are relative to the same coordinate system).

cone_geometry.applyMatrix(new THREE.Matrix4().makeRotationX(Math.PI / 2));

And here is the core piece of code from the update/animate function:

worldCone.lookAt(target.position); 

var worldVec = new THREE.Vector3();
worldVec.copy(target.position).sub(worldCone.position);

worldBox.rotation.x += 0.01;
worldBox.rotation.y += 0.03;
worldBox.rotation.z += 0.02;

var localVec = new THREE.Vector3();
localVec = F_get_LocalDirectionVector_relativeTo_Object3D_of_WorldDirectionVector(worldBox, worldVec, localVec);

function F_get_LocalDirectionVector_relativeTo_Object3D_of_WorldDirectionVector(givenObject, WDV, LDV) {
    givenObject.updateMatrixWorld(); 

    LDV.copy(WDV)
       .applyQuaternion(givenObject.getWorldQuaternion().inverse());  

    return LDV;
} 

var localCone_G_target_pos = new THREE.Vector3();

localCone_G_target_pos.addVectors(localCone_G.position, localVec);

localCone_R.lookAt(1, 0, 0);
localCone_G.lookAt(localCone_G_target_pos);
localCone_B.lookAt(1, 0, 0);
localCone_B.quaternion.multiply(worldBox.getWorldQuaternion().inverse());
localCone_B.quaternion.multiply(worldCone.quaternion);

Answer 2

(Here is an enhanced version of my original response).

Check out this jsfiddle showcasing 3 different methods for aligning child cones.

The red cone maintains a fixed orientation in relation to its parent box.

The green cone is aligned so that its z-axis aligns with the white world cone.

As for the blue cone, its XYZ axes are co-aligned with the XYZ axes of the white world cone.

Here is the code snippet from the initialization function:

cone_geometry = new THREE.CylinderGeometry(3, 40, 120, 40, 10, false);

// The following modification is based on WestLangley's recommendation at:-
// http://stackoverflow.com/questions/13757483/three-js-lookat-seems-to-be-flipped
// When cone.LookAt(PosX) is used, it points the cone Z-axis towards PosX
// (assuming both cone.position and PosX are relative to the same coordinate system).

cone_geometry.applyMatrix(new THREE.Matrix4().makeRotationX(Math.PI / 2));

And here is the core piece of code from the update/animate function:

worldCone.lookAt(target.position); 

var worldVec = new THREE.Vector3();
worldVec.copy(target.position).sub(worldCone.position);

worldBox.rotation.x += 0.01;
worldBox.rotation.y += 0.03;
worldBox.rotation.z += 0.02;

var localVec = new THREE.Vector3();
localVec = F_get_LocalDirectionVector_relativeTo_Object3D_of_WorldDirectionVector(worldBox, worldVec, localVec);

function F_get_LocalDirectionVector_relativeTo_Object3D_of_WorldDirectionVector(givenObject, WDV, LDV) {
    givenObject.updateMatrixWorld(); 

    LDV.copy(WDV)
       .applyQuaternion(givenObject.getWorldQuaternion().inverse());  

    return LDV;
} 

var localCone_G_target_pos = new THREE.Vector3();

localCone_G_target_pos.addVectors(localCone_G.position, localVec);

localCone_R.lookAt(1, 0, 0);
localCone_G.lookAt(localCone_G_target_pos);
localCone_B.lookAt(1, 0, 0);
localCone_B.quaternion.multiply(worldBox.getWorldQuaternion().inverse());
localCone_B.quaternion.multiply(worldCone.quaternion);

Determine the scene vector's object-relative local orientation in Three.js based on provided world orientation coordinates

Answer №1

Similar questions

The OnClick function seems to be unresponsive, however, there are no error messages displaying in

In a production setting, Remix js is experiencing a 403 error when attempting to make a POST request, although it functions properly in a local

The Facebook share button on my website is malfunctioning

The process of flattening an array in Zustand: a comprehensive guide

No error reported upon trying to render json output

What is the process to access array elements in AngularJS?

Extracting data from a JSON object using Angular

Vue throwing ReferenceError when accessing uninitialized variable in Safari browser

Determining the final value of the last handle in a jQuery UI slider with multiple sliders present

The process of setting up React in the terminal becomes tricky when the VS code editor is directing to a non-existent path

Combining the powers of Express.js, Sequelize, and advanced form validation

Enable the execution of a function only once a specific period of time has elapsed

Is it true that elevating state in React leads to redundant re-rendering?

Personalizing Google Map pin

Chip input component in React

Identifying the class name of SVGAnimatedString

The error "ReferenceError: Component is not defined in Meteor" indicates that the Component

Unable to access setRowData() in AgGrid/Angular 2 leads to rendering of the grid without displaying any rowData

Creating groups using address strings from a list of users with pre-assigned groupings

Exploring the compatibility between ADFS 2.0 and JSONP