Question

我正在尝试使用此示例Panorama使用three.js创建交互式全景应用程序，但在此示例中，没有使用箭头键（左箭头键和右箭头键）的旋转。所以我添加了一个事件监听器，为了使它顺利，我使用了一些不同的速度达到一些最大限制，每次调用监听器函数时速度都会改变。我需要旋转相机而不是立方体/球体这是代码

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

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

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
}
)()

Answer 2

尝试在轮换中使用补间库

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();





        }
}

Three.js：使用箭头键在全景中平滑旋转

2 个答案: