在這篇文章中，我將向大家展示如何將 Three.js 與 Vue.js 結合，創建一個簡單的 3D 場景，并展示一個旋轉的立方體。通過這個簡單的示例，你將學習到如何在 Vue 項目中集成 Three.js，以及如何創建動態的 3D 內容。
1. 安裝 Three.js
首先，我們需要在項目中安裝 Three.js。你可以使用 npm 或 yarn 來安裝它。打開終端，進入你的 Vue 項目目錄，運行以下命令：
npm i three2. 創建 Vue 組件
接下來，我們創建一個 Vue 組件來渲染 3D 立方體。在這個組件中，我們將通過 Three.js 來創建場景、相機、渲染器，以及一個旋轉的立方體。
<template><div ref="threeCanvas" style="width: 100%; height: 100%"></div>
</template><script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as THREE from 'three';export default {name: 'ThreeExample',setup() {const threeCanvas = ref(null);onMounted(() => {// 創建一個 Three.js 場景const scene = new THREE.Scene();// 創建透視相機const camera = new THREE.PerspectiveCamera(75, // 視野角度window.innerWidth / window.innerHeight, // 寬高比0.1, // 最近可視距離1000 // 最遠可視距離);// 創建 WebGL 渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight); // 設置渲染器大小threeCanvas.value.appendChild(renderer.domElement); // 將渲染器添加到 DOM// 創建一個綠色的立方體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); // 將立方體添加到場景中// 設置相機的位置camera.position.z = 5;// 動畫渲染函數const animate = function () {requestAnimationFrame(animate); // 請求下一幀動畫// 旋轉立方體cube.rotation.x += 0.01;cube.rotation.y += 0.01;// 渲染場景renderer.render(scene, camera);};animate(); // 啟動動畫// 處理窗口尺寸變化const handleResize = () => {const width = window.innerWidth;const height = window.innerHeight;// 更新渲染器大小renderer.setSize(width, height);// 更新相機的縱橫比camera.aspect = width / height;camera.updateProjectionMatrix();};// 監聽窗口大小變化window.addEventListener('resize', handleResize);// 清理資源onBeforeUnmount(() => {window.removeEventListener('resize', handleResize);renderer.dispose();});});return {threeCanvas};}
};
</script><style scoped>
/* 可以根據需要添加一些樣式 */
</style>
3. 代碼解析
3.1 創建 Three.js 場景和相機
-
scene：我們首先創建了一個 Three.js 的場景，它是所有 3D 對象的容器。 -
camera：然后我們創建了一個透視相機，設置了視野角度、縱橫比、最近可視距離和最遠可視距離。相機的位置會影響我們看到的場景。
3.2 創建渲染器
我們使用了 THREE.WebGLRenderer 創建了一個 WebGL 渲染器，并通過 setSize 方法設置了渲染器的寬度和高度，使得渲染器能夠適應瀏覽器窗口的尺寸。
3.3 創建 3D 立方體
接著，我們創建了一個 THREE.BoxGeometry 立方體幾何體，并為它指定了一個綠色的材質 THREE.MeshBasicMaterial。最后，通過 THREE.Mesh 將幾何體和材質組合成一個 3D 物體，并將其添加到場景中。
3.4 動畫效果
為了讓立方體旋轉，我們創建了一個 animate 函數，并通過 requestAnimationFrame 來使動畫保持連續運行。在每一幀中，立方體會順時針旋轉，效果非常流暢。
3.5 處理窗口尺寸變化
為了響應窗口尺寸變化，我們監聽了 resize 事件。當窗口大小發生變化時，我們會調整渲染器的尺寸，并重新計算相機的縱橫比，以確保畫面不會變形。
3.6 組件銷毀時的清理工作
當組件銷毀時，我們會移除 resize 事件監聽器，并釋放渲染器的資源，以避免內存泄漏。
4. 結果展示
當你在頁面中加載這個 Vue 組件時，你會看到一個綠色的立方體，它會隨著頁面加載而旋轉。并且當你調整瀏覽器窗口大小時，立方體的顯示效果會自動調整。
?
(34))
