Three.js ply ne montre pas

J'essaye d'afficher mon ply modifiant l'exemple de webgl_loader_ply de three.js, mais il ne montre rien. Je peux voir l'objet quand j'ouvre le pli avec MeshLab. J'ai essayé de faire un zoom arrière, changer l'angle de la caméra, désactiver la lumière ombragée en vain. D'autres conseils?Three.js ply ne montre pas

est inférieure à la webgl_loader_ply.html modifié

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

Source

2017-10-17 Shifty Scales

Vous le verrez si vous commentez les lignes

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

Source

2017-10-17 17:35:45 gaitat

qui était, merci. –

Three.js ply ne montre pas

Répondre

Questions connexes