【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

相关推荐
一枚前端小能手31 分钟前
「周更第5期」实用JS库推荐:RxJS
前端·javascript·rxjs
江城开朗的豌豆1 小时前
拆解微信小程序的“积木盒子”:这些原生组件你都玩明白了吗?
前端·javascript·微信小程序
前端达人1 小时前
「React实战面试题」:React.memo为什么失效了?
前端·javascript·react.js·前端框架·ecmascript
江城开朗的豌豆1 小时前
嘿,别想那么复杂!我的第一个微信小程序长这样
前端·javascript·微信小程序
Irene19911 小时前
URLSearchParams :处理 URL 查询参数的接口
开发语言·前端·javascript
LFly_ice1 小时前
学习React-19-useDebugValue
javascript·学习·react.js
Dontla1 小时前
Web典型路由结构之Next.js (App Router, v13+) )(文件系统驱动的路由:File-based Routing)声明式路由:文件即路由
开发语言·前端·javascript
~无忧花开~1 小时前
JavaScript学习笔记(十七):ES6生成器函数详解
开发语言·前端·javascript·笔记·学习·es6·js
前端 贾公子1 小时前
Vue3 defineModel === 实现原理
前端·javascript·vue.js
JiKun2 小时前
ECMA 2025(ES16) 新特性
前端·javascript