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 0123实例化带有子级的对象，因此您需要为层次结构中的每个对象设置图层。 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