三.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 );

尝试三个.jswebgl_panorama_cube.html示例。

三.js R.89