Three.js

Question

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

我有一个 Arrowhelper，它是这样初始化、配置并添加到场景中的：

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

我还有一个 Mesh，它有一个字体和一个 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 );

three.js r.85

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

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

javascript

layer