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