Three.js: 使全景中方向键旋转平滑

Question

我正在尝试使用此示例 Panorama 使用 three.js 创建交互式全景应用程序，但在此示例中没有使用箭头键（左右箭头键）的旋转。所以我添加了一个事件侦听器来执行此操作，为了使其平滑，我使用了一些不同的速度直到某个最大限制，并且每次调用侦听器函数时速度都会改变。我只需要旋转相机而不是 cube/sphere 这是代码

on_key_down = function(event) 
{
    keyPressed = event.keyCode;
    if (keyPressed === 37)
        lon -= keySpeed;
    else if (keyPressed === 39)
        lon += keySpeed;
    if (keySpeed < keyMax)
        keySpeed += 1;
}

现在有了这个，旋转并不像我们在 KRPano 或 Google Business View 等其他全景应用程序中看到的那样平滑。知道如何使旋转像上述应用程序一样平滑吗？

Answer 1

尝试在轮换中使用补间库

https://github.com/tweenjs/tween.js/

和申请：

function onDocumentKeyDown( event ) {
    //event.preventDefault();
        if (event.keyIdentifier == "Left") {

                 var demoTween = new TWEEN.Tween({ val: 1 }).to({ val: 10 },6000).easing(TWEEN.Easing.Quadratic.InOut).onStart(function(){

                       }).onUpdate(function(){
                          controls.rotateLeft(0.001);
                          controlsTarget.position = shipMesh.position;

                       }).onComplete(function(){

                       }).start();





        }
}

Answer 2

上述解决方案工作正常，但如果有人想在不包含任何外部库的情况下执行此操作，那么您可以执行以下操作。

current = lon
target = lon + 20
(update =function() {
    lon = current + (target - current)*0.15
    current = lon
    if((target - current) > 0.1)  // 0.1 is the threshold difference
        requestAnimationFrame update
}
)()

Three.js: 使全景中方向键旋转平滑

Three.js: Make rotation with arrow keys smooth in panorama

javascript

jquery

panoramas

three.js