如何使用three.js查看STL文件的固有颜色？

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

Answer 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.

Answer 2

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

Answer 3

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.

Answer 4

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 STL s 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 .