【Threejs】相机控制器动画

鸢_2024-11-09 21:18

使用场景

官方提供了一个基于目标点、刷新速度，在每次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