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

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

Level Horizon：

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

你仍然可以使用阻尼，并锁定角度（如果你需要它们也有垂直约束）并加速偏航，但我希望这能让你更接近。

三个JS级地平线相机

1 个答案: