3つのJSレベルの地平線カメラ

Question

私はあらゆるところでこれを解決するために探しています。 OrbitControlsとTrackballControllsでは、カメラが水平に留まらないようです！ TrackballControllsで移動すると、シーンが回転し始めます。 OrbitControllsを左から右にドラッグするとシーンが回転します。 TrackballControlsを使用することができますが、シーンの中心を移動するときにカメラの水平線を水平に保ちたいと思います。これは可能ですか？

マイコード：

// SETUP GLOBAL VARIABLES 

    var camera, controls, scene, renderer; 
    // PLANET PHYSICAL LOCATIONS 
    var sun, mercPL, venPL, earthPL, marsPL, jupPL, satPL, urPL, nepPL; 
    // TIME, AND SCALARS 
    var now, scalar, planetScalar; 

    init(); 
    animate(); 

    function init() { 

     scene = new THREE.Scene(); 

     renderer = new THREE.WebGLRenderer(); 
     renderer.setPixelRatio(window.devicePixelRatio); 
     renderer.setSize(window.innerWidth, window.innerHeight); 

     var container = document.getElementById('container'); 
     container.appendChild(renderer.domElement); 

     camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 1, 100000); 
     camera.position.z = 200; 

     controls = new THREE.OrbitControls(camera, renderer.domElement); 
     //controls.addEventListener('change', render); // add this only if there is no animation loop (requestAnimationFrame) 
     controls.enableDamping = true; 
     controls.dampingFactor = 0.8; 
     controls.enableZoom = true; 




     // ADD THE SUN PHYSICAL LOCATION 
     var geometry = new THREE.SphereGeometry(5, 30, 30, 0, Math.PI * 2, 0, Math.PI * 2); 
     var material = new THREE.MeshBasicMaterial({color: "Yellow"}); 
     sun = new THREE.Mesh(geometry, material); 
     scene.add(sun); 

     var segmentCount = 32, 
      radius = 80, 
      geometry = new THREE.Geometry(), 
      material = new THREE.LineBasicMaterial({ color: 0xFFFFFF }); 

     for (var i = 0; i <= segmentCount; i++) { 
      var theta = (i/segmentCount) * Math.PI * 2; 
      geometry.vertices.push(
       new THREE.Vector3(
        Math.cos(theta) * radius, 
        Math.sin(theta) * radius, 
        0));    
     } 
     scene.add(new THREE.Line(geometry, material)); 

     var segmentCount2 = 32, 
      radius2 = 120, 
      geometry2 = new THREE.Geometry(), 
      material2 = new THREE.LineBasicMaterial({ color: 0xFFFFFF }); 

     for (var i = 0; i <= segmentCount2; i++) { 
      var theta = (i/segmentCount2) * Math.PI * 2; 
      geometry2.vertices.push(
       new THREE.Vector3(
        Math.cos(theta) * radius2, 
        Math.sin(theta) * radius2, 
        0));    
     } 

     scene.add(new THREE.Line(geometry2, material2)); 

     // 

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

     render(); 



    } 

    function onWindowResize() { 

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

    } 


    function animate() { 

      requestAnimationFrame(animate); 
      controls.update(); 

      render(); // MUST BE HERE FOR ANIMATION 

    } 


    function render() { 

      renderer.render(scene, camera); 
    } 

ありがとう！

Answer 1

おそらくこれはあなたを助けることができます（すべてのオプションが軌道ライブラリにコメントしている）

レベルホライゾン：オービットの

controls.minPolarAngle = Math.PI/2; 
controls.maxPolarAngle = Math.PI/2; 

フォーカス：

controls.target = (cube.position); 

結果：（注意：私のマウスコントロールは逆さまです（軌道右/左パン）

Three.js Lock Orbit Controls

編集：あなたのコメントコードを確認した後、私は、これはあなたが欲しいものだと思う：

Three.js Orbit Controls pt 2.

要旨はということです：

a）は、あなたがアップでカメラを提供する必要がありますベクトル：

camera.up.set(0, 0, 1); 

そして

b）はカメラで太陽をターゲット：

camera.lookAt(sun.position); 

あなたはまだ減衰して再生し、角度をロック（あなたがそれらを必要とする場合、垂直制約もある）とヨーダウンスピードアップが、私は望むことができますこれはあなたを近づけます。