CODEWITHSUNDEEP
javascriptthree.js
stoex
stoex

Reputation: 113

Threejs: Why does adding a Axes Helper change the Ids of the Elements?

i have the following problem. When i add a Axes Helper to the scene the Ids of all elements are incremented by one. The problem about this is that I want to select the elements by their Ids. So after adding the Helper I can't select the right elements.

If i put the new THREE.AxesHelper() outside of this function the problem doesn't exist. So why is it a problem to put the Axis Helper inside the init-function?

init() {

// ---------------------- General settings ----------------------
scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera( 60, window.innerWidth/window.innerHeight, 0.1, 1000 );     
camera.position.x = 8.3;
camera.position.y = 11.7;
camera.position.z = -8;
camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );

const ambiLight = new THREE.AmbientLight( 0xFFFFFF, 0.5 );
scene.add(ambiLight);

const spotLight = new THREE.SpotLight( 0xFFFFFF, 0.6 );
spotLight.position.set( 13.6, 20.1, -13.9 );
spotLight.castShadow = true;
scene.add( spotLight );

// ---------------------- Load Object ----------------------
const gltfLoader = new THREE.GLTFLoader();
gltfLoader.load( "model/M-62300-00-811-0_002.glb", function( gltf ) {

    model = gltf.scene;
    model.rotateX( -Math.PI/2 );
    scene.add( model );
    console.log( model );

    model.getObjectById( 120 ).visible = false;     // initial foundation
    model.getObjectById( 120 ).children[0].material.color.set( "#959595" );
    model.getObjectById( 121 ).visible = false;     // initial person

});

// ---------------------- Renderer settings ----------------------
const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
document.body.appendChild( renderer.domElement );

renderer.setClearColor( 0xffffff, 0 );

// ---------------------- Orbit Controls settings ----------------------
const controls = new THREE.OrbitControls( camera, renderer.domElement );

// ---------------------- Axes helper ----------------------
const axesHelper = new THREE.AxesHelper( 3 );
axesHelper.position.y = 2;
scene.add( axesHelper );

// ---------------------- Call functions ----------------------

createPanel();
update( renderer, scene, camera, controls );
}

Upvotes: 1

Views: 459

Answers (1)

Berthur
Berthur

Reputation: 4495

Object3D sets its IDs incrementally from 0 up, in order of creation. So if you create more objects before, the IDs that you previously checked will have shifted.

If you create your axis helper inside your init() function, their object(s) are created before your GLTF has loaded. This is because the GLTFLoader is asynchronous so the later code continues to execute and only when your GLTF loading has finished, the code inside the callback will run. By that time, your axis helper has already been created and your IDs will have shifted.

If you just want this to change, you could simply create your axis helper inside the callback, after you create your GLTF model. Like this:

const gltfLoader = new THREE.GLTFLoader();
gltfLoader.load( "model/M-62300-00-811-0_002.glb", function( gltf ) {

    model = gltf.scene;
    model.rotateX( -Math.PI/2 );
    scene.add( model );
    console.log( model );

    model.getObjectById( 120 ).visible = false;     // initial foundation
    model.getObjectById( 120 ).children[0].material.color.set( "#959595" );
    model.getObjectById( 121 ).visible = false;     // initial person

    const axesHelper = new THREE.AxesHelper( 3 );
    axesHelper.position.y = 2;
    scene.add( axesHelper );

});

However, IDs should not be expected to remain constant like this, as in the future you might be adding more objects and cause the same problem again. Instead, if you know what children you want to access, you can get them by model.children, recursively if needed, or traverse() or depending on how you will identify your picked children. See the Object3D documentation for more information.

Upvotes: 1

Related Questions