CODEWITHSUNDEEP
javascriptjquerythree.jspanoramas
Saurabh Kathpalia
Saurabh Kathpalia

Reputation: 269

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

I am trying to create an interactive panorama application using three.js using this example Panorama, but in this example there is no rotation with arrow keys (left and right arrow keys). So I added an event listener to do so and for making it smooth I used some varying speed upto some max limit and speed gets changed each time the listener function is called. I need to rotate the camera only not the cube/sphere Here is the code

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

Now with this, the rotation is not much smooth as we see in other panorama applications like KRPano or Google Business View. Any idea how can I make the rotation smooth like the above applications?

Upvotes: 0

Views: 1311

Answers (2)

Saurabh Kathpalia
Saurabh Kathpalia

Reputation: 269

The above solution works fine, but if someone wants to do it without including any external library then you can do the following.

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

Upvotes: 1

Martin
Martin

Reputation: 2673

Try to use tween library in your rotation

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

and application:

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





        }
}

Upvotes: 0

Related Questions