Utilizing STLLoader.js, I am able to render components successfully, however, they all appear with one uniform color which does not resemble real-world components.
The image above showcases my implementation in Three.js using STLLoader.js (Binary STL file utilized) as it supports colors for the components.
The image below displays a component rendered in one of my windows software using a Step file. I aim to render components that closely resemble those shown in the image below to achieve a more realistic look.
Is there a method to achieve correct colored output in three.js? Despite extensive research, I have been unable to find a suitable solution. Any assistance in guiding me towards progress would be greatly appreciated.
var loader = new THREE.STLLoader();
loader.addEventListener( 'load', function ( event ) {
var material = new THREE.MeshPhongMaterial( { color: 0x75D3DC, ambient: 0x75D3DC, specular: 0x75D3DC, shininess: 200/*, vertexColors: THREE.VertexColors */} );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = x - boardMaxX + w/2 ;
mesh.position.y = - 5 ;
mesh.position.z = z - boardMaxY + h/2 ;
mesh.rotation.set( (rotation * Math.PI / 180.0), 0, 0 );
mesh.scale.set(2, 2, 2);
mesh.castShadow = true;
mesh.receiveShadow = true;
board.add(mesh);
objects.push( mesh );
i = i + 5;
componenetDraw(componentArray[i] * scaleX, -7, componentArray[i + 1] * scaleY, componentArray[i + 2], componentArray[i + 4]);
} );
loader.load( fileName );
}
The provided code is used to read STL files, but I currently lack the necessary code to read STEP files.