THREE.js軌道控制不起作用

我正在嘗試學習三種，到目前爲止事情進展順利。我正在努力創建一個簡單的項目，在高爾夫球座上打造一個高爾夫球。最終，我會把它放在天空盒內，並使用一些着色器來創建球中的酒窩。THREE.js軌道控制不起作用

現在我已經能夠創造球和發球臺，並獲得相機和燈光設置。我現在試圖添加一些軌道控制，以便我可以旋轉，平移和縮放場景。我添加了orbitControls腳本並將其設置爲如何在網上查看示例。但是，當我試圖繞着攝像機拍攝到1,0,0 0,1,0或0,0,1時，最終場景完全失敗，最後我沿着0,0看到對象不可見。

這裏是我的代碼，在它的全部

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset=utf-8> 
     <title>3D Sandbox</title> 
     <style> 
      html, body { 
       margin: 0px; 
      } 
      canvas { 
       background-color: #999; 
       position: absolute; 
       height: 100vh; 
       width: 100vw; 
       overflow: hidden; 
      } 
     </style> 
    </head> 
    <body> 
     <script src='/three.js'></script> 
     <script src="/orbitControls.js"></script> 
     <script type='text/javascript'> 
      let scene, 
       camera, 
       controls, 
       renderer, 
       height = window.innerHeight, 
       width = window.innerWidth; 

      window.addEventListener('load', init, false); 

      function init() { 
       createScene(); 
       createCamera(); 
       createLights(); 
       createBall(); 
       createTee(); 
       render(); 
       animate(); 
      } 

      function createScene() { 
       let grid; 

       scene = new THREE.Scene(); 

       renderer = new THREE.WebGLRenderer({ 
        antialias: true, 
        alpha: true 
       }); 
       renderer.setSize(width, height); 
       document.body.appendChild(renderer.domElement); 

       grid = new THREE.GridHelper(100, 5); 
       scene.add(grid); 
      } 

      function createCamera() { 
       camera = new THREE.PerspectiveCamera(45, width/height, 0.1, 1000); 
       camera.position.z = 50; 
       camera.position.y = 13; 
       camera.up = new THREE.Vector3(0,1,0); 
       //camera.lookAt(new THREE.Vector3(0,13,0)); 

       controls = new THREE.OrbitControls(camera); 
       controls.target = new THREE.Vector3(0, 13, 0); 
       controls.addEventListener('change', render); 
      } 

      function createLights() { 
       let directionalLight, ambientLight; 

       directionalLight = new THREE.DirectionalLight(0x404040, 4); 
       directionalLight.position.set(0, 2000, 2000); 
       directionalLight.target.position.set(0, 2, 0); 
       scene.add(directionalLight); 

       ambientLight = new THREE.AmbientLight(0x404040, 2); 
       scene.add(ambientLight); 
      } 

      function createBall() { 
       let ballGeom, ballMaterial, ball; 

       ballGeom = new THREE.SphereGeometry(5, 32, 32); 
       ballMaterial = new THREE.MeshPhongMaterial({ 
        color: 0xFFFFFF 
       }); 
       ball = new THREE.Mesh(ballGeom, ballMaterial); 
       ball.position.y = 13.3; 

       scene.add(ball); 
      } 

      function createTee() { 
       let tee, stemGeom, stem, bevelGeom, bevel, topGeom, top, teeMat; 

       tee = new THREE.Object3D(); 
       teeMat = new THREE.MeshPhongMaterial({ 
        color: 0x0000FF 
       }); 

       stemGeom = new THREE.CylinderGeometry(.9, 0.75, 7); 
       stem = new THREE.Mesh(stemGeom, teeMat); 
       tee.add(stem); 

       bevelGeom = new THREE.CylinderGeometry(1.5, .9, 2); 
       bevel = new THREE.Mesh(bevelGeom, teeMat); 
       bevel.position.y = 3.75; 
       tee.add(bevel); 

       topGeom = new THREE.CylinderGeometry(1.5, 1.5, .25); 
       top = new THREE.Mesh(topGeom, teeMat); 
       top.position.y = 4.875; 
       tee.add(top); 

       tee.position.y = 3.5; 
       scene.add(tee); 
      } 

      function render() { 
       renderer.render(scene, camera); 
      } 

      function animate() { 
       requestAnimationFrame(animate); 
       controls.update(); 
       render(); 
      } 
     </script> 
    </body> 
</html>

來源

2016-06-09 efarley

另外，請閱讀three.js示例http://threejs.org/examples/misc_controls_orbit.html中與正確使用OrbitControls有關的註釋。 – WestLangley

刪除'位置：絕對'似乎工作http://jsfiddle.net/madhawa_R/akmcv7Lh/69/。但我不知道爲什麼它沒有工作。是否有任何理由將位置設置爲絕對？您可以使用容器元素 –

controls = new THREE.OrbitControls(camera);

需求是

controls = new THREE.OrbitControls(camera, renderer.domElement);

其結果是在this block。

來源

2016-06-09 05:44:01 user01

實際上，這是很好的做法，但不應該這樣做。 OP的例子中發生了一些事情，導致「document.body.clientHeight」爲零。 – WestLangley

THREE.js軌道控制不起作用

回答

相關問題