當對象旋轉時，Three.js不會渲染

Question

Arrggh，我真的需要一些幫助，瘋了。我有一個包含三個對象（1）立方體，（2）圓柱體和（3）導入的OBJ網格的three.js HTML5頁面。

一切工作正常，直到我嘗試旋轉網格（吉他），然後沒有呈現。在添加到場景之前，我可以旋轉和定位它，但如果我嘗試在渲染函數中旋轉它，則一切都變黑。

誰能告訴我我做錯了什麼？代碼如下所示。

感謝

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

    <script src="js/loaders/DDSLoader.js"></script> 
    <script src="js/loaders/MTLLoader.js"></script> 
    <script src="js/loaders/OBJMTLLoader.js"></script> 

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

    <script> 


     var targetRotation = 0; 
     var targetRotationOnMouseDown = 0; 

     var mouseX = 0; 
     var mouseXOnMouseDown = 0; 

     var container, stats; 

     var camera, scene, renderer; 
    var guitar,button1,cube; 

     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(45, window.innerWidth/window.innerHeight, 1, 2000); 
      camera.position.z = 640; 

      // scene 

      scene = new THREE.Scene(); 

      var ambient = new THREE.AmbientLight(0x444444); 
      scene.add(ambient); 

      var directionalLight = new THREE.DirectionalLight(0xffeedd); 
      directionalLight.position.set(0, 0, 1).normalize(); 
      scene.add(directionalLight); 

      // model 

      THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader()); 

      var loader = new THREE.OBJMTLLoader(); 
      loader.load('obj/male02/guitarOBJ.obj', 'obj/male02/male02_dds.mtl', function (guitar) { 
    guitar.rotation.x = 1.57; 
      scene.add(guitar); 

      }); 

      var geometry = new THREE.CylinderGeometry(5, 5, 50, 32); 
    var material = new THREE.MeshBasicMaterial({color: 0xffff00}); 
    button1 = new THREE.Mesh(geometry, material); 
    button1.rotation.y = 1; 
    button1.rotation.z = 0.75; 
    scene.add(button1); 

    var geometry = new THREE.BoxGeometry(100, 100, 100); 

      for (var i = 0; i < geometry.faces.length; i += 2) { 

       var hex = Math.random() * 0xffffff; 
       geometry.faces[ i ].color.setHex(hex); 
       geometry.faces[ i + 1 ].color.setHex(hex); 

      } 

      var material = new THREE.MeshBasicMaterial({ vertexColors: THREE.FaceColors, overdraw: 0.5 }); 

      cube = new THREE.Mesh(geometry, material); 
      cube.position.y = 150; 
      scene.add(cube); 


      renderer = new THREE.WebGLRenderer(); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      container.appendChild(renderer.domElement); 

      /////////document.addEventListener('mousemove', onDocumentMouseMove, false); 
      document.addEventListener('mousedown', onDocumentMouseDown, false); 
      document.addEventListener('touchstart', onDocumentTouchStart, false); 
      document.addEventListener('touchmove', onDocumentTouchMove, 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 - windowHalfX)/2; 
      ///mouseY = (event.clientY - windowHalfY)/2; 

     ///} 

    function onDocumentMouseDown(event) { 

      event.preventDefault(); 

      document.addEventListener('mousemove', onDocumentMouseMove, false); 
      document.addEventListener('mouseup', onDocumentMouseUp, false); 
      document.addEventListener('mouseout', onDocumentMouseOut, false); 

      mouseXOnMouseDown = event.clientX - windowHalfX; 
      targetRotationOnMouseDown = targetRotation; 

     } 

     function onDocumentMouseMove(event) { 

      mouseX = event.clientX - windowHalfX; 

      targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02; 

     } 

     function onDocumentMouseUp(event) { 

      document.removeEventListener('mousemove', onDocumentMouseMove, false); 
      document.removeEventListener('mouseup', onDocumentMouseUp, false); 
      document.removeEventListener('mouseout', onDocumentMouseOut, false); 

     } 

     function onDocumentMouseOut(event) { 

      document.removeEventListener('mousemove', onDocumentMouseMove, false); 
      document.removeEventListener('mouseup', onDocumentMouseUp, false); 
      document.removeEventListener('mouseout', onDocumentMouseOut, false); 

     } 

     function onDocumentTouchStart(event) { 

      if (event.touches.length === 1) { 

       event.preventDefault(); 

       mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX; 
       targetRotationOnMouseDown = targetRotation; 

      } 

     } 

     function onDocumentTouchMove(event) { 

      if (event.touches.length === 1) { 

       event.preventDefault(); 

       mouseX = event.touches[ 0 ].pageX - windowHalfX; 
       targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05; 

      } 

     } 
     // 

     function animate() { 

      requestAnimationFrame(animate); 
      render(); 

     } 

     function render() { 

     guitar.rotation.y = button1.rotation.y = cube.rotation.y += (targetRotation - cube.rotation.y) * 0.05; 

    camera.lookAt(scene.position); 

      renderer.render(scene, camera); 

     } 

    </script> 

Answer 1

Check this fiddle here。這完全是你如何做到的。

也許if語句有所作爲？也許你不應該在網格正確加載之前嘗試旋轉一些東西？

if(mesh){ 
    mesh.rotation.y += 0.02; 
} 

否則我會嘗試簡化代碼來隔離問題。可能是別的事情困擾着你。