Calculating combined scaling ratios for a child mesh in Three.js

Question

Calculating combined scaling ratios for a child mesh in Three.js

Whenever I select a target mesh object, my goal is to connect a standard size sphere mesh object to it. In case the target mesh has been scaled differently than (1,1,1), the code below will make sure that the scaling of the attached marker sphere adjusts accordingly to maintain a consistent radius.

//...attach marker sphere to clicked object

        intersected_object.add(marker_sphere);

        var positionV3 = new THREE.Vector3(); 
        positionV3 = intersected_object.worldToLocal(intersects[0].point);
        xxx = F_Position_Copy_from_vector3_to_Object3D(positionV3, marker_sphere);

        marker_sphere.scale.x = 1/intersected_object.scale.x;
        marker_sphere.scale.y = 1/intersected_object.scale.y;
        marker_sphere.scale.z = 1/intersected_object.scale.z;

However, if the selected target mesh is a child of a parent mesh (or an Object3D) with non-uniform scaling, then we need to consider the parent's scaling when adjusting the marker sphere's scale. This becomes even more complex if the target is a grandchild.

One alternative approach would be to identify the most senior object within the target's ancestry hierarchy (excluding Scene) and base the positioning and scaling of the attached marker sphere on the values of this senior object.

INQUIRY

Is there an efficient and reliable method to determine the "senior" object in the ancestry hierarchy of a mesh object?

javascript three.js

Answer 1

Answer №1

This method appears to be effective when dealing with a variety of different objects.

//... locating senior parent object that is not a Scene
var currentObj = intersected_object; //...default
var finished = false;
while ( !finished )
{
    if ( currentObj.parent != "" ) //... not undefined
    { 
        if ( currentObj.parent.type == "Scene" ) //... reached the top
        {
            finished = true;
            var seniorObject = currentObj;
        }
        else
        {
            currentObj = currentObj.parent;
        }
    }
    else  //... no parent object
    {
     alert ('Hmm???');
     finished = true;
    }
}//... end while

//... adding marker sphere to the clicked object
seniorObject.add(marker_sphere);

//... positioning marker sphere in relation to clicked object
var positionVector3 = new THREE.Vector3(); 
positionVector3 = seniorObject.worldToLocal(intersects[0].point);
xxx = SOW_F_Position_Copy_from_vector3_to_Object3D(positionVector3, marker_sphere);

marker_sphere.scale.x = 1 / seniorObject.scale.x;
marker_sphere.scale.y = 1 / seniorObject.scale.y;
marker_sphere.scale.z = 1 / seniorObject.scale.z;

Answer 2

This method appears to be effective when dealing with a variety of different objects.

//... locating senior parent object that is not a Scene
var currentObj = intersected_object; //...default
var finished = false;
while ( !finished )
{
    if ( currentObj.parent != "" ) //... not undefined
    { 
        if ( currentObj.parent.type == "Scene" ) //... reached the top
        {
            finished = true;
            var seniorObject = currentObj;
        }
        else
        {
            currentObj = currentObj.parent;
        }
    }
    else  //... no parent object
    {
     alert ('Hmm???');
     finished = true;
    }
}//... end while

//... adding marker sphere to the clicked object
seniorObject.add(marker_sphere);

//... positioning marker sphere in relation to clicked object
var positionVector3 = new THREE.Vector3(); 
positionVector3 = seniorObject.worldToLocal(intersects[0].point);
xxx = SOW_F_Position_Copy_from_vector3_to_Object3D(positionVector3, marker_sphere);

marker_sphere.scale.x = 1 / seniorObject.scale.x;
marker_sphere.scale.y = 1 / seniorObject.scale.y;
marker_sphere.scale.z = 1 / seniorObject.scale.z;

Calculating combined scaling ratios for a child mesh in Three.js

Answer №1

Similar questions

Changing the height of one Div based on another Div's height

What is the best way to organize and group messages in JavaScript in order to push them to a subarray?

The mistake in npm install is when the console logs a bug that is notorious for causing npm to malfunction

Having trouble with importing SendInBlue into my NodeJS application?

Error with the mongo (1.4.4) query

transferring data from JavaScript to PHP variables

Is there a way to eliminate a div and all its contents from the DOM?

At what point should I be invoking compileComponents, and why am I managing to avoid doing so without consequence?

Testing with Jest in JavaScript shows the failure of a previously passing test when an object is moved to an external helper function

Generate a graphical representation with react-d3

JavaScript code to enforce a 100% page zoom setting

Increasing the width of a column in CSS

When the parent component in React JS rerenders, the props are not automatically passed down to the child

Having trouble adding HTML content to a parent div using jQuery and BackboneJS?

Encountering a problem while attempting to display an id dynamically using Vue.js?

Transitioning to TypeScript: Why won't my function get identified?

eslint is designed to not handle multiple package.json files

Modifying the user interface (UI) through the storage of data in a class variable has proven to be

Clicking on a different texture/image allows for the texture to change in Three.js

Extend the current main scene by overlaying a similar scene on the side