three.js 结合tween.js 实现镜头跳跃

最新推荐文章于 2024-04-09 11:34:17 发布

firefox丶ddk

最新推荐文章于 2024-04-09 11:34:17 发布

阅读量380

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/firefoxddk/article/details/125979369

版权

three 结合tween 实现镜头跳跃

import TWEEN from "@tweenjs/tween.js";
    action() {
      const a= this.cameraCon({x: 50, y: 9.9, z: 100}, 3000);
      const b= this.cameraCon({x: 2, y: 10, z: -6}, 2000);
      tweena.chain(b)
      tweena.start()
    },
    cameraCon(p2, time) {
      const tween1 = new TWEEN.Tween(this.p1).to(p2, time).easing(TWEEN.Easing.Quadratic.InOut);
      tween1.onUpdate(() => {
        this.camera.position.set(this.p1.x, this.p1.y, this.p1.z)
        this.camera.lookAt(0, 0, 0)
        this.roundModel.position.set(0, -14, 0);
        // this.controls.target.set(0, 0, 0) // 确保镜头移动后，视觉中心还在圆点处
        // this.controls.update()
      })
      return tween1
    },