无法在三个js中旋转或平移我的全景图

时间:2018-09-11 09:15:32

标签: javascript three.js

我没有使用默认代码在三个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图像。我把我的代码放在小提琴https://jsfiddle.net/sh60yqfx/32/中 请帮忙..谢谢

1 个答案:

答案 0 :(得分:2)

进行以下更改并似乎可以正常工作。请在本地尝试。

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()函数中,基于lookVectorlon设置lat值,然后将camera设为lookAt { 1}}。