THREEJS - How to traverse all layers of model loaded with GLTFLoader?

Question

How does one traverse a mesh loaded with GLTFLoader properly to walk through all layers?

I am trying to do a simple selective bloom pass on a model by traversing the model’s all parts, setting them to the bloom layer, and then rendering the combined original + bloomed layers. However, as we can see in the images below, only the yellow outer part of the model is actually found during the traversal, does anyone know how to extract the rest of the model for layer setting?

For reproduction, the model can be downloaded from here: https://github.com/whatsmycode/Models/blob/master/PrimaryIonDrive.glb

This is the code I currently use:

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
let BLOOM_LAYER = 1;

new GLTFLoader().load( 'models/PrimaryIonDrive.glb', function ( gltf ) {
const model = gltf.scene;
model.traverse( function( child ) {
  child.layers.enable(BLOOM_LAYER);
});
scene.add( model );
});

This is the resulting image, bloom is applied to the yellow outer rings only.

This is the bloom-mask only

Answer 1

The issue was that I had not added the point- and ambient lights to both layers. The bloomed object has properties that requires light to show color for all parts except for the emitting yellow rings. To fix the problem, I simply enabled the lights for both layers before adding the lights to the scene.

const pointLight = new THREE.PointLight(0xffffff);
pointLight.layers.enable(ENTIRE_LAYER);
pointLight.layers.enable(BLOOM_LAYER);

const ambientLight = new THREE.AmbientLight(0xffffff);
ambientLight.layers.enable(ENTIRE_LAYER);
ambientLight.layers.enable(BLOOM_LAYER);
scene.add(pointLight, ambientLight);