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

Question

I´m trying to make use of layers in Three.js.

I have this script with a sphere, a triangle and a glTF object (car).

I made a second layer enable: camera.layers.enable(1);

Set the sphere, the triangle and the glTF object to the layer 1:

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

But when i set the camera to the layer 1 ( camera.layers.set(1); ), the glTF object does not display, but other elements do. So, it seens like i can´t set the glTF object to a different layer then default layer.

Here is the code. What could be wrong?

Thanks for the attention!

<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

You have to set layers recursively for the entire hierarchy of objects like so:

gltf.scene.traverse( function( object ) {

    object.layers.set( 1 );

} );

By default, a layer configuration does not automatically apply to its descendant nodes in the scene graph.

three.js r116