Three.js Vue 教程：如何創建交互式 3D 場景

一、安裝 Three.js 與 Vue.js

要創建 3D 場景，我們需要使用 Three.js 庫。它是用於創建和呈現 3D 圖像的 JavaScript 庫。我們還需要使用 Vue.js，因為它提供了一些很好的方式來管理我們的應用程序狀態。首先，在我們的項目中安裝這兩個庫：

npm i three vue-threejs

現在，我們可以創建我們的 Vue.js 組件來開始構建我們的場景。

二、創建 Three.js 場景和渲染器

要創建 Three.js 場景，我們需要使用下面的代碼：

import { Scene, PerspectiveCamera, WebGLRenderer } from 'three';
export default {
  name: 'ThreeRenderer',
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null,
      width: null,
      height: null,
    };
  },
  mounted() {
    this.init();
    this.animate();
  },
  methods: {
    init() {
      const width = this.$el.clientWidth;
      const height = this.$el.clientHeight;
      const scene = new Scene();
      const camera = new PerspectiveCamera(
        75,
        width / height,
        0.1,
        1000,
      );
      const renderer = new WebGLRenderer();
      renderer.setSize(width, height);
      this.$el.appendChild(renderer.domElement);
      this.scene = scene;
      this.camera = camera;
      this.renderer = renderer;
      this.width = width;
      this.height = height;
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.renderer.render(this.scene, this.camera);
    },
  },
};

這將創建一個 Three.js 場景、相機和渲染器，並將渲染器附加到 Vue.js 組件中的元素上。我們可以使用 animate 方法來確保每個幀都進行渲染。

三、添加 3D 模型

在場景中添加 3D 模型比較簡單。我們只需要將模型文件下載到我們的項目中，然後使用 Three.js 的加載器來加載模型並將其添加到場景中：

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
// ...
methods: {
  // ...
  loadModel() {
    const loader = new GLTFLoader();
    loader.load('/path/to/your/model.gltf', (gltf) => {
      this.scene.add(gltf.scene);
    });
  },
},
mounted() {
  // ...
  this.loadModel();
},

在這個例子中，我們使用了 GLTFLoader 來加載 3D 模型。我們可以使用這個方法來加入新的內容到場景中。

四、使用 Three.js 來交互

要使用 Three.js 來處理用戶輸入和交互，我們可以將其添加到我們使用的事件監聽器中：

mounted() {
  // ...
  this.$el.addEventListener('mousedown', this.onDocumentMouseDown);
},
methods: {
  // ...
  onDocumentMouseDown(event) {
    event.preventDefault();
    // 獲取鼠標的x和y坐標
    const mouse = new Vector2();
    mouse.x = (event.clientX / this.width) * 2 - 1;
    mouse.y = -(event.clientY / this.height) * 2 + 1;
    // 射線計算
    const raycaster = new Raycaster();
    raycaster.setFromCamera(mouse, this.camera);
    // 獲取相交的對象
    const intersects = raycaster.intersectObjects(this.scene.children);
    // 處理相交的對象
    if (intersects.length > 0) {
      const object = intersects[0].object;
      console.log(`Intersected ${object.name}`);
    }
  },
},

在這個例子中，我們使用了 Three.js 中的射線計算來確定場景中的哪個對象被用戶點擊。另外，我們還使用了事件監聽器來處理在場景中的鼠標事件。

五、綁定 Vue.js 狀態和 Three.js 屬性

在我們的 Vue.js 應用程序中，我們可以使用 v-bind 指令來將 Vue.js 組件的狀態綁定到 Three.js 屬性。例如，我們可以使用下面的代碼將相機的位置綁定到 Vue.js 組件的屬性：

<template>
  <div v-bind:style="{ 'height': '300px' }" v-on:resize="onResize"></div>
</template>

<script>
// ...
data() {
  return {
    // ...
    camera: null,
  };
},
methods: {
  onResize() {
    const width = this.$el.clientWidth;
    const height = this.$el.clientHeight;
    this.camera.aspect = width / height;
    this.camera.updateProjectionMatrix();
    this.renderer.setSize(width, height);
    this.width = width;
    this.height = height;
  },
},
</script>

在這個例子中，我們將組件的大小綁定到視窗的大小。我們可以使用相同的模式來將其他屬性綁定到 Vue.js 組件的狀態上。

六、總結

在這篇文章中，我們學習了如何使用 Three.js 和 Vue.js 創建交互式的 3D 場景。我們了解到了如何創建場景、相機和渲染器，如何將 3D 模型添加到場景中，以及如何使用 Three.js 來監聽用戶交互。最後，我們還討論了如何將 Vue.js 應用程序的狀態綁定到 Three.js 屬性。