旋转相机以面对对象而不会弄乱纬度值

Question

我用来控制我的相机的代码通过移动一个矢量（camera.target）然后将相机设置为查看该矢量来工作。在这种情况下 camera.lookAt(camera.target);。 onDocumentMouseMove 函数计算经度和纬度，这有助于设置 camera.target x、y 和 z 值。下面是一个事情如何运作的例子。按下任意键将导致相机旋转到一个对象，但如果您下次通过拖动鼠标移动相机时这样做，相机将自动跳转到击键前的最后一个位置。这是因为为了让鼠标移动相机，它必须跟踪纬度和经度。所以我遇到的问题是在击键后计算新的纬度位置。我在想是否可以从 lon 和 lat 计算目标 x、y、z 值，而不是可以从 x、y、z 值反向计算 lat 和 lon。不幸的是，数学超出了我的能力范围。我为这个问题增加了赏金。任何帮助将不胜感激。 http://codepen.io/anon/pen/GgRXJz

        var spriteImg, material, geometry;
        var camera, scene, renderer;
        var keyboard = new THREEx.KeyboardState();
        var fov = 70,
        texture_placeholder,
        isUserInteracting = false,
        onMouseDownMouseX = 0, onMouseDownMouseY = 0,
        lon = 0, onMouseDownLon = 0,
        lat = 0, onMouseDownLat = 0,
        phi = 0, theta = 0;

        init();
        animate();

        function init() {

            var container;

            container = document.getElementById( 'container' );

            camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1100 );
            camera.target = new THREE.Vector3( 0, 0, 0 );

            scene = new THREE.Scene();

            renderer = new THREE.WebGLRenderer();
            renderer.setClearColor(0xffffff, 1);
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );

            document.addEventListener( 'mousedown', onDocumentMouseDown, false );
            document.addEventListener( 'mousemove', onDocumentMouseMove, false );
            document.addEventListener( 'mouseup', onDocumentMouseUp, false );
            window.addEventListener( 'resize', onWindowResize, false );
            stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.bottom = '0px';
            stats.domElement.style.left = '0px';
            stats.domElement.style.zIndex = 100;
            container.appendChild( stats.domElement );

            material = new THREE.MeshBasicMaterial( { color: 0x0125fd} );
            geometry = new THREE.PlaneGeometry(50, 50, 3, 3);
            blue1 = new THREE.Mesh(geometry, material);
            blue1.position.set(200,100,200);
            scene.add(blue1);
            blue1.lookAt( camera.position );

            blue2 = new THREE.Mesh(geometry, material);
            blue2.position.set(-200,-100,-200);
            blue2.lookAt( camera.position );
            scene.add(blue2);

        }

        function onWindowResize() {

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

            renderer.setSize( window.innerWidth, window.innerHeight );

        }

        function onDocumentMouseDown( event ) {

            isUserInteracting = true;

            onPointerDownPointerX = event.clientX;
            onPointerDownPointerY = event.clientY;

            onPointerDownLon = lon;
            onPointerDownLat = lat;

        }

        function onDocumentMouseMove( event ) {
            if ( isUserInteracting ) {
                lon = ( event.clientX - onPointerDownPointerX ) * 0.3 + onPointerDownLon;
                lat = ( onPointerDownPointerY - event.clientY ) * 0.3 + onPointerDownLat;
            }
        }

        function onDocumentMouseUp( event ) {
            isUserInteracting = false;
        }

        function animate() {
            requestAnimationFrame( animate );
            render();
            update();
        }   

        function update()
        {           
            stats.update();
        }

        function render() {

            lat = Math.max( - 85, Math.min( 85, lat ) );
            phi = THREE.Math.degToRad( 90 - lat );
            theta = THREE.Math.degToRad( lon );

            camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );
            camera.target.y = 500 * Math.cos( phi );
            camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );

            camera.lookAt( camera.target );

            renderer.render( scene, camera );
        }

Answer 1

要从 x,y,z 坐标计算纬度和经度，您需要反转您的方法。演示请见updated code-pen。

原文：

lat = Math.max( - 85, Math.min( 85, lat ) );
phi = THREE.Math.degToRad( 90 - lat );
theta = THREE.Math.degToRad( lon );

camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );
camera.target.y = 500 * Math.cos( phi );
camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );

逆向：

摘自original code-pen 的片段，在update() 方法内的document.body.onkeydown 动作事件侦听器上找到——在演示中使用以下代码修改了此方法

//Since you are looking at a given shape on keypress, decided to inverse from that
//shape's position.
camera.lookAt( blue1.position );
//Added the following four lines of code
phi = Math.acos((blue1.position.y)/500);
theta = Math.acos((blue1.position.x)/(500 * Math.sin(phi)))
lon = THREE.Math.radToDeg(theta);
lat = 90-THREE.Math.radToDeg(phi);

代数中的细节

鉴于我在学校里总是因为只显示解决方案而获得停靠点，以下是我如何从 x、y 和 z 逆向/求解纬度和经度

让 x、y 和 z 代表您给定的观点（camera.target.x 或 <object>.position.x 等）。

让phi = Φ, theta = Θ

求解Θ

1. x = 500 * sin (Φ) * cos(Θ)
2. x/(500 * sin(Φ)) = 500 * sin (Φ) * cos(Θ) / (500 * sin(Φ))
3. x/(500 * sin(Φ)) = cos(Θ)
4. arccos(x/(500 * sin(Φ))) = arccos(cos(Θ))
5. arccos(x/(500 * sin(Φ))) = Θ

求Φ

1. y = 500 * cos(Φ)
2. y/500 = 500 * cos(Φ) / 500
3. y/500 = cos(Φ)
4. arccos(y/500) = arccos(cos(Φ))
5. arccos(y/500) = Φ

求解lon

1. Θ = degToRad(lon)
2. radToDeg(Θ) = degToRad(degToRad(lon))
3. radToDeg(Θ) = lon

求解lat

1. Φ = degToRad(90 - lat);
2. radToDeg(Φ) = radToDeg(degToRad( 90 - lat ))
3. radToDeg(Φ) = 90 - 纬度
4. radToDeg(Φ) - 90 = 90 - 纬度 - 90
5. radToDeg(Φ) - 90 = -lat
6. -1*(radToDeg(Φ) - 90) = -1*(-lat)
7. -radToDeg(Φ + 90 = 纬度
8. 90 - radToDeg(Φ) = 纬度
9. 90 - radToDeg(Φ) = 纬度

Answer 2

camera.lookAt(yourObject.position);//?

假设我说对了，问题是这部分：“一种旋转相机以查看对象的方法”

顺便说一句，我认为在您的代码中，您如何修改 camera.target 并调用 camera.lookAt 令人困惑。我认为当你调用lookAt时你不需要修改目标，反之亦然。