Exploring the world of Three.js, I'm striving to understand how to organize elements onto separate layers.
One of the challenges I'm facing involves an ArrowHelper that I've set up and added to the scene in the following manner:
var arrowLeft = new THREE.ArrowHelper(direction, center, length, 0x884400);
arrowLeft.layers.set(1);
scene.add(arrowLeft);
Additionally, I have a Mesh that is assigned 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);
} );
Reviewing my render function reveals the following structure:
function render()
{
camera.layers.set(1);
renderer.render(scene, camera);
controls.update();
}
Despite setting the layers correctly, only the mesh is visible in the output, not the arrow. Upon inspecting the arrow object with console.log, it confirms that it is on layer 1 and visible.
Altering the render function to:
function render()
{
camera.layers.set(0);
renderer.render(scene, camera);
controls.update();
}
... results in only the arrow being displayed. This discrepancy is confusing as I'm using three.js revision 85.