Three.js：使用缓动平滑地拖动全景图

Question

我正在使用此演示作为我的 6 立方体全景项目的基础：https://threejs.org/examples/#canvas_geometry_panorama

鼠标事件管理拖动功能。我想应用缓动，以便全景立方体顺畅地跟随鼠标。我知道缓动是当前元素位置和鼠标坐标之间的距离除以某个整数（例如 5）。在上面的示例中，我发现很难弄清楚如何应用它。这是代码示例：

function onDocumentMouseDown( event ) {
    event.preventDefault();
    isUserInteracting = true;
    onPointerDownPointerX = event.clientX;
    onPointerDownPointerY = event.clientY;
    onPointerDownLon = lon;
    onPointerDownLat = lat;
}
function onDocumentMouseMove( event ) {
    if ( isUserInteracting === true ) {
        lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
        lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
    }
}
function update() {
    if ( isUserInteracting === false ) { lon += 0.1; }
    lat = Math.max( - 85, Math.min( 85, lat ) );
    phi = THREE.Math.degToRad( 90 - lat );
    theta = THREE.Math.degToRad( lon );
    target.x = 500 * Math.sin( phi ) * Math.cos( theta );
    target.y = 500 * Math.cos( phi );
    target.z = 500 * Math.sin( phi ) * Math.sin( theta );
    camera.lookAt( target );
    renderer.render( scene, camera );
}

在 onDocumentMouseMove 中已经完成了一些点差计算，这不允许我实现成功的缓动。

注意：我更喜欢使用自己的代码而不是处理缓动的其他库。

Answer 1

向全景图添加阻尼的最简单方法是使用 OrbitControls。您可以使用这样的模式：

camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 0.1, 100 );
camera.position.z = 0.01;

controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableZoom = false;
controls.enablePan = false;
controls.enableDamping = true;

然后，在你的动画循环中：

requestAnimationFrame( animate );

controls.update(); // required when damping is enabled; otherwise, not required

renderer.render( scene, camera );

使用 three.js webgl_panorama_cube.html 示例进行试验。

three.js r.89

Three.js：使用缓动平滑地拖动全景图

Three.js: Drag Panorama Smoothly with Easing

javascript

three.js

easing

tween.js