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

Question

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

Hi, i am working on a project which need to display STL files on browser, but currently i have no idea of how to do this. could you please give me some suggestion? if you could provide me a working demo, it will be great. thanks — Ace.Yin, Jun 13 '17 at 11:45

score 1 · Answer 1 · edited May 23 '17 at 10:30

1

There is no right answer. The color will depend on the light. See the clear thread Realistic lighting (sunlight) with Three.js?

edited May 23 '17 at 10:30

Community

1
1

answered Mar 21 '17 at 12:45

alvaro562003

678
1
6
27

score 1 · Accepted Answer · answered Mar 27 '17 at 10:10

1

I finally succeed to render correctly the colored object.

I use PLYLoader instead of STLLoader.

Apparently, three.js STL api do not manage the color.

answered Mar 27 '17 at 10:10

alvaro562003

678
1
6
27

score 1 · Answer 3 · answered Jan 24 '21 at 23:26

This is an old question, but for anyone else who comes across it, I don't think the accepted answer about using the PLYLoader instead of the STLLloader is correct, the STLLoader appears to support embedded color in binary STLs just fine in the example.

One possible cause of the OP's issue using THREE.VertexColors in THREE.MeshPhongMaterial({ opacity: geometry.alpha, vertexColors: THREE.VertexColors }) instead of true as in the docs/example.

score 0 · Answer 4 · answered Mar 21 '17 at 14:18

0

To get the original colors and no directional lighting, remove the directional light and crank the ambient light up to full brightness:

...
scene.add( camera );

var light = new THREE.AmbientLight( 0xFFFFFF ); // Full-bright white light
scene.add( light );

var loader = new THREE.STLLoader();
...

If that doesn't give you the desired result, please add screenshots of the actual and desired visual look to your question.

answered Mar 21 '17 at 14:18

Paul-Jan

16,746
1
63
95

Thank you. It does not work. I have a full white statue. – alvaro562003 Mar 24 '17 at 19:37

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

4 Answers4