camera camera angle of view smooth transition transition
Use the tween feature to make a smooth transition of the viewing angle.
| Transition method | Paraphrase |
|---|---|
| Linear | Linear uniform motion effect |
| Quadratic | Ease of quadratic (t^2) |
| Cubic | Cubic easing (t^3) |
| Quartic | Ease of the fourth power (t^4) |
| Quintic | Ease of the fifth power (t^5) |
| Sinusoidal | Ease of sine curve (sin(t)) |
| Exponential | Easing of exponential curve (2^t) |
| Circular | Easing of circular curve (sqrt(1-t^2)) |
| Elastic | Exponentially decayed sinusoidal easing |
| Back | Cubic easing beyond the range ((s+1) t^3 – s t^2) |
| Bounce | Exponentially decayed rebound easing |
| Ease direction | Paraphrase |
|---|---|
| easeIn | An easing that accelerates from 0, that is, slow first and then fast |
| easeOut | Easing that slows down to 0, that is, fast first and then slow |
| easeInOut | The easing starts from 0 in the first half and decelerates to 0 in the second half |
rotate(){
let that = this;
let oldCameraPosition = {
x:that.camera.position.x,
y:that.camera.position.y,
z:that.camera.position.z
}
let tween1 = new TWEEN.Tween({
x:oldCameraPosition.x,
y:oldCameraPosition.y,
z:oldCameraPosition.z,
});
tween1.to({
x:-92,
y:60,
z:192
},1000);
tween1.onUpdate(obj => {
that.camera.position.x = obj.x;
that.camera.position.y = obj.y;
that.camera.position.z = obj.z;
});
tween1.easing(TWEEN.Easing.Sinusoidal.InOut);
tween1.start();
tween1.onComplete(function () {
console.log('tween--finish')
});
},
After defining the transition effect of TWEEN, you need to call Tween.update() in animate.
animate(){
TWEEN.update();
}