How to get all materials from a scene in THREE.JS - three.js

I'm importing a .glb model and have in this file some materials that are not applied to any meshes.
So my question is in in THREE.JS exist something like a array of all materials that are in the scene or if I can get some how my materials when load the model with GLTFLoader.


You can traverse through the parsed glTF asset and collect all materials in a set. Something like:
const materials = new Set();
const scene = gltf.scene;
scene.traverse( function( object ) {
if ( object.material ) materials.add( object.material );
} );

Related

Three.js : Gltf object adding material to look better

I'm actually trying to add some materials to my Gltf objects in three js r113, but I don't know how to use correctly material parameters and the light as I see my object in three js viewer. This is What I get in Firefox
and this is what I'm dreaming about
.
I guess this is the value I need to apply to my code
This is how I add my gltf and how I try to add materials :
// Load a glTF resource of FENCE
gltfLoader.load( 'Fence.gltf', function ( gltf ) {
fenceModel = gltf.scene;
// fenceModel.traverse(function (child) {
// if (child.isMesh) {
// child.material = new THREE.MeshLambertMaterial({
// color: 0xc07341, //light Brown
// reflectivity: 0,
// dithering: true
// });
// }
// });
});
var ambientlight = new THREE.AmbientLight(0xffffff, 0.5 );
scene.add( ambientlight );
Actually my floor is only a gltf file with no materials.
Maybe I need to add some shadow porperties to my floor and then I could see the fence shadow ?
I need some help to understand how to do a better light effect on object.
Thank you, sorry for my english I'm using translator to help me.
Ps: My gltf object contain texture in it.

Import .gLTF animation to THREE.js

I used Blender to create a 3D object with simple animation, then I export it as .gLTF file, I tried to import to THREE.js, but I only able to import the 3D object but can't load the animation, how can I load the animation to Three.js?

The most basic code for playing an animation looks like so:
loader.load( 'models.glb', function ( gltf ) {
var model = gltf.scene;
var animations = gltf.animations;
scene.add( model );
//
mixer = new THREE.AnimationMixer( model );
var action = mixer.clipAction( animations[ 0 ] ); // access first animation clip
action.play();
} );
You then have to ensure to update the instance of AnimationMixer in your animation loop like so:
var delta = clock.getDelta(); // clock is an instance of THREE.Clock
if ( mixer ) mixer.update( delta );
Check out webgl_animation_skinning_blending to see this code in action.
three.js R109

.vertices array does not give the vertices in THREE.js

I am using OBJloader to load an .obj file in WEBGL , Three.js.
I want to access the vertices and faces of the objects but the geometry.vertices does not return the vertices positions and it gives me undefined.
Here is a piece of code:
var tool= new THREE.OBJLoader();
tool.load( '../obj/tool.obj', function ( object ) {
var material = new THREE.MeshLambertMaterial({color:0xA0A0A0});
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material = material;
console.log( "child" + child.geometry.vertices);} }
r.70
I am thankful for your helps in advance.

This answer only applies to versions of three.js prior to r.125.
If the loader you are using is returning BufferGeometry, you can convert the returned geometry to Geometry in the loader callback using a pattern like so:
var geometry = new THREE.Geometry().fromBufferGeometry( bufferGeometry );
three.js r.124

Three.js images not loading from ThreeJs Json file

I have a threejs JSON object file generated from obj and mtl file using python convertor.
I am loading this js file using following code:
loader = new THREE.JSONLoader();
loader.load('3bhk_1635_perpsective/test.js', function (geometry, materials ) {
var mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
geometry.computeFaceNormals();
scene.add(mesh);
}
);
Everything is loading except the images associated with the JSONObject. Please help me load all the images.

If loader gives you no error, try to adjust object position and camera position.
Otherwise you are adding the mesh to the scene before the model finishes loading.
Move add in the callback:
loader.onLoadComplete = function() {
scene.add(mesh);
}

Add a 3D model to a exsisting THREE.Scene()

I create a scene, add a couple of boxes and I can move the camera with the keyboard just fine.
I want to add a 3D model. In several tutorials, I saw something like:
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load( "test.js", function( geometry ) { createScene( geometry) } );
function createScene( geometry ) {
var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial({color: 0xbbbbbb}) );
mesh.scale.set(10, 10, 10);
mesh.position.y = -350;
mesh.position.x = -650;
group.add(mesh);
}
But for the other element I wrote something like:
MovingCube = new THREE.Mesh(MovingCubeGeom, new THREE.MeshFaceMaterial());
MovingCube.position.set(0, 25, 0);
scene.add(MovingCube);
How can I add a 3D model from a .js converted .obj at my scene?

The first one loads the model from and external file which contains a JSON representation of the geometry and sends it to the createScene function as an instance of the THREE.Geometry class when the external file has finished loading.
The second one the geometry is already in the variable MovingCubeGeom.
The second example is basically the same as what is in the createScene function of the first example.
You don't need to convert an obj to js, you can just use the THREE.OBJLoader class

Resources