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