Three.js ply无色（全黑）

我试图使用Three.js加载我的ply文件。它已经工作，但我几乎没有看到任何颜色。这里和那里有一些瞥见，但它大多是黑色的（下面的第一张图片）。图像可以在MeshLab中正确打开（使用颜色）（下面的第二张图像）。我试过vertexColors: THREE.VertexColors（如Three.js - ply files - why colorless?中建议）和vertexColors: THREE.FaceColors，但似乎没有任何帮助。我是一个three.js新手，所以请告诉我我做错了什么。Three.js ply无色（全黑）

和我的代码：

<!doctype html> 
<html lang="en"> 
<head> 
    <title>Icon 7</title> 
    <meta charset="utf-8"> 
</head> 
<body style="margin: 0;"> 

    <script src="js/three.min.js"></script> 
    <script src="js/PLYLoader.js"></script> 
    <script src="js/OrbitControls.js"></script> 

    <script> 

    // Set up the scene, camera, and renderer as global variables. 
    var scene, camera, renderer; 

    init(); 
    animate(); 

    // Sets up the scene. 
    function init() { 

     // Create the scene and set the scene size. 
     scene = new THREE.Scene(); 
     var WIDTH = window.innerWidth, 
      HEIGHT = window.innerHeight; 

     // Create a renderer and add it to the DOM. 
     renderer = new THREE.WebGLRenderer({antialias:true}); 
     renderer.setSize(WIDTH, HEIGHT); 
     document.body.appendChild(renderer.domElement); 

     // Create a camera, zoom it out from the model a bit, and add it to the scene. 
     camera = new THREE.PerspectiveCamera(35, WIDTH/HEIGHT, 0.1, 100); 
     camera.position.set(0,0.15,3); 
    camera.lookAt(new THREE.Vector3(0,0,0)); 
     scene.add(camera); 

     // Create an event listener that resizes the renderer with the browser window. 
     window.addEventListener('resize', function() { 
     var WIDTH = window.innerWidth, 
      HEIGHT = window.innerHeight; 
     renderer.setSize(WIDTH, HEIGHT); 
     camera.aspect = WIDTH/HEIGHT; 
     camera.updateProjectionMatrix(); 
     }); 

     // Set the background color of the scene. 
     renderer.setClearColor(0xd3d3d3, 1); 

     // Create a light, set its position, and add it to the scene. 
     var light = new THREE.PointLight(0xffffff); 
     light.position.set(0,200,100); 
     scene.add(light); 

     // Load in the mesh and add it to the scene. 
    var loader = new THREE.PLYLoader(); 
    loader.load('./models/foot.ply', function (geometry) { 
      geometry.computeVertexNormals(); 
      geometry.center(); 
      var material = new THREE.MeshStandardMaterial   ({ shininess: 1000,vertexColors: THREE.FaceColors }); 
      var mesh = new THREE.Mesh(geometry, material   ); 
      mesh.position.x = 0; 
      mesh.position.y = 0; 
      mesh.position.z = 0; 
      mesh.castShadow = false; 
      mesh.receiveShadow = false; 
      scene.add(mesh); 
    }); 

     // Add OrbitControls so that we can pan around with the mouse. 
     controls = new THREE.OrbitControls(camera, renderer.domElement); 
    controls.userPanSpeed = 0.05; 

    } 


    // Renders the scene and updates the render as needed. 
    function animate() { 

     // Read more about requestAnimationFrame at http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/ 
     requestAnimationFrame(animate); 

     // Render the scene. 
     renderer.render(scene, camera); 
     controls.update(); 

    } 

    </script> 

</body> 
</html>

编辑：因为我没有单独的纹理，这不是一个重复的问题。

来源

2017-10-20 Shifty Scales

[使用纹理与three.js所和PLY文件（可能的重复https://stackoverflow.com/questions/16109774/using-textures-with-three-js-和-ply-file） – rafaelcastrocouto

不是重复的。这个问题与纹理无关。 – gaitat

而不是使用MeshStandardMaterial使用MeshBasicMaterial

来源

2017-10-20 19:14:11 gaitat

这就是解决方案，非常感谢！ –

Three.js ply无色（全黑）

回答

相关问题