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

【问题标题】：Three.js: Make rotation with arrow keys smooth in panoramaThree.js：在全景图中使用箭头键使旋转平滑
【发布时间】：2015-07-02 18:06:39
【问题描述】：

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

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 等其他全景应用程序中看到的那样平滑。知道如何像上述应用程序一样使旋转平滑吗？

【问题讨论】：

标签： javascript jquery three.js panoramas

【解决方案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
}
)()

【讨论】：

【解决方案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();





        }
}

【讨论】：