效果：

代碼：

<template>
  <div>
    <el-container>
      <el-main>
        <div class="box-card-left">
          <div id="threejs" style="border: 1px solid red"></div>
          <div class="box-right">
            <el-button type="primary" @click="start">直線運(yùn)動開始</el-button>
            <el-button type="primary" @click="start2">圓周運(yùn)動開始</el-button>
            <div style="text-align:left;font-size:18px;width:500px;white-space: wrap;padding:10px;">
              twwenjs庫提供了onStart、onUpdate、onComplete等用于控制動畫執(zhí)行的回調(diào)函數(shù)。
              <br>
              onStart：動畫開始執(zhí)行觸發(fā)
              <br>
              onUpdate：動畫執(zhí)行過程中，一直被調(diào)用執(zhí)行
              <br>
              onComplete：動畫正常執(zhí)行完觸發(fā)
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script>
// 引入軌道控制器擴(kuò)展庫OrbitControls.js
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import TWEEN from "@tweenjs/tween.js";

export default {
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
      mesh: null,
      geometry: null,
      group: null,
      material: null,
      clock: null,
      mixer: null,
    };
  },
  created() {},
  mounted() {
    this.name = this.$route.query.name;
    this.init();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    init() {
      this.scene = new this.$three.Scene();
      const axesHelper = new this.$three.AxesHelper(100);
      this.scene.add(axesHelper);
        // 創(chuàng)建立方緩存幾何體對象
      this.geometry = new this.$three.BoxGeometry(50,50,50);
      // 創(chuàng)建材質(zhì)對象
      this.material = new this.$three.MeshBasicMaterial({
        color: 0xff11aa
      });
      // 創(chuàng)建網(wǎng)格模型
      this.mesh = new this.$three.Mesh(this.geometry, this.material);
      this.scene.add(this.mesh);
      this.camera = new this.$three.PerspectiveCamera(60,1,0.01,2000);
      this.camera.position.set(100,100,100);
      this.camera.lookAt(0,0,0);
      const helper = new this.$three.CameraHelper( this.camera );
      this.scene.add( helper );
      this.renderer = new this.$three.WebGLRenderer();
      this.renderer.setSize(1000,800);
      this.renderer.render(this.scene, this.camera);
      window.document.getElementById("threejs").appendChild(this.renderer.domElement);
      // 創(chuàng)建相機(jī)空間軌道控制器對象
      const controls = new OrbitControls(this.camera, this.renderer.domElement);
      controls.addEventListener("change", () => {
        this.renderer.render(this.scene, this.camera);
      })
    },
    start() {
      const tween = new TWEEN.Tween(this.camera.position);
      tween.to({x:150,y:150,z:150}, 2000);
      tween.start();
      this.camera.lookAt(0,0,0);
      this.loop();
    },
    loop() {
      this.renderer.render(this.scene, this.camera);
      TWEEN.update();
      window.requestAnimationFrame(this.loop);
    },
    start2() {
      const R = 100;
      const tween = new TWEEN.Tween({angle: 0});
      tween.to({angle: Math.PI * 2}, 6000).onUpdate(obj => {
        this.camera.position.x = R * Math.cos(obj.angle);
        this.camera.position.z = R * Math.sin(obj.angle);
      this.camera.lookAt(0,0,0);
      })
      tween.start();
      this.loop();
    }
  },
};
</script>
//
<style lang="less" scoped>
.box-card-left {
  display: flex;
  align-items: flex-start;
  flex-direction: row;

  width: 100%;

  .box-right {
    img {
      width: 500px;
      user-select: none;
    }
  }
}
</style>

?文章來源地址http://www.zghlxwxcb.cn/news/detail-799729.html

到了這里，關(guān)于three.js 使用 tweenjs繪制相機(jī)運(yùn)動動畫的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！