CODEWITHSUNDEEP
javascriptthree.js
CodeDezk
CodeDezk

Reputation: 1260

ThreeJs different material to each face of cube

I loading a cube object exported from Blender using GLTFLoader, and trying to apply color on each face of the cube using addGroup method, but the result is not as expected.

I am getting the result as following image below.

enter image description here

The model can be download from the link https://github.com/SourceCodeZone/3D/blob/master/Cube/test.glb

I am referring the answer here BufferGeometry: how to render groups of faces Below is the code. 

            var cube;
            var loader = new THREE.GLTFLoader();
            loader.load(
                './Model/GLTF/test.glb',
                function ( gltf ) {
                    gltf.scene.traverse( function ( node ) {
                              if(node.isMesh){
                        if(node.name==="Cube")
                             cube = node;
                                                   }

                     });
                    scene.add(cube);

                    var materials = [
                        new THREE.MeshBasicMaterial( { color: 0xff0000 } ),
                        new THREE.MeshBasicMaterial( { color: 0x00ff00 } ),
                        new THREE.MeshBasicMaterial( { color: 0x0000ff } ),
                    ];  
                    var geometry = cube.geometry;
                    geometry.clearGroups();
                    geometry.addGroup( 0, 4, 0 ); // first 4 vertices use material 0
                    geometry.addGroup( 4, 4, 1 ); // next 4 vertices use material 1
                    geometry.addGroup( 8, Infinity, 2 ); // remaining vertices use material 2
                    cube.material = materials;



                },
                function ( xhr ) {
                    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
                },

                function ( error ) {
                    console.log( 'An error happened---' +error);
                }
            );

Upvotes: 2

Views: 712

Answers (1)

Mugen87
Mugen87

Reputation: 31086

I'm afraid BufferGeometry.groups work a bit different. First, your box geometry has 24 vertices and 36 indices. A single triangle is defined by three indices. That means you have 12 triangles in total (which is correct since a cube has six sides and a single side is defined by two triangles).

Groups data refer to vertices in case of a non-index geometry and to indices in case of a indexed geometry. E.g. if you want to apply three materials to your cube (one material for two sides), the code would look like so:

var geometry = object.geometry;
geometry.clearGroups();
geometry.addGroup( 0, 12, 0 );
geometry.addGroup( 12, 24, 1 ); 
geometry.addGroup( 24, 36, 2 );
object.material = materials;

Live demo: https://glitch.com/~buffergeometry-groups

three.js R108

Upvotes: 2

Related Questions