Vue Three.js 實戰：一步步打造一個令人驚艷的 3D 場景

安裝和設置

首先，安裝 Vue 和 Three.js 依賴項：

npm install vue three

創建一個新的 Vue 項目，然後在 main.js 文件中導入 Three.js 和 Vue Three.js：

import Vue from "vue"
import { createApp } from "vue"
import VueThree from "vue-three"

Vue.use(VueThree)

// 創建一個新應用程式
const app = createApp({})

// 將應用程式掛載到 DOM 中
app.mount("#app")

場景設置

在 App.vue 組件中，我們定義了場景的設置：

<template>
  <div id="app">
    <canvas ref="canvas" />
  </div>
</template>

<script>
export default {
  setup() {
    // 場景
    const scene = new THREE.Scene()

    // 相機
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.z = 2

    // Renderer
    const renderer = new THREE.webGLRenderer({ antialias: true })
    renderer.setSize(window.innerWidth, window.innerHeight)
    this.$refs.canvas.appendChild(renderer.domElement)

    // 方塊
    const geometry = new THREE.BoxGeometry(1, 1, 1)
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
    const cube = new THREE.Mesh(geometry, material)
    scene.add(cube)

    // 運行迴圈
    const animate = () => {
      renderer.render(scene, camera)
      cube.rotation.x += 0.01
      cube.rotation.y += 0.01
      requestAnimationFrame(animate)
    }
    animate()
    return {}
  }
}
</script>

動畫

要為場景添加動畫，我們在 animate() 迴圈中更新對象的屬性：

// 旋轉方塊
cube.rotation.x += 0.01
cube.rotation.y += 0.01

交互

為了添加用戶交互，我們可以使用事件監聽器：

<template>
  <div id="app">
    <Canvas ref="canvas" @click="handleClick" />
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // TODO: 添加與用戶點擊相關的邏輯
    }
  }
}
</script>

場景建模

使用 Three.js，我們可以創建複雜的 3D 模型：

// 創建一個球體
const geometry = new THREE.SphereGeometry(1, 32, 32)
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
const sphere = new THREE.Mesh(geometry, material)
scene.add(sphere)

材質和紋理

可以通過使用紋理和材質自定義 3D 模型的外觀：

// 創建一個紋理加載器
const loader = new THREE.TextureLoader()

// 加載紋理
const texture = loader.load("path/to/texture.png")

// 創建一個材質，指定紋理
const material = new THREE.MeshBasicMaterial({ map: texture })

總結

通過結合 Vue 和 Three.js，我們可以創建令人驚艷的 3D 場景，具有動畫、交互和自定義模型。本教程提供了建立一個基本場景的步驟，開發人員可以根據需要進一步擴展和自定義場景。使用 Three.js 和 Vue 的強大功能，您可以實現令人難忘的 3D 體驗。