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：使用Easing平滑拖动全景

1 个答案: