Wie Intrinsic Farbe einer STL-Datei mit Three.js anzeigen?

Question

Ich habe eine binäre STL-Datei. Ich kann die Farbe mit dem Online-Mesh-Viewer http://www.viewstl.com/ sehen.

Ich benutze die unten Standard-Ansatz zum Laden und Visualisieren der STL-Datei, und es funktioniert gut. Die intrisic Farben erscheinen jedoch nicht korrekt und sind zu empfindlich gegenüber Lichtveränderungen.

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'); 

Frage: Wie die Farbe in der STL-Datei eingeschlossen visualisieren?

Dank

Answer 1

Endlich gelingt es mir, das farbige Objekt korrekt zu rendern.

Ich verwende PLYLoader anstelle von STLLoader.

Anscheinend verwalten three.js STL api nicht die Farbe.

Answer 2

Es gibt keine richtige Antwort. Die Farbe hängt vom Licht ab. Siehe roter Faden Realistic lighting (sunlight) with Three.js?

Answer 3

Um die ursprünglichen Farben und keine Richtungs Beleuchtung zu erhalten, das gerichtete Licht entfernen und kurbelt das Umgebungslicht bis zur vollen Helligkeit:

... 
scene.add(camera); 

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

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

Wenn das nicht gibt Ihnen die gewünschten Ergebnis, fügen Sie bitte Screenshots des tatsächlichen und gewünschten visuellen Aussehens zu Ihrer Frage hinzu.