Can´t set glTF object to a different layer

Questions
,
1

Hello! 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 would be wrong?
Thanks for the attention!

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 - car -------------------------------------------------------------->

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);

};
3

Mugen87 already answered …