I have a binary STL file that is colored. I can easily view the colors using an online mesh viewer, which you can find at .
Despite successfully loading and visualizing the STL file using my standard approach below, the intrinsic colors do not display correctly and seem to be very sensitive to changes in lighting.
Detector.addGetWebGLMessage();
scene = new THREE.Scene();
var aspect = window.innerWidth / window.innerHeight;
var d = 100;
camera = new THREE.OrthographicCamera( - d * aspect, d, d * aspect,- d, 1, 1000 );
camera.position.set( 0, 0, 200 );
camera.lookAt( scene.position );
scene.add( camera );
var light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );
var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.x = 0;
directionalLight.position.y = 0;
directionalLight.position.z = 1;
directionalLight.position.normalize();
scene.add( directionalLight );
var loader = new THREE.STLLoader();
var material = new THREE.MeshPhongMaterial( { color: 0xAAAAAA, specular: 0x111111, shininess: 0 } );
// Colored binary STL
var stlfile = "myBinarySTLColoredFile.stl"
loader.load( stlfile, function ( geometry ) {
var meshMaterial = material;
if (geometry.hasColors) {
meshMaterial = new THREE.MeshPhongMaterial({ opacity: geometry.alpha, vertexColors: THREE.VertexColors });
}
mesh = new THREE.Mesh( geometry, meshMaterial );
scene.add(
mesh.position.set(-100, -100, 0);
});
renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true } );
renderer.setSize(....);
var container = document.getElementById('`enter code here`flex2');
Question: How can I properly visualize the colors embedded within the STL file?
Thank you!