【Threejs】相机控制器动画

使用场景

官方提供了一个基于目标点、刷新速度,在每次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 } = defaultVision
    camera.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 })
  }

Anim插件

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

相关推荐
前端Hardy21 分钟前
HTML&CSS:有趣的漂流瓶
前端·javascript·css
前端Hardy22 分钟前
HTML&CSS :惊艳 UI 必备!卡片堆叠动画
前端·javascript·css
无羡仙1 小时前
替代 Object.freeze 的精准只读模式
前端·javascript
小菜全1 小时前
uniapp新增页面及跳转配置方法
开发语言·前端·javascript·vue.js·前端框架
白水清风2 小时前
关于Js和Ts中类(class)的知识
前端·javascript·面试
前端Hardy2 小时前
只用2行CSS实现响应式布局,比媒体查询更优雅的布局方案
javascript·css·html
车口2 小时前
滚动加载更多内容的通用解决方案
javascript
艾小码3 小时前
手把手教你实现一个EventEmitter,彻底告别复杂事件管理!
前端·javascript·node.js
Jedi Hongbin5 小时前
Three.js shader内置矩阵注入
前端·javascript·three.js
掘金安东尼6 小时前
Node.js 如何在 2025 年挤压 I/O 性能
前端·javascript·github