Develop Reference

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

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

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

Exported Blender Object Missing Face In THREE.JS

I have an .STL file which I imported into Blender. Then I exported it to .json to load into THREE.JS
Here's what the model looks like inside Blender.
And here's what the model looks like inside my web app after loading it through THREE.js.
And here's the code to load the exported .JSON.
var loader = new THREE.JSONLoader();
loader.load('model/floor.json', function(geometry, materials) {
var materialsArr = materials;
scope.mesh = new THREE.Mesh(geometry, materialsArr);
console.log(scope.mesh.material);
scope.mesh.material.color.setHex(0x8a8d8f);
scope.mesh.translation = geometry.center();
scope.mesh.castShadow = true;
scope.mesh.receiveShadow = true;
scene.add(scope.mesh);
}
You'll see that the floor is gone and in place there are lines running. I've tried triangulating the model in Blender before exporting but it didn't fix anything.
Is there some sort of setting or modifier that I didn't set?

Your normals are a mess. In Edit Mode in Blender, press Ctrl + N to recalculate your normals before exporting.

Importing a .json model from Blender into three.js breaks the model

When I import a .json model from Blender into three.js, the model does not look as it should be. It looks broken.
Here the code I used for loading my model:
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load('models/SideMattress.js', addModelToScene);
And this how I add it to the scene:
var textureLoader = new THREE.TextureLoader();
var map = textureLoader.load( "textures/SideMattress-TM.jpg");
var displacementMap = textureLoader.load("textures/SideMattress-DM.jpg");
var normalMap = textureLoader.load( "textures/SideMattress-NM.jpg" );
var material = new THREE.MeshPhongMaterial({
map: map,
normalMap: normalMap,
displacementMap: displacementMap,
});
sideMattress = new THREE.Mesh(geometry,material);
sideMattress.position.y = 1.7; //set the y position
scene.add(sideMattress);
I'm attaching the JSON file from Blender exporter as a screen shot since its very long...
JSON File from Blender Exporter
I'm not sure if the problem is with the exporter or the way I use the mesh materials, or the model itself. Here is the result I get in my browser before and after texture mapping.
The model before & after adding texture mapping inside Three.js and how it should look like
Note that when I also add the displacement map, it has no effect which is not how it is supposed to.
Thank you guys in advance

UV texture's color is set to all model in collada loader of three js

first of all sorry for my bad english.
I have a problem with collada loader of three js, i have a cylinder in blender with a UV texture on it and i render it there everything is perfect but when i export it and load it in three js collada loader the color associated with image is applied to whole model like this.
The model in my browser
The original color of the model is red.
I am loading my model like this:
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load( 'untitled.dae', function ( collada ) {
var dae = collada.scene;
var skin = collada.skins[ 0 ];
dae.position.set(0,0,0);
dae.scale.set(25,25,25);
My collada file if u want to see it.
What i am doing wrong here? is there a problem the way i am exporting missing some attribute while exporting? i am new to web 3D programming.

what i did was i was not creating 2 different materials 1 for color and other for the texture and i shifted to obj/mtl from collada importer and it solved my problem also remember to clip the image texture in blender texture settings under image sampling.

Collada model faces not displaying correctly in three.js

After importing a collada model into three.js, some of the model's faces are only visible from the inside of the model and not from the outside.
How can I fix the problem with the faces in question?
Is it possible to have the model's faces visible from both sides?

The reason it doesn't work properly is because your file has this double_sided flag set:
<effect id="material_3_4_0-effect" name="material_3_4_0-effect">
<profile_COMMON>
...
<extra>
<technique profile="GOOGLEEARTH">
<double_sided>1</double_sided>
</technique>
</extra>
</profile_COMMON>
</effect>
The three.js ColladaLoader doesn't look for this flag and set doubleSided on the material like it should. I've filed a bug for the issue.

To fix the faces being oriented incorrectly, load the model into a 3D modeling program like Blender and flip the normals of the faces that aren't displaying correctly.
Three.js meshes have a doublesided property you can set which will usually allow you to display the model with the faces visible from both sides.
Here's a short example of how to load a collada mesh and enable double-sided rendering.
var loader = new THREE.ColladaLoader();
loader.load('path/to/mesh.dae', loadModel);
function loadModel(geom) {
var mesh = new THREE.Mesh(geom, new THREE.MeshBasicMaterial());
mesh.doublesided = true;
scene.add(mesh);
}
And a live example: http://jsfiddle.net/r7Yq2/