Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/474.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何使用three.js查看STL文件的固有颜色?_Javascript_Three.js - Fatal编程技术网

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

Javascript 如何使用three.js查看STL文件的固有颜色?,javascript,three.js,Javascript,Three.js,我有一个二进制STL彩色文件。我可以使用在线网格查看器查看颜色 我使用下面的标准方法来加载和可视化stl文件,效果很好。然而,内在的颜色并没有正确地出现,而且过于敏感,无法改变光线 Detector.addGetWebGLMessage(); scene = new THREE.Scene(); var aspect = window.innerWidth / window.innerHeight; var d = 100; camera = new THREE.OrthographicCame

我有一个二进制STL彩色文件。我可以使用在线网格查看器查看颜色

我使用下面的标准方法来加载和可视化stl文件,效果很好。然而,内在的颜色并没有正确地出现,而且过于敏感,无法改变光线

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');
问题:如何可视化STL文件中包含的颜色


谢谢

没有正确的答案。颜色取决于光线。
请参阅clear thread

要获得原始颜色且无定向照明,请移除定向灯并将环境灯调至最大亮度:

...
scene.add( camera );

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

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

如果没有达到预期效果,请在问题中添加实际和预期视觉效果的屏幕截图。

我终于成功地正确渲染了彩色对象

我使用PLYLoader而不是stloader


显然,three.js STL api无法管理颜色。

这是一个老问题,但对于任何其他遇到它的人来说,我认为使用PLYLoader而不是STLLoader的公认答案都不正确,STLLoader似乎支持二进制STL中的嵌入颜色,这在未来很好


OP问题的一个可能原因是使用THREE.VertexColors in THREE.MeshPhongMaterial{opacity:geometry.alpha,VertexColors:THREE.VertexColors}而不是中的true。

谢谢。它不起作用。我有一个全白色的雕像。嗨,我正在做一个项目,需要在浏览器上显示STL文件,但目前我不知道如何做到这一点。你能给我一些建议吗?如果你能为我提供一个工作演示,那就太好了。谢谢