欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 新闻 > 焦点 > 【Threejs】相机控制器动画

【Threejs】相机控制器动画

2024/11/14 12:04:37 来源:https://blog.csdn.net/qq_61834461/article/details/143619182  浏览:    关键词:【Threejs】相机控制器动画

使用场景

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

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

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

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

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

相机动画方式移动

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

Anim插件

这是一个无需配置的类似TWEEN的class,不需要任何参数,开箱即用。
鸢--------js自定义简易动画库.2014.3001.5502

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com