CODEWITHSUNDEEP
javascripthtmlthree.js
CodeDezk
CodeDezk

Reputation: 1260

ThreeJS GLTFLoader material array

I am trying to load a model using GLTFLoader and apply different color for each face of the object(cube) using material array. But it doesn't work. 

            var materials = [ new THREE.MeshPhongMaterial( {color: 0x552811,specular: 0x222222,shininess: 25}),
                              new THREE.MeshPhongMaterial( {color: 0x552811,specular: 0x222222,shininess: 25})];

            loader = new GLTFLoader();
            loader.load( "./Model/cube.glb", function ( gltf ) {
                 var geometry = gltf.scene.children[ 2 ].geometry;
                 mesh = new THREE.Mesh( geometry, materials );
                 scene.add( mesh );
            } );

If I change the material array to single material object it works, like

     mesh = new THREE.Mesh( geometry, materials[0] );

I thought the problem is with giving array to mesh material, but if create the mesh manually and give the array as material, then it also works.

var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
var mesh = new THREE.Mesh( geometry,materials);
scene.add(mesh);

The problem is only when the mesh is loaded using GLTFLoader and and try to apply material array. Same is happening with OBJLoader also. What could be the problem.

Upvotes: 0

Views: 944

Answers (1)

Mugen87
Mugen87

Reputation: 31086

When using BoxBufferGeometry, the resulting geometry automatically has groups data defined, which are a precondition for using multiple materials. I highly assume that the geometry resulting from loading cube.glb does not have any groups and thus applying multiple materials is not possible.

three.js R108

Upvotes: 2

Related Questions