Javascript 三层无色（全黑）_Javascript_Three.js

Javascript 三层无色（全黑）

javascript three.js

Javascript 三层无色（全黑）,javascript,three.js,Javascript,Three.js,我正在尝试使用Three.js加载我的ply文件。它起作用了，但我几乎看不到任何颜色。这里和那里都有一些瞥见，但大部分是黑色的（下面的第一张图片）。该图像在MeshLab中正确打开（带有颜色）（下面的第二幅图像）。我试过vertexColors:THREE.vertexColors（如中所建议）和vertexColors:THREE.FaceColors，但似乎没有任何帮助。我是一个3.js新手，请告诉我我做错了什么我的代码是： <!doctype html> <html

我正在尝试使用Three.js加载我的ply文件。它起作用了，但我几乎看不到任何颜色。这里和那里都有一些瞥见，但大部分是黑色的（下面的第一张图片）。该图像在MeshLab中正确打开（带有颜色）（下面的第二幅图像）。我试过

vertexColors:THREE.vertexColors

（如中所建议）和

vertexColors:THREE.FaceColors

，但似乎没有任何帮助。我是一个3.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>


图标7
//将场景、摄影机和渲染器设置为全局变量。
var场景、摄影机、渲染器；
init（）；
制作动画（）；
//设置场景。
函数init（）{
//创建场景并设置场景大小。
场景=新的三个。场景（）；
变量宽度=window.innerWidth，
高度=窗内高度；
//创建渲染器并将其添加到DOM中。
renderer=new THREE.WebGLRenderer（{antialas:true}）；
设置大小（宽度、高度）；
document.body.appendChild（renderer.doElement）；
//创建一个摄影机，将其从模型中缩小一点，然后将其添加到场景中。
摄像机=新的三个透视摄像机（35，宽/高，0.1100）；
摄像机位置设置（0,0.15,3）；
摄像机。注视（新三个。矢量3（0,0,0））；
场景。添加（摄影机）；
//创建一个事件侦听器，该侦听器使用浏览器窗口调整渲染器的大小。
addEventListener（'resize'，function（））{
变量宽度=window.innerWidth，
高度=窗内高度；
设置大小（宽度、高度）；
camera.aspect=宽度/高度；
camera.updateProjectMatrix（）；
});
//设置场景的背景色。
renderer.setClearColor（0xD3，1）；
//创建灯光，设置其位置，然后将其添加到场景中。
var灯=新的三点灯（0xffffff）；
灯光位置设置（02000100）；
场景。添加（灯光）；
//加载网格并将其添加到场景中。
var loader=new THREE.PLYLoader（）；
装载机。装载（'./型号/英尺。厚度'，功能（几何）{
geometry.computeVertexNormals（）；
几何中心（）；
var material=新的三点网格标准材质（{亮度：1000，顶点颜色：三点颜色}）；
var mesh=新的三个网格（几何体、材质）；
网格位置x=0；
网格位置y=0；
网格位置z=0；
mesh.castShadow=false；
mesh.receiveShadow=false；
场景。添加（网格）；
} );
//添加轨道控件，以便我们可以用鼠标四处平移。
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
controls.userPanSpeed=0.05；
}
//渲染场景并根据需要更新渲染。
函数animate（）{
//阅读有关requestAnimationFrame的更多信息，请访问http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
请求动画帧（动画）；
//渲染场景。
渲染器。渲染（场景、摄影机）；
控件更新（）；
}

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

而不是使用

MeshStandardMaterial

使用

MeshBasicMaterial

不重复的可能重复。这个问题与纹理无关。