javascript - 三个JS水平视线相机

我到处都在寻找解决方案。看来在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 );
    }

谢谢！

最佳答案

也许这可以帮助您（所有选项在轨道库中均已注释）

水平线：

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

您仍然可以使用阻尼，并锁定角度（如果需要，还可以使用垂直约束）并加快偏航速度，但是我希望这可以使您更近。