当对象旋转时，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; 
} 

否则我会尝试简化代码来隔离问题。可能是别的事情困扰着你。