【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

相关推荐
-代号95273 小时前
【JavaScript】十二、定时器
开发语言·javascript·ecmascript
灵感__idea4 小时前
JavaScript高级程序设计(第5版):扎实的基本功是唯一捷径
前端·javascript·程序员
摇滚侠4 小时前
Vue3 其它API toRow和markRow
前端·javascript
難釋懷4 小时前
JavaScript基础-history 对象
开发语言·前端·javascript
拉不动的猪4 小时前
刷刷题47(react常规面试题2)
前端·javascript·面试
浪遏4 小时前
场景题:大文件上传 ?| 过总字节一面😱
前端·javascript·面试
计算机毕设定制辅导-无忧学长4 小时前
HTML 与 JavaScript 交互:学习进程中的新跨越(一)
javascript·html·交互
zrhsmile5 小时前
Vue从入门到荒废-单向绑定
javascript·vue.js·ecmascript
百锦再5 小时前
React编程的核心概念:发布-订阅模型、背压与异步非阻塞
前端·javascript·react.js·前端框架·json·ecmascript·html5
冴羽6 小时前
SvelteKit 最新中文文档教程(16)—— Service workers
前端·javascript·svelte