一、創(chuàng)建vue項(xiàng)目?

?新建一個(gè)項(xiàng)目目錄，在集成終端打開，輸入

npm init vite@latest

回車后，依次輸入項(xiàng)目名，選擇vue和js開發(fā)?

然后安裝依賴并運(yùn)行項(xiàng)目

?

?

二、安裝three?

接下來(lái)我們開始安裝three

npm install three

?

?三、Three.js 的運(yùn)行需要4個(gè)條件??

• 場(chǎng)景 (scenes)
• 渲染器 (renderers)
• 相機(jī) (cameras)
• 對(duì)象 (objects)

什么是場(chǎng)景？

在 Three.js 中，場(chǎng)景是一個(gè)非常重要的概念。它類似于一個(gè)容器或者說(shuō)世界，可以包含各種對(duì)象、模型、粒子和燈光等。場(chǎng)景是 Three.js 中的一個(gè)核心組件，它是構(gòu)建一個(gè) 3D 場(chǎng)景所必需的。通過(guò)將不同的對(duì)象添加到場(chǎng)景中，我們可以創(chuàng)建一個(gè)復(fù)雜的 3D 環(huán)境，從而實(shí)現(xiàn)更加生動(dòng)、吸引人的 3D 體驗(yàn)。

什么是渲染器？

渲染器是一個(gè)非常重要的組件，它的工作是將我們的代碼與設(shè)計(jì)渲染到我們的web中。在threejs中，我們通常使用?WebGLRenderer?類來(lái)進(jìn)行渲染。WebGL是一種3D繪圖標(biāo)準(zhǔn)，它允許我們?cè)趙eb上呈現(xiàn)復(fù)雜的3D圖形，而不需要插件，這是非常棒的。 WebGLRenderer的一個(gè)偉大之處在于它提供了豐富的功能，例如對(duì)材質(zhì)、燈光、陰影和反射的支持。這使得我們能夠創(chuàng)建出更加逼真的場(chǎng)景和模型，從而提高用戶體驗(yàn)。總之，渲染器是任何三維場(chǎng)景的重要組成部分，也是threejs中不可或缺的組件。

什么是對(duì)象？

在 Three.js 中，所有的元素都是對(duì)象，包括幾何體、模型、粒子和燈光等。這些對(duì)象可以應(yīng)用不同的材質(zhì)和紋理，并使用相機(jī)和光源進(jìn)行渲染。 Three.js 還提供了許多擴(kuò)展和庫(kù)，例如 MeshStandardMaterial 和 dat.gui，可以讓你創(chuàng)建更高級(jí)的渲染效果和用戶界面。

什么是相機(jī)？

在 Three.js 中，相機(jī)是非常重要的一個(gè)元素，用來(lái)決定我們觀察場(chǎng)景的角度和位置。相機(jī)被用來(lái)模擬人眼對(duì)場(chǎng)景的觀察，因此非常重要。在 Three.js 中，創(chuàng)建相機(jī)非常簡(jiǎn)單，我們可以使用?PerspectiveCamera?類來(lái)創(chuàng)建。這個(gè)類允許我們?cè)O(shè)置許多參數(shù)，例如視角、寬高比、近截面和遠(yuǎn)截面等等，因此我們可以完全控制相機(jī)的行為。

另外，在 Three.js 中，相機(jī)本身是不可見的，它僅用于計(jì)算和確定場(chǎng)景中物體的位置和角度。因此，我們只能看到相機(jī)所觀察到的內(nèi)容，而不能看到相機(jī)本身。這意味著，我們需要在場(chǎng)景中加入其他可見的對(duì)象，例如物體、燈光等等，才能看到場(chǎng)景。因此，在使用 Three.js 時(shí)，不僅需要了解相機(jī)的使用，還需要了解如何創(chuàng)建和操作其他類型的對(duì)象。

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
fov — 攝像機(jī)視錐體垂直視野角度 aspect — 攝像機(jī)視錐體長(zhǎng)寬比 near — 攝像機(jī)視錐體近端面 far — 攝像機(jī)視錐體遠(yuǎn)端面

在Three.js中，我們可以擁有多個(gè)相機(jī)，但通常情況下只需要一個(gè)。

相機(jī)在Three.js中類似于一個(gè)錐形體，它受到視野范圍和縱橫比的影響。

視野范圍：

視野是你的視角有多大。如果你使用一個(gè)非常大的角度，你將能夠同時(shí)看到各個(gè)方向，但會(huì)失真很多，因?yàn)榻Y(jié)果將繪制在一個(gè)小矩形上。如果使用小角度，則物體看起來(lái)會(huì)被放大。

概念圖示：相機(jī)在場(chǎng)景中的位置示意圖：

?

那么如何將渲染到指定的位置呢？

在這種情況下，我們需要理解笛卡爾坐標(biāo)系（這個(gè)比較難解釋，所以這里我們使用圖片來(lái)解釋），通過(guò)x，y，z三個(gè)坐標(biāo)軸在三維空間中進(jìn)行定位。在WebGL與Threejs中使用的是正交右手坐標(biāo)系：

• 正交右手坐標(biāo)系：右手拇指代表X軸，食指代表Y軸，中指代表Z軸。
• 手臂和拇指代表Y軸。
• 與地面平行的是Z軸。
• 拇指代表X軸。

?

?四、創(chuàng)建3d物體

在App.vue中

<script setup>
// 引入three
import * as THREE from "three";// 創(chuàng)建場(chǎng)景
const scene = new THREE.Scene();// 創(chuàng)建相機(jī)
const camera = new THREE.PerspectiveCamera(45, //視角,視角越大，看的東西越多window.innerWidth / window.innerHeight, //寬高比0.1, //近平面，相機(jī)最近看到的物體1000 //遠(yuǎn)平面，相機(jī)最遠(yuǎn)看到的物體
);// 創(chuàng)建渲染器,最終由渲染器渲染到canvas畫布上
const renderer = new THREE.WebGL1Renderer();
// 設(shè)置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 設(shè)置好大小之后，將畫布添加到頁(yè)面的body上
document.body.appendChild(renderer.domElement);// 創(chuàng)建幾何體,下面創(chuàng)建的是正方體
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 創(chuàng)建材質(zhì),不同材質(zhì)效果是不同的,下面設(shè)置的是基礎(chǔ)的黃色的材質(zhì)
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 創(chuàng)建網(wǎng)格,將幾何體和材質(zhì)都傳進(jìn)去（形成物體）
const cube = new THREE.Mesh(geometry, material);// 最后將網(wǎng)格添加到場(chǎng)景當(dāng)中，我們才能看到它
scene.add(cube);
// 設(shè)置相機(jī)位置，表示我們要在哪個(gè)位置看這個(gè)物體
camera.position.z = 5; //xy軸不設(shè)置默認(rèn)為0
// 設(shè)置相機(jī)看向原點(diǎn)
camera.lookAt(0, 0, 0);// 渲染函數(shù)
function animate() {requestAnimationFrame(animate);// 旋轉(zhuǎn),對(duì)立方體進(jìn)行旋轉(zhuǎn)cube.rotation.x += 0.01;cube.rotation.y += 0.01;// 渲染，每次旋轉(zhuǎn)后都調(diào)用這個(gè)渲染函數(shù)renderer.render(scene, camera);
}
animate();
</script><template></template><style>
* {margin: 0;padding: 0;
}
canvas {display: block;position: fixed;left: 0;top: 0;width: 100vw;height: 100vh;
}
</style>

效果：由于我們?cè)O(shè)置的是從z軸看這個(gè)正方體，因此正對(duì)z軸看到的是平面

如果我們想要不斷的渲染，讓它動(dòng)起來(lái)，看到它不同方位的形狀，需要調(diào)用渲染函數(shù)，如下所示

將上面的靜態(tài)渲染改為下面的旋轉(zhuǎn)動(dòng)畫渲染

// 渲染函數(shù)
function animate() {requestAnimationFrame(animate)// 旋轉(zhuǎn),對(duì)立方體進(jìn)行旋轉(zhuǎn)cube.rotation.x += 0.01cube.rotation.y += 0.01// 渲染，每次旋轉(zhuǎn)后都調(diào)用這個(gè)渲染函數(shù)renderer.render(scene, camera)
}
animate()

效果如下：?

此時(shí)就完成了在vue中開發(fā)的一個(gè)簡(jiǎn)單的3d頁(yè)面?~