我是 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。
最佳答案
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
关于javascript - Three.js - 如何在指定图层上获取 THREE.ArrowHelper?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44279604/