Currently, I am facing an issue while loading a cube object exported from Blender using GLTFLoader. My attempt to apply color on each face of the cube using the addGroup method is not yielding the expected results.
The image below showcases the output that I am currently getting:
https://i.sstatic.net/ondVk.png
You can download the model from the following link: https://github.com/SourceCodeZone/3D/blob/master/Cube/test.glb
I found guidance in the answer provided here about BufferGeometry and rendering groups of faces. Below is the code snippet that I have been working with:
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 occurred---' +error);
}
);