Three.js ply nicht angezeigt

Ich versuche, meine Schicht zu zeigen, die three.js webgl_loader_ply Beispiel ändert, aber es zeigt nichts. Ich kann das Objekt sehen, wenn ich die Lage mit MeshLab öffne. Ich habe versucht, herauszuzoomen, den Kamerawinkel zu ändern, das Schattenlicht ohne Erfolg zu deaktivieren. Noch mehr Tipps?Three.js ply nicht angezeigt

Im Folgenden wird die bearbeitete 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>

Quelle

2017-10-17 Shifty Scales

Sie werden es sehen, wenn Sie die Zeilen auf Kommentar

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

Quelle

2017-10-17 17:35:45 gaitat

, es sei dank. –

Three.js ply nicht angezeigt

Antwort

Verwandte Themen