javascript - 三台JS水平水平相机

Question

我到处寻找解决方案。看来在 OrbitControls 和 TrackballControlls 上相机不会保持水平!当您使用 TrackballControlls 四处移动时，场景开始滚动。 OrbitControlls 从左向右拖动只会滚动场景。我希望能够使用轨迹球控件，但在围绕场景中心移动时保持相机与地平线水平。这可能吗？

我的代码:

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

您仍然可以使用阻尼，锁定 Angular (如果需要的话，还有垂直约束)并加速偏航，但我希望这能让您更接近。