Three.js OBJloader with OrbitControls

我需要做非常簡單的3D模型查看器旋轉等。我有簡單的代碼，一切工作正常，但是當我用OrbitControls添加這兩行然後只有空白頁：Three.js OBJloader with OrbitControls

controls = new THREE.OrbitControls(camera); 
controls.addEventListener('change', render);

整個代碼：

<body> 
    <script src="js/OrbitControls.js"></script> 
    <script src="js/three.min.js"></script> 
    <script src="js/OBJLoader.js"></script> 
    <div id="ahoj" style="width:1000px; height:700px"> 
    </div> 
    <script> 

     var container; 
     var camera, controls, scene, renderer; 
     var mouseX = 0, mouseY = 0; 
     var windowHalfX = 1000/2; 
     var windowHalfY = 700/2; 
     init(); 
     animate(); 
     function init() { 
      container = document.getElementById('ahoj'); 
      document.body.appendChild(container); 
      camera = new THREE.PerspectiveCamera(75, 1000/700, 1, 2000); 
      camera.position.z = 200; 
      // scene 
      scene = new THREE.Scene(); 
      var ambient = new THREE.AmbientLight(0x000); 
      scene.add(ambient); 
      var directionalLight = new THREE.DirectionalLight(0xffeedd); 
      directionalLight.position.set(0, 0, 1); 
      scene.add(directionalLight); 
      // texture 
      var manager = new THREE.LoadingManager(); 
      manager.onProgress = function (item, loaded, total) { 
       console.log(item, loaded, total); 
      }; 
      var texture = new THREE.Texture(); 
      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 loader = new THREE.ImageLoader(manager); 
      loader.load('textures/mapa1.png', function (image) { 
       texture.image = image; 
       texture.needsUpdate = true; 
      }); 
      // model 
      var loader = new THREE.OBJLoader(manager); 
      loader.load('obj/Immortal.obj', function (object) { 
       object.traverse(function (child) { 
        if (child instanceof THREE.Mesh) { 
         //child.material.map = texture; 
        } 
       }); 
       object.scale.set(3,3,3); 
       object.position.y = 0; 
       object.position.z = 0; 
       object.position.x = 0; 
       scene.add(object); 
      }, onProgress, onError); 
      // 
      renderer = new THREE.WebGLRenderer({ 
       antialias: true, 
       alpha: true 
      }); 
      //controls = new THREE.OrbitControls(camera); 
      //controls.addEventListener('change', render); 
      renderer.setPixelRatio(window.devicePixelRatio); 
      renderer.setSize(1000, 700); 
      container.appendChild(renderer.domElement) 
      window.addEventListener('resize', onWindowResize, false); 
     } 
     function onWindowResize() { 
      windowHalfX = 1000/2; 
      windowHalfY = 700/2; 
      camera.aspect = 1000/700; 
      camera.updateProjectionMatrix(); 
      renderer.setSize(1000, 700); 
     } 
     function animate() { 
      render(); 
      requestAnimationFrame(animate); 
      controls.update(); 
     } 
     function render() { 
      renderer.render(scene, camera); 
     } 
    </script> 
</body>

任何想法，問題出在哪裏？我試了一下幾個教程，但沒有一個人幫我。

來源

2015-11-22 Awatoa

你有沒有進行錯誤檢查JavaScript控制檯？（F12）。你可能忘了包含'./ examples/js/controls/OrbitControls.js'。 – Kenney

我收錄了所有需要的文件 – Awatoa

您需要包括three.min.js第一：

<script src="js/three.min.js"></script> 
<script src="js/OrbitControls.js"></script> 
<script src="js/OBJLoader.js"></script>

來源

2015-11-22 13:53:03 Kenney

現在就開始工作，謝謝你:) – Awatoa

不客氣:-) – Kenney

Three.js OBJloader with OrbitControls

回答

相關問題