Javascript 三级水平照相机

我到处寻找解决办法。似乎在轨道控制和轨迹球控制上，相机不会保持水平！当您使用轨迹球控制器四处移动时，场景开始滚动。轨道控制从左向右拖动仅滚动场景。我希望能够使用轨迹球控制，但在围绕场景中心移动时，保持相机与地平线水平。这可能吗

我的代码：

    // 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 );
    }

//设置全局变量
摄像机、控件、场景、渲染器；
//行星物理位置
var sun、mercPL、venPL、earthPL、marsPL、jupPL、satPL、urPL、nepPL；
//时间和标量
var now，标量，planetScalar；
init（）；
制作动画（）；
函数init（）{
场景=新的三个。场景（）；
renderer=new THREE.WebGLRenderer（）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
var container=document.getElementById（'container'）；
container.appendChild（renderer.doElement）；
摄像头=新的三个透视摄像头（60，window.innerWidth/window.innerHeight，11000）；
摄像机位置z=200；
控件=新的三个.轨道控件（摄影机、渲染器.doElement）；
//controls.addEventListener（'change'，render）；//仅当没有动画循环（requestAnimationFrame）时添加此选项
controls.enableDamping=true；
控制。阻尼系数=0.8；
controls.enableZoom=true；
//添加太阳物理位置
var geometry=新的三点球面法（5,30,30,0，Math.PI*2,0，Math.PI*2）；
var material=新的3.MeshBasicMaterial（{color:“Yellow”}）；
太阳=新的三个网格（几何体、材质）；
场景。添加（太阳）；
var分段计数=32，
半径=80，
几何体=新的三个。几何体（），
材质=新的三个.LineBasicMaterial（{color:0xFFFFFF}）；
对于（var i=0；i也许这可以帮助您（所有选项都在orbit库中注释）

水平地平线：

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

轨道焦点：

controls.target = (cube.position);

结果：（注意：我的鼠标控件是反向的（向右旋转/向左平移））


编辑：在查看您的注释代码后，我认为这是您想要的：


要点是：

a） 您需要为相机提供上方向向量：

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

及

b） 用相机对准太阳：

camera.lookAt(sun.position);

您仍然可以使用阻尼，锁定角度（如果需要，还可以使用垂直约束）并加速偏航，但我希望这能让您更靠近。
也许这可以帮助您（所有选项都在轨道库中注释）

水平地平线：

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

轨道焦点：

controls.target = (cube.position);

结果：（注意：我的鼠标控件是反向的（向右旋转/向左平移））


编辑：在查看您的注释代码后，我认为这是您想要的：


要点是：

a） 您需要为相机提供上方向向量：

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

及

b） 用相机对准太阳：

camera.lookAt(sun.position);

您仍然可以使用阻尼，锁定角度（如果需要，还可以使用垂直约束）并加速偏航，但我希望这能让您更靠近。
这不是我想要的。我正在寻找这种互动：✓&number=&designation=2016+NP21&name=&epoch=2016-07-31.0&peri=171.3873438&m=349.42313&node=144.6257306&incl=33.4926092&e=0.154857744&a=2.615223&commit=Interactive+Orbit+SketchBtw链接断开，复制/粘贴会导致页面断开。深入该站点并找到一个工作示例后，并不清楚您正在进行的交互指的是。通过滑块控制的偏航旋转？@基诺的回答似乎符合你的要求。注意，他提到鼠标控制是反转的——使用鼠标右键进行环绕——不确定你是否注意到了。我在上面添加了我的代码。它无法按我希望的方式工作。这些线条似乎只会锁定场景，使其无法移动up和down？谢谢：）它实际上似乎工作正常。出于某种原因，我的太阳和轨道与相机的轨道旋转了90度。这是怎么发生的？@rankind：编辑我的答案，我认为这是一个不同的问题，但它涉及到旋转相机（给它一个上方向向量），参见示例。这不是我想要的。我正在寻找这种互动：✓&number=&designation=2016+NP21&name=&epoch=2016-07-31.0&peri=171.3873438&m=349.42313&node=144.6257306&incl=33.4926092&e=0.154857744&a=2.615223&commit=Interactive+Orbit+SketchBtw链接断开，复制/粘贴会导致页面断开。深入该站点并找到一个工作示例后，并不清楚您正在进行的交互指的是。通过滑块控制的偏航旋转？@基诺的回答似乎符合你的要求。注意，他提到鼠标控制是反转的——使用鼠标右键进行环绕——不确定你是否注意到了。我在上面添加了我的代码。它无法按我希望的方式工作。这些线条似乎只会锁定场景，使其无法移动up和down？谢谢：）它实际上似乎工作正常。出于某种原因，我的太阳和轨道与相机的轨道旋转了90度。这是怎么发生的？@rankind：编辑了我的答案，我认为这是一个不同的问题，但它涉及旋转相机（给它一个上方向向量），参见示例。