Javascript 在Three.js中将glTF对象设置到其他层时遇到问题

我试图利用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>

var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（50，window.innerWidth/window.innerHeight，0.1300）；
摄像机位置设置（0,0.1,1）；
相机。图层。启用（1）；
相机。图层。设置（1）；
var renderer=new THREE.WebGLRenderer（{antialas:true}）；
渲染器.setClearColor（“#f5e5”）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
//灯光------------------------------------------------------------------>
var dLight=新的三方向灯（0x0000ff，6.5）；
光位置设置（1500，-700，500）；
dLight.castShadow=true；
光层集（1）；
场景。添加（dLight）；
//加载glTF资源----------------------------------------->
var loader=new THREE.GLTFLoader（）；
var汽车；
loader.load（'car.gltf'，函数（gltf）{
car=gltf.scene.children[0]；
汽车秤组（0.5,0.5,0.5）；
轿厢位置z=0；
car.position.y=-0.095；
车.层.套（1）；
scene.add（gltf.scene）；
render（）；
});
//球体--------------------------------------------------------->
var material=新的三个.MeshLambertMaterial（）；
var几何=新的三种。球墨法（0.05,20,20）；
var sphere=新的三个网格（几何体、材质）；
球体位置x=0.25；
场景。添加（球体）；
球体层集（1）；
//三角形------------------------------------------>
var geometre=new THREE.Geometry（）；
geometre.Vertexs.push（新的三点矢量3（-0.25，-0.1,0））；
geometre.Vertexs.push（新的3.Vector3（0,0.30,0））；
geometre.Vertexs.push（新的3.Vector3（0.25，-0.1,0））；
geometre.Vertexs.push（新的三点矢量3（-0.25，-0.1,0））；
var triangle=new THREE.Line（geometre，new THREE.LineBasicMaterial（{color:0x000000，linewidth:12}））；
三角形。层。集（1）；
场景。添加（三角形）；
//后处理----------------------------------------->
var composer=new THREE.EffectComposer（渲染器）；
var renderPass=new THREE.renderPass（场景、摄影机）；
作曲家：addPass（renderPass）；
var pass1=新的三个GlitchPass（0）；
作曲家：addPass（pass1）；
//渲染-------------------------------------------------------->
请求动画帧（渲染）；
函数render（）{
球体旋转y+=-0.02；
汽车旋转y+=0.01；
composer.render（）；
请求动画帧（渲染）；
};

您必须为整个对象层次结构递归设置层，如下所示：

gltf.scene.transverse（函数（对象）{
object.layers.set（1）；
} );

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

---

three.js r116

您必须为整个对象层次结构递归设置层，如下所示：

gltf.scene.transverse（函数（对象）{
object.layers.set（1）；
} );

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

three.js r116