How to view Intrinsic color of an STL file using three.js?

I have a binary STL colored file. I can see the color using the online mesh viewer http://www.viewstl.com/.

I am using the below standard approach to load and visualize the stl file, and it works well. However, the intrisic colors do not appear correctly and are too sensivite to light changes.

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 to visualize the color enclosed in the STL file ?

Thanks

18 thoughts on “How to view Intrinsic color of an STL file using three.js?”

Leave a Comment