Three.js层无色（全黑色）

Question

我正在尝试使用Three.js加载我的层文件。 它奏效了，但我几乎看不到任何颜色。 到处都有一些瞥见，但大部分都是黑色的（下面的第一张图片）。 图像在MeshLab中正确打开（带有颜色）（下面的第二个图像）。 我尝试了vertexColors: THREE.VertexColors （如vertexColors: THREE.VertexColors所建议-层文件-为什么无色？）和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>

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

Answer 1

代替使用MeshStandardMaterial使用MeshBasicMaterial

Three.js层无色（全黑色）

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-10-20 19:14:11

Three.js层无色（全黑色）

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-10-20 19:14:11

解决方案1
2 已采纳 2017-10-20 19:14:11