【Threejs】相机控制器动画

devtools/2024/11/14 12:28:46/

使用场景

官方提供了一个基于目标点、刷新速度，在每次renderer中执行的动画，但实际开发中你可能会需要基于设定时间、目标点添加动画，并且有更多自定义成分的方式

获取当前状态下控制器和相机的姿态

javascript">  getVisionCof() {let { controls } = this//当前场景的控制器console.log(controls);const currentCamera = controls.object; // 当前控制器的相机const target = controls.target; // 当前控制器的目标点// 获取相机的位置const position = currentCamera.position.clone();// 获取相机的旋转（四元数）const rotation = currentCamera.quaternion.clone();return { position, rotation, target }}

改变当前控制器和相机姿态

javascript"> setCameraPose(defaultVision, duration = 5000) {//defaultVision就是上面获取姿态的返回值const controls = this.controls;//这里涉及到相机切换 不过和动画没关系，用你的control就行if (!controls) return;const camera = controls.object; // 当前控制器的相机let { position, rotation, target } = defaultVisioncamera.position.set(position.x, position.y, position.z)if (target) {controls.target.set(target.x, target.y, target.z)} else {camera.rotation.set(rotation.x, rotation.y, rotation.z)}this.dispatchEvent({ type: "viewChange", message: null })}

相机动画方式移动

javascript">lerpCameraPose(defaultVision, duration = 500) {//defaultVision就是上面获取姿态的返回值const controls = this.controls;if (!controls) return;const camera = controls.object; // 当前控制器的相机let { position, rotation, target } = defaultVision;const startPosition = {x: camera.position.x,y: camera.position.y,z: camera.position.z,}const anim = new Anim(startPosition, position,{duration: duration,easingFunction: Anim.easeInOutQuad,onUpdate: (updated) => {console.log(updated);camera.position.set(updated.x, updated.y, updated.z)if (target) {controls.target.set(target.x, target.y, target.z)} else {camera.rotation.set(rotation.x, rotation.y, rotation.z)}},onComplete: () => {if (target) {controls.target.set(target.x, target.y, target.z)}}})anim.start()this.dispatchEvent({ type: "viewChange", message: null })}