javascript - Three.js - 如何在指定图层上获取 THREE.ArrowHelper？

Question

我是 Three.js 的新手，正在尝试弄清楚如何将内容放在不同的层上。

我有一个 Arrowhelper，它被初始化、配置并添加到场景中，如下所示:

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

我还有一个具有字体和 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);
    } );

我的渲染函数如下所示:

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

我看到的结果只是网格，而不是箭头。我究竟做错了什么？使用 console.log 记录箭头对象，告诉我它位于第 1 层并且可见。

当我将渲染函数更改为:

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

...仅显示箭头。我使用的是 Three.js 修订版 85。

Answer 1

ArrowHelper 实例化一个带有子对象的对象，因此您需要为层次结构中的每个对象设置层。 layers 属性不是继承的。

使用这样的模式:

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 );

三.js r.85