Three.js層沒有顯示

我想顯示我的層修改three.js webgl_loader_ply示例，但它沒有顯示任何東西。當我用MeshLab打開層時，我可以看到對象。我試圖縮小，改變相機角度，禁用shadowedlight無濟於事。還有什麼提示？Three.js層沒有顯示

下面是編輯webgl_loader_ply.html

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>three.js webgl - PLY</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 
     <style> 
      body { 
       font-family: Monospace; 
       background-color: #000000; 
       margin: 0px; 
       overflow: hidden; 
      } 

      #info { 
       color: #fff; 
       position: absolute; 
       top: 10px; 
       width: 100%; 
       text-align: center; 
       z-index: 100; 
       display:block; 

      } 

      a { color: skyblue } 
      .button { background:#999; color:#eee; padding:0.2em 0.5em; cursor:pointer } 
      .highlight { background:orange; color:#fff; } 

      span { 
       display: inline-block; 
       width: 60px; 
       float: left; 
       text-align: center; 
      } 

     </style> 
    </head> 
    <body> 
     <div id="info"> 
      <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - 
      PLY loader test by <a href="https://github.com/menway">Wei Meng</a>. Image from <a href="http://people.sc.fsu.edu/~jburkardt/data/ply/ply.html">John Burkardt</a> 
     </div> 

     <script src="../build/three.js"></script> 

     <script src="js/loaders/PLYLoader.js"></script> 

     <script src="js/Detector.js"></script> 
     <script src="js/libs/stats.min.js"></script> 

     <script> 

      if (! Detector.webgl) Detector.addGetWebGLMessage(); 

      var container, stats; 

      var camera, cameraTarget, scene, renderer; 

      init(); 
      animate(); 

      function init() { 

       container = document.createElement('div'); 
       document.body.appendChild(container); 

       camera = new THREE.PerspectiveCamera(35, window.innerWidth/window.innerHeight, 1, 15); 
       camera.position.set(3, 0.15, 3 ); 

       cameraTarget = new THREE.Vector3(0, -0.1, 0); 

       scene = new THREE.Scene(); 
       scene.background = new THREE.Color(0x72645b); 
       scene.fog = new THREE.Fog(0x72645b, 2, 15); 


       // Ground 

       var plane = new THREE.Mesh(
        new THREE.PlaneBufferGeometry(40, 40), 
        new THREE.MeshPhongMaterial({ color: 0x999999, specular: 0x101010 }) 
       ); 
       plane.rotation.x = -Math.PI/2; 
       plane.position.y = -0.5; 
       scene.add(plane); 

       plane.receiveShadow = true; 


       // PLY file 

       var loader = new THREE.PLYLoader(); 
       loader.load('./models/ply/binary/foot.ply', function (geometry) { 

        geometry.computeVertexNormals(); 

        var material = new THREE.MeshStandardMaterial({ color: 0x0055ff, flatShading: true }); 
        var mesh = new THREE.Mesh(geometry, material); 

        mesh.position.y = - 0.2; 
        mesh.position.z = 0.3; 
        mesh.rotation.x = - Math.PI/2; 
        mesh.scale.multiplyScalar(0.001); 

        mesh.castShadow = true; 
        mesh.receiveShadow = true; 

        scene.add(mesh); 

       }); 


       // Lights 

       scene.add(new THREE.HemisphereLight(0x443333, 0x111122)); 

       addShadowedLight(1, 1, 1, 0xffffff, 1.35); 
       addShadowedLight(0.5, 1, -1, 0xffaa00, 1); 

       // renderer 

       renderer = new THREE.WebGLRenderer({ antialias: true }); 
       renderer.setPixelRatio(window.devicePixelRatio); 
       renderer.setSize(window.innerWidth, window.innerHeight); 

       renderer.gammaInput = true; 
       renderer.gammaOutput = true; 

       renderer.shadowMap.enabled = true; 
       renderer.shadowMap.renderReverseSided = false; 

       container.appendChild(renderer.domElement); 

       // stats 

       stats = new Stats(); 
       container.appendChild(stats.dom); 

       // resize 

       window.addEventListener('resize', onWindowResize, false); 

      } 

      function addShadowedLight(x, y, z, color, intensity) { 

       var directionalLight = new THREE.DirectionalLight(color, intensity); 
       directionalLight.position.set(x, y, z); 
       scene.add(directionalLight); 

       directionalLight.castShadow = true; 

       var d = 1; 
       directionalLight.shadow.camera.left = -d; 
       directionalLight.shadow.camera.right = d; 
       directionalLight.shadow.camera.top = d; 
       directionalLight.shadow.camera.bottom = -d; 

       directionalLight.shadow.camera.near = 1; 
       directionalLight.shadow.camera.far = 4; 

       directionalLight.shadow.mapSize.width = 1024; 
       directionalLight.shadow.mapSize.height = 1024; 

       directionalLight.shadow.bias = -0.005; 

      } 

      function onWindowResize() { 

       camera.aspect = window.innerWidth/window.innerHeight; 
       camera.updateProjectionMatrix(); 

       renderer.setSize(window.innerWidth, window.innerHeight); 

      } 

      function animate() { 

       requestAnimationFrame(animate); 
       render(); 
       stats.update(); 

      } 

      function render() { 

       var timer = Date.now() * 0.0005; 

       camera.position.x = Math.sin(timer) * 2.5; 
       camera.position.z = Math.cos(timer) * 2.5; 

       camera.lookAt(cameraTarget); 

       renderer.render(scene, camera); 

      } 

     </script> 
    </body> 
</html>

來源

2017-10-17 Shifty Scales

你會看到它，如果你行註釋掉

mesh.rotation.x = - Math.PI/2; 
mesh.scale.multiplyScalar(0.001);

來源

2017-10-17 17:35:45 gaitat

就是這樣，謝謝。 –

Three.js層沒有顯示

回答

相關問題