Próbuję między aparatem.Lookat w trzech.js za pomocą Tween.js z małym sukcesem.

To działa

    selectedHotspot = object;

    var tween = new TWEEN.Tween(camera.lookAt( object.position),600).start();

Ale obraca aparat bezpośrednio do obiektu.

Jak uzyskać ładną gładką rotacji?

To jest funkcja renderowania

  function update() {

    lat = Math.max(-85, Math.min(85, lat));
    phi = THREE.Math.degToRad(90 - lat);
    theta = THREE.Math.degToRad(lon);

    target.x = 512 * Math.sin(phi) * Math.cos(theta);
    target.y = 512 * Math.cos(phi);
    target.z = 512 * Math.sin(phi) * Math.sin(theta);


    if(!selectedHotspot)
        camera.lookAt(target);


    renderer.render(scene, camera);

}

AKTUALIZACJA

Ok, nie mogę nic w niczym zmieszać kamerę. Myślę, że musi być coś innego złe. Czy w funkcji renderowania będzie coś innego?

7
beek 13 sierpień 2014, 08:12

4 odpowiedzi

Dla pozycji pozycyjnej (ale dostajesz gist), używam tego kodu, który ma parametr czasu trwania i przesuwa kamerę płynnie:

function setupTween (position, target, duration)
{
    TWEEN.removeAll();    // remove previous tweens if needed

    new TWEEN.Tween (position)
        .to (target, duration)
        .easing (TWEEN.Easing.Bounce.InOut)
        .onUpdate (
            function() {
                // copy incoming position into capera position
                camera.position.copy (position);
            })
        .start();
}

I nazywam to tak:

setupTween (camera.position.clone(), new THREE.Vector3 (x, y, z), 7500);

Aby uzyskać 7,5 sekund gładkich animacji.

3
gaitat 13 sierpień 2014, 13:24

Wersja quaternion odpowiedzi Mrdooba

// backup original rotation
var startRotation = camera.quaternion.clone();

// final rotation (with lookAt)
camera.lookAt( lookAt );
var endRotation = camera.quaternion.clone();

// revert to original rotation
camera.quaternion.copy( startRotation );

// Tween
var lookAtTween = new TWEEN.Tween( camera.quaternion ).to( endRotation, 600 ).start();
2
zwcloud 26 marzec 2018, 09:36

Używam Controls.Target do Tween Camera'rotation i działa dobrze.

createjs.Tween.get(controls.target)
.to({
  x: tweenPos.x,
  y: tweenPos.y - 11,
  z: tweenPos.z + 0.001
}, 800,createjs.Ease.linear);
1
user7028883 7 lipiec 2017, 07:15

Dziękuje wszystkim,

Zrezygnowałem, próbując między kamerą, a zamiast tego dodałem

if (target.y < selectedHotspot.position.y - 2)
        lat += 0.1;
    else if (target.y > selectedHotspot.position.y + 2)
            lat -= 0.1; 

    if (target.x < selectedHotspot.position.x - 5)
        lon += 0.5;
    else if (target.x > selectedHotspot.position.x + 5)
        lon -= 0.5;
    else {

        camera.lookAt(selectedHotspot.position);

        if (camera.fov > selectedHotspot.bubble.distance*0.05){
            camera.fov -= 0.1;

        }
        if(sceneReady)
            loadScene();
    }

    camera.updateProjectionMatrix();

Do funkcji wezwanej w pętli renderowania. To działa dobrze.

0
beek 14 sierpień 2014, 01:34