How can I retrieve the precise location of a loaded .obj file in three.js?

Question

How can I retrieve the precise location of a loaded .obj file in three.js?

When trying to load the .obj file:

        loader.load( 'test.obj', function ( objMesh ) {
                objMesh.traverse( function ( child ) {
                if ( child instanceof THREE.Mesh ) {
                       child.material = mat2;
                }
            } );

I attempted to determine the position using mrdoobs code:

objMesh.geometry.computeBoundingBox();

var boundingBox = objMesh.geometry.boundingBox;

var position = new THREE.Vector3();
position.subVectors( boundingBox.max, boundingBox.min );
position.multiplyScalar( 0.5 );
position.add( boundingBox.min );

position.applyMatrix4( objMesh.matrixWorld );

alert(position.x + ',' + position.y + ',' + position.z);

However, I encountered the following error:

objMesh.geometry is undefined

Does this mean it is not possible with loaded meshes?

javascript three.js .obj

Answer 1

Answer №1

It might be possible, however, based on your situation it appears that the objMesh variable is local within the scope of the function ( objMesh ) {...}.

You could create a global variable, let's name it mesh, and then assign its value within the onLoad callback function:

var mesh;
...
loader.load( 'example.obj', function ( objMesh ) {
    objMesh.traverse( function ( child ) {
        if ( child instanceof THREE.Mesh ) {
            child.material = material2;
            mesh = child; // assigning the value to the global variable, this is applicable if objMesh has a single child of THREE.Mesh()
        }
    });

After that, you can utilize mrdoob's code on the mesh variable instead of objMesh.

Alternatively, you can encapsulate mrdoob's code within a function and then invoke this function in the onLoad callback function with your mesh as a parameter:

function absolutePosition( myMesh ){
    myMesh.geometry.computeBoundingBox();

    var boundingBox = myMesh.geometry.boundingBox;

    var position = new THREE.Vector3();
    position.subVectors( boundingBox.max, boundingBox.min );
    position.multiplyScalar( 0.5 );
    position.add( boundingBox.min );

    position.applyMatrix4( myMesh.matrixWorld );

    alert(position.x + ',' + position.y + ',' + position.z);
}

Call it within the callback function:

loader.load( 'example.obj', function ( objMesh ) {
    objMesh.traverse( function ( child ) {
        if ( child instanceof THREE.Mesh ) {
            child.material = material2;
            absolutePosition( child ); // invoking our function
        }
    });

Answer 2

It might be possible, however, based on your situation it appears that the objMesh variable is local within the scope of the function ( objMesh ) {...}.

You could create a global variable, let's name it mesh, and then assign its value within the onLoad callback function:

var mesh;
...
loader.load( 'example.obj', function ( objMesh ) {
    objMesh.traverse( function ( child ) {
        if ( child instanceof THREE.Mesh ) {
            child.material = material2;
            mesh = child; // assigning the value to the global variable, this is applicable if objMesh has a single child of THREE.Mesh()
        }
    });

After that, you can utilize mrdoob's code on the mesh variable instead of objMesh.

Alternatively, you can encapsulate mrdoob's code within a function and then invoke this function in the onLoad callback function with your mesh as a parameter:

function absolutePosition( myMesh ){
    myMesh.geometry.computeBoundingBox();

    var boundingBox = myMesh.geometry.boundingBox;

    var position = new THREE.Vector3();
    position.subVectors( boundingBox.max, boundingBox.min );
    position.multiplyScalar( 0.5 );
    position.add( boundingBox.min );

    position.applyMatrix4( myMesh.matrixWorld );

    alert(position.x + ',' + position.y + ',' + position.z);
}

Call it within the callback function:

loader.load( 'example.obj', function ( objMesh ) {
    objMesh.traverse( function ( child ) {
        if ( child instanceof THREE.Mesh ) {
            child.material = material2;
            absolutePosition( child ); // invoking our function
        }
    });

How can I retrieve the precise location of a loaded .obj file in three.js?

Answer №1

Similar questions

Is there a way for me to delay sending an immediate response until the asynchronous loop has completed?

What is the reason behind the enhancement in rendering speed when merging geometries?

Pause and wait for the completion of the Ajax call within the function before assigning the object to an external variable

Drawing on Canvas with Html5, shifting canvas results in significant issues

TypeAhead.js and Bloodhound displaying an uneven quantity of search outcomes

What is the best way to add a blob to the document object model (

Exploring the power of Vuejs3 with Internationalization and the Composition API

Issues with the styling of C3.js

Is it necessary for me to use a .jsx extension when saving my React component files?

Generating elevation graph from a kml file with the combination of php and javascript

Ways to dynamically combine a group of objects

Expand the video comparison slider to occupy the entire width and height

Displaying a random item from the state in React.JS

Fixed position toolbar within a container positioned beside a dynamically sized sidebar navigation

selenium.common.exceptions.WebDriverException: Message: IndexError: array index out of bounds

moment.js conversions proving ineffective

Is the server delivering an unexpected response?

What is the proper way to utilize $apply and $watch in the Angularjs 1.4.10 Directive Structure?

Simple guide to returning values from PHP using AJAX

The functionality of the Javascript window.print() method is limited to a single use