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無色（全黑）

回答

相關問題