无法在three js中旋转或平移我的全景照片

Question

我没有使用默认代码在three.js中进行相机旋转，即：

lat = Math.max( - 85, Math.min( 85, lat ) );
phi = THREE.Math.degToRad( 90 - lat );
theta = THREE.Math.degToRad( lon );
camera.target.x = 100 * Math.sin( phi ) * Math.cos( theta );
camera.target.y = 100 * Math.cos( phi );
camera.target.z = 100 * Math.sin( phi ) * Math.sin( theta );

我正在使用 lookVector.applyAxisAngle(axis, 0.001);，因此我认为我无法使用鼠标平移360度图像。我已经将我的代码放在了fiddle上https://jsfiddle.net/sh60yqfx/32/。请帮忙解决，谢谢。

- girish

Answer 1

我做了以下更改，看起来它正在工作。请在本地尝试。

function onPointerUp( event ) {
    isUserInteracting = false;
}

 function onPointerMove( event ) {
    if ( isUserInteracting === true ) {
        var clientX = event.clientX || event.touches[ 0 ].clientX;
        var clientY = event.clientY || event.touches[ 0 ].clientY;
        lon = ( onMouseDownMouseX - clientX ) * 0.1 + onMouseDownLon;
        lat = ( clientY - onMouseDownMouseY ) * 0.1 + onMouseDownLat;
    }
}

需要在用户停止移动鼠标（或触摸结束）时停止交错。

function render() {            
        lookVector.set(lon,lat,11);
        lookVector.applyAxisAngle(axis, 0.001);         
        camera.lookAt(lookVector);
        renderer.render(scene, camera);            
}

在render()函数中，根据lon和lat设置lookVector的值，然后使camera对准lookVector。请保留html标签。

- Rahul Salvi

---

如何设置纬度和经度？ - girish

你已经在 function onPointerMove(event) 中设置了 lat 和 lon。 - Rahul Salvi

它确实可以工作，但不完全符合我的要求。问题是我正在使用我选择的x、y和z值（考虑硬编码值而不是默认起始位置）设置camera.lookAt，并且相机正在旋转，isUserinterating为false。在鼠标按下时，我将isUserInteracting设置为true并移动鼠标。但是相机会采取一些不同的位置，而不是当isUserInteracting为false时的最后位置。我希望相机在我按下鼠标时采取相同的位置。我仍然从isUserintearacting false状态传递相同的lookVector，但它却采取了错误的位置。 - girish

可能它占据了正确的位置，但在mouseMove事件上lat和lon并未被正确地相加。我正在从pointerMove函数中取得lat和lon值。 - girish