? ? ? ? 嗨，我是小路。今天主要和大家分享的主題是“threejs 安裝教程”。? ? ? ??

在當今的數字化時代，用戶對視覺體驗的要求越來越高。傳統的2D網頁已經無法滿足所有需求，而三維（3D）圖形技術則為前端開發者提供了新的方向。

Three.js 是一個強大的 JavaScript 庫，專門用于創建和展示復雜的3D圖形，并且可以直接在瀏覽器中運行。本文將為你詳細介紹在項目開發過程中如何創建vue3項目，并在vue3結合Three.js進行3D網頁的開發，幫助你快速入門并創建令人驚嘆的3D網頁應用。

一、創建vue3項目

1.安裝nvm

注意：想要創建vue3項目，前提是安裝對應的nodejs。在實際的開發中，我們經常會遇到不同的項目使用不同的nodejs版本，就會出現頻繁切換nodejs的情況。為了解決這個問題，推薦小伙伴們使用nvm安裝nodejs。具體的安裝教程，可以點擊查看以下鏈接：NVM 重新設置開發環境-CSDN博客

2.安裝vue3

注意：在安裝nvm時，注意下載對應的nodejs版本。這個項目中主要使用的nodejs是18.20.2版本。在nodejs安裝完成之后，緊接著安裝對應的vite，并運用vite創建vue項目。具體的步驟可以參考以下的npm命令：

#安裝vite
npm install vite --save-dev   #創建vue項目
npm create vite myCase1 --template vue#項目初始化  進入到myCase1項目，安裝對應的依賴
cd myCase1
npm install
#啟動項目
npm run dev

3.安裝vue-router

注意：router的安裝步驟，可以參考以下鏈接：
vue3 創建vue-router-CSDN博客

vue2 配置router_vue2 router.js-CSDN博客

二、安裝threejs

1、vue安裝threejs

// 比如安裝148版本
npm install three@0.148.0 --save

3、加載three.js

three.js依賴可以直接在對應的頁面中進行加載。如下圖：

3、按照概念搭建示例

<template><div class="pageBox"><div class="leftBox" ref="leftRef"></div><div class="rightBox"></div></div></template>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import * as THREE from 'three';
// 引入軌道控制器擴展庫OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 設置相機控件軌道控制器OrbitControls
const leftRef = ref();
// 定義相機輸出畫布的尺寸(單位:像素px)
let width = 800; //寬度
let height = window.innerHeight; //高度
// 創建3D場景對象Scene
const scene = new THREE.Scene();// 實例化一個透視投影相機對象
const camera = new THREE.PerspectiveCamera(50, width / height, 2, 6000);//創建一個長方體幾何對象Geometry
const geometry = new THREE.BoxGeometry(50, 50, 50);//創建一個材質對象Material
const material = new THREE.MeshBasicMaterial({color: 0xff0000,//0xff0000設置材質顏色為紅色
});
//將集合形體和材質融合
const mesh = new THREE.Mesh(geometry, material); //網格模型對象Mesh// 創建渲染器對象
const renderer = new THREE.WebGLRenderer();onMounted(() => {initData()render();//添加相機空間const controls = new OrbitControls(camera, renderer.domElement);// 如果OrbitControls改變了相機參數，重新調用渲染器渲染三維場景controls.addEventListener('change', function () {renderer.render(scene, camera); //執行渲染操作});//監聽鼠標、鍵盤事件//當窗口發生改變時，觸發時間，重新渲染window.onresize = () => {height = window.innerHeight;width = window.innerWidth / 2;renderer.setSize(width, height); //設置three.js渲染區域的尺寸(像素px)initData()}
})
const initData = () => {//設置網格模型在三維空間中的位置坐標，默認是坐標原點mesh.position.set(0, 10, 0);scene.add(mesh);//相機在Three.js三維坐標系中的位置// 根據需要設置相機位置具體值camera.position.set(200, 200, 200);camera.lookAt(mesh.position);//指向mesh對應的位置// AxesHelper：輔助觀察的坐標系const axesHelper = new THREE.AxesHelper(150);scene.add(axesHelper);renderer.setSize(width, height); //設置three.js渲染區域的尺寸(像素px)//將innerHTML置空，避免append重復添加渲染leftRef.value.innerHTML = ''leftRef.value.append(renderer.domElement);
}
//渲染
const render = () => {renderer.render(scene, camera); //執行渲染操作mesh.rotateY(0.01);//每次繞y軸旋轉0.01弧度mesh.rotateX(0.01);//每次繞x軸旋轉0.01弧度mesh.rotateZ(0.01);//每次繞z軸旋轉0.01弧度//重復渲染requestAnimationFrame(render);//請求再次執行渲染函數render，渲染下一幀
}</script>
<style scoped lang="less">
.pageBox {width: 100%;height: 100vh;padding: 0;margin: 0;display: flex;justify-content: space-between;align-items: center;.rightBox {width: 100%;height: 100%;background: yellow;}
}
</style>

三、回顧反思

1.項目流程

注意：視圖效果基礎的三要素是場景、相機和渲染。

第一步將需要創建的幾何形和材質融合在一起，形成新的對象；第二步將相機聚焦新對象的位置，在屏幕展示出來；最后再將整個項目進行持續渲染，呈現整個3D模型渲染效果。

其它項目的不同就是在這基礎上進行進行細化，深化。

2.遇到頁面高寬變動時，幾何圖形運轉加快

注意：在渲染的過程中，注意將innerHTML進行清空，因為append會將項目加載在父類上，不會刪除原來存在的實例，會直接在父類的末尾添加子元素，導致幾何體在一個定位上重復添加，呈現快速轉動的效果。

希望這篇推廣文能夠幫助你更好地理解和使用 Three.js，激發你的創造力，讓你在3D網頁開發的世界里大放異彩！既然都看到這里了，記得【點贊】+【關注】+【收藏】喲。

參考文章：

3. 開發和學習環境，引入threejs | Three.js中文網