ThreeJs 缩放功能
本文实现了Threejs+tween对场景中某个位置进行视角转换以及放大效果
animateMove(currentOne, targetOne, currentTwo, targetTwo) {
//视角转换部分
let that = this
let position = {
x1: currentOne.x,
y1: currentOne.y,
z1: currentOne.z,
x2: targetOne.x,
y2: targetOne.y,
z2: targetOne.z
};
//关闭控制器
CONTROLS.enabled = false;
this.tween = new TWEEN.Tween(position);
this.tween.to({
x1: currentTwo.x,
y1: currentTwo.y,
z1: currentTwo.z,
x2: targetTwo.x,
y2: targetTwo.y,
z2: targetTwo.z
}, 1000);
this.tween.onUpdate(function () {
CAMERA.position.set(position.x1, position.y1, position.z1)
CONTROLS.target.set(position.x2, position.y2, position.z2)
CONTROLS.update();
})
this.tween.onComplete(function () {
///开启控制器
CONTROLS.enabled = true;
})
this.tween.easing(TWEEN.Easing.Cubic.InOut);
this.tween.start();
//放大部分
const r = {
scale: 1
}
that.tweenScale = new TWEEN.Tween(r);
that.tweenScale.to({
scale: 5
}, 1000)
that.tweenScale.easing(TWEEN.Easing.Sinusoidal.InOut).repeat(Infinity)
that.tweenScale.onUpdate(function (e) {
that.group.scale.set(e.scale, e.scale, e.scale)
if (e.scale == 5) {
that.tweenScale.stop()
}
});
that.tweenScale.start();
}
//调用代码部分
that.animateMove(CAMERA.position, CONTROLS.target, new Vector3(-695, 21, 209), new Vector3(-200, -300, -100))
const rendererOut = () => {
requestAnimationFrame(rendererOut);
TWEEN.update()
};