CODEWITHSUNDEEP
javascriptthree.jslayer
Verun
Verun

Reputation: 15

Three.js - How to get a THREE.ArrowHelper on a specified layer?

I'm new to Three.js and trying to figure out how to put things on different layers.

I have an Arrowhelper, which is initialized, configured and added to the scene like this:

    var arrowLeft = new THREE.ArrowHelper(direction, center, length, 0x884400);
    arrowLeft.layers.set(1);
    scene.add(arrowLeft);

I also have a Mesh which gets a font and a THREE.MeshPhongMaterial:

    var loader = new THREE.FontLoader();
    loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {

        var textGeo = new THREE.TextGeometry( "My Text", {
            font: font,
            size: 1 * globalScale,
            height: 0.01,
            curveSegments: 12
        });

        var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000 } );
        var mesh = new THREE.Mesh( textGeo, textMaterial );

        mesh.layers.set(1);
        mesh.position.set( 2, 0, zPos);

        scene.add(mesh);
    } );

My render function looks like this:

    function render() 
    {
        camera.layers.set(1);
        renderer.render(scene, camera);
        controls.update();
    }

What I see as a result is only the mesh but not the arrow. What am I doing wrong? Logging the arrow object with console.log, tells me it is on layer 1 and visible.

When I change the render function to: 

    function render() 
    {
        camera.layers.set(0);
        renderer.render(scene, camera);
        controls.update();
    }

... only the arrow is shown. I'm using three.js revision 85.

Upvotes: 0

Views: 829

Answers (1)

WestLangley
WestLangley

Reputation: 104843

ArrowHelper instantiates an object with children, so you need to set the layers for each object in the hierarchy. The layers property is not inherited.

Use a pattern like this one:

light.layers.set( 0 ); // don't forget to set the light layers
light.layers.enable( 1 );

mesh.layers.set( 1 );

arrowHelper.traverse( function( node ) { node.layers.set( 1 ); } );

camera.layers.set( 1 );

three.js r.85

Upvotes: 1

Related Questions