javascript - Three.js ply colorless(全黑)-6ren

javascript - Three.js ply colorless(全黑)

转载作者：行者123 更新时间：2023-11-30 14:58:49

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

和我的代码:

<!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>