ThreeJSを使って.OBJと.MTLをロードするには？ （HTML）

Question

ThreeJSスクリプトを使用してHTMLサイトに3D地球儀をロードしようとしていますが（下にあります）、他のソースのコードと一緒にステッチされています。つまり、カメラはMouseXとMouseYにマッピングされています。私はオブジェクトをページの中央に単純な低速スピンで座らせたいが、私が試してこれを達成するたびにオブジェクトは消える。

Javascriptを：あなたはあなたのコードを少し変更する必要が

<script> 
     var container; 

     var camera, scene, renderer; 

     var mouseX = 0, mouseY = 0; 

     var windowHalfX = window.innerWidth/2; 
     var windowHalfY = window.innerHeight/2; 


     init(); 
     animate(); 


     function init() { 

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

      camera = new THREE.PerspectiveCamera(5, window.innerWidth/window.innerHeight, 1, 5000); 
      camera.position.z = 250; 

      scene = new THREE.Scene(); 

      var ambientLight = new THREE.AmbientLight(0xcccccc, 0.8); 
      scene.add(ambientLight); 

      var pointLight = new THREE.PointLight(0xFFF1CF, 0.6 , 0); 

      camera.add(pointLight); 
      scene.add(camera); 

      var manager = new THREE.LoadingManager(); 
      manager.onProgress = function (item, loaded, total) { 

       console.log(item, loaded, total); 

      }; 


      var onProgress = function (xhr) { 
       if (xhr.lengthComputable) { 
        var percentComplete = xhr.loaded/xhr.total * 100; 
        console.log(Math.round(percentComplete, 2) + '% downloaded'); 
       } 
      }; 

      var onError = function (xhr) {; 
      }; 

      var mtlLoader = new THREE.MTLLoader(); 
     mtlLoader.load('planet.mtl', function(materials) { 
     materials.preload(); 
     var objLoader = new THREE.OBJLoader(); 
     objLoader.setMaterials(materials); 
     objLoader.load('planet.obj', function(object) { 
     object.position.y = 0; 
     scene.add(object); 
     }, onProgress, onError); 
     }); 

      // 

      renderer = new THREE.WebGLRenderer({alpha: true}); 
      renderer.setClearColor(0x000000, 0); 
      renderer.setPixelRatio(window.devicePixelRatio); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      container.appendChild(renderer.domElement); 

      document.addEventListener('mousemove', onDocumentMouseMove, false); 
        document.addEventListener('mouseclick', onmousedown, false); 

      // 

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

     } 

     function onWindowResize() { 

      windowHalfX = window.innerWidth/2; 
      windowHalfY = window.innerHeight/2; 

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

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

     } 

     function onDocumentMouseMove(event) { 

      mouseX = (event.clientX); 
      mouseY = (event.clientY); 

     } 

     // 

     function animate() { 

      requestAnimationFrame(animate); 
      render(); 

     } 

     function render() { 

      camera.position.x += (mouseX - camera.position.x) * .05; 
      camera.position.y += (- mouseY - camera.position.y) * .05; 

      camera.lookAt(scene.position); 

      renderer.render(scene, camera); 

     } 
</script> 

Answer 1

、関数initので

、

var mtlLoader = new THREE.MTLLoader(); 
var objLoader = new THREE.OBJLoader(); 
mtlLoader.load('planet.mtl', function(materials) { 
    materials.preload(); 
    objLoader.setMaterials(materials); 
    objLoader.load('planet.obj', function(object){ 
     object.position.set(0, 0, 0); // set the position as (0,0,0) 
     globe = object; // globe is the object to be added to the scene 
     scene.add(globe); 
     animate(); //call the animate function only after the object is loaded 
    }, onProgress, onError); 
}); 

を次のようにオブジェクトのロードロジックを変更し、レンダリング方法を変更する

function render() { 
    globe.rotation.y += 0.01; // this will rotate the object 
    camera.lookAt(scene.position); 
    renderer.render(scene, camera); 
}