Three.js: плавное вращение с помощью клавиш со стрелками в панораме

Я пытаюсь создать приложение интерактивной панорамы с помощью 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
person Saurabh Kathpalia    schedule 29.06.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Попробуйте использовать библиотеку твинов в своей ротации

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





        }
}
person Martin    schedule 30.06.2015

arrow_upward
1
arrow_downward

Приведенное выше решение отлично работает, но если кто-то хочет сделать это без включения какой-либо внешней библиотеки, вы можете сделать следующее.

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
}
)()
person Saurabh Kathpalia    schedule 02.07.2015