在 Three.js 中将 glTF 对象设置到不同层时遇到问题

Question

我正在尝试使用 Three.js 中的图层。

我有一个包含球体、三角形和 glTF 对象（汽车）的脚本。

我启用了第二层：camera.layers.enable(1);

将球体、三角形和glTF对象设置到图层1：

car.layers.set( 1 );
sphere.layers.set( 1 );
triangle.layers.set( 1 );

但是当我将相机设置到第 1 层（camera.layers.set(1);）时，glTF 对象不显示，但其他元素显示。所以，看起来我无法将 glTF 对象设置为与默认层不同的层。

这是代码。有什么问题吗？

感谢关注！

<script>

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 0.1, 3000);
    camera.position.set( 0, 0.1, 1 );
    camera.layers.enable(1);
    camera.layers.set(1);


var renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setClearColor("#f5e5e5");
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);



// LIGHT ------------------------------------------------------------------------------>

var dLight = new THREE.DirectionalLight( 0x0000ff, 6.5 );
    dLight.position.set(1500, -700, 500);
    dLight.castShadow = true;
    dLight.layers.set(1);
    scene.add( dLight);


// Load a glTF resource -------------------------------------------------------->

var loader = new THREE.GLTFLoader();
var car;
    loader.load('car.gltf', function ( gltf ) {
    car = gltf.scene.children[0];
    car.scale.set(0.5, 0.5, 0.5);
    car.position.z = 0;
    car.position.y = -0.095;
    car.layers.set(1);

    scene.add( gltf.scene );
    render();

    });



// SPHERE --------------------------------------------------------------->

var material = new THREE.MeshLambertMaterial();
var geometry = new THREE.SphereGeometry(0.05, 20, 20);
var sphere = new THREE.Mesh(geometry, material); 
    sphere.position.x = 0.25;
    scene.add(sphere);
    sphere.layers.set( 1 );



// TRIANGLE ------------------------------------------------------------->

var geometre = new THREE.Geometry();
    geometre.vertices.push(new THREE.Vector3(-0.25, -0.1, 0));
    geometre.vertices.push(new THREE.Vector3(0, 0.30, 0));
    geometre.vertices.push(new THREE.Vector3(0.25, -0.1, 0));
    geometre.vertices.push(new THREE.Vector3(-0.25, -0.1, 0));

var triangle= new THREE.Line(geometre, new THREE.LineBasicMaterial({ color: 0x000000, linewidth: 12 }));
    triangle.layers.set( 1 );
    scene.add(triangle);



// POST-PROCESSING  ------------------------------------------------------->

var composer = new THREE.EffectComposer(renderer);

var renderPass = new THREE.RenderPass(scene, camera);
    composer.addPass(renderPass);

var pass1 = new THREE.GlitchPass(0);
    composer.addPass(pass1);



// RENDER -------------------------------------------------------------->

    requestAnimationFrame(render);

    function render(){

    sphere.rotation.y += -0.02;
    car.rotation.y += 0.01;

    composer.render();

    requestAnimationFrame(render);

    };


</script>

Answer 1

您必须像这样为整个对象层次结构递归设置图层：

gltf.scene.traverse( function( object ) {

    object.layers.set( 1 );

} );

默认情况下，图层配置不会自动应用于场景图中的后代节点。

three.js r116

在 Three.js 中将 glTF 对象设置到不同层时遇到问题

Having problems to set a glTF object to a different layer in Three.js

javascript

layer

three.js

gltf