一、Three.js 簡介

1.1 什么是 Three.js

Three.js 是一款基于原生 WebGL 封裝的輕量級 JavaScript 3D 圖形庫，它對 WebGL 底層復(fù)雜的圖形學(xué)邏輯做了高度封裝，讓開發(fā)者無需掌握 WebGL/著色器/線性代數(shù)知識，僅通過原生 JS 語法，就能在瀏覽器中輕松創(chuàng)建高性能的 3D 場景、模型、動畫與交互效果。

1.2 核心價(jià)值

• 原生 WebGL 開發(fā)門檻極高，需要手動處理頂點(diǎn)著色器、片元著色器、矩陣變換等底層細(xì)節(jié)；
• Three.js 屏蔽所有底層復(fù)雜度，提供了語義化的 API，專注于「3D 業(yè)務(wù)實(shí)現(xiàn)」而非「圖形學(xué)底層」；
• 核心能力：瀏覽器端純前端實(shí)現(xiàn) 3D 可視化，適用于 3D 產(chǎn)品展示、元宇宙場景、數(shù)據(jù)可視化、小游戲、建筑漫游等場景。

1.3 前置學(xué)習(xí)要求

必備：HTML + CSS + JavaScript 基礎(chǔ)（ES6 語法即可）
無需：不用懂 WebGL、不用會 3D 建模軟件、不用懂線性代數(shù)，Three.js 內(nèi)置所有所需工具

1.4 核心坐標(biāo)系規(guī)則（必記）

Three.js 遵循 右手坐標(biāo)系，貫穿所有開發(fā)環(huán)節(jié)，所有幾何體/物體的位置/尺寸都基于此：

• X 軸 → 水平向右
• Y 軸 → 垂直向上
• Z 軸 → 垂直屏幕向外（相機(jī)默認(rèn)看向 -Z 軸方向）

二、Three.js 三大核心基石（缺一不可，重中之重）

任何一個(gè)完整的 Three.js 3D 可視化效果，必須由「場景 + 相機(jī) + 渲染器」三大核心組件構(gòu)成，三者是 3D 世界的基礎(chǔ)，沒有例外，全部掌握才能看到最終的 3D 畫面。

2.1 場景 (Scene) - 3D世界的「容器/舞臺」

核心概念

THREE.Scene() 是一個(gè)無視覺形態(tài)的容器，可以理解成「3D世界的舞臺」，所有的幾何體、光源、相機(jī)、粒子、模型等3D內(nèi)容，都需要添加到場景中才能被管理和渲染。

創(chuàng)建語法

// 創(chuàng)建空的3D場景
const scene = new THREE.Scene();

核心特性

1. 場景本身不可見，僅做「收納」作用；
2. 支持通過 scene.add(物體/光源) 方法，向場景中添加任意3D元素；
3. 支持通過 scene.remove(物體) 方法，移除場景中的指定元素。

2.2 相機(jī) (Camera) - 你的「眼睛/視角」

核心概念

THREE.Camera 是3D世界的觀察者視角，你在瀏覽器屏幕上看到的所有內(nèi)容，本質(zhì)都是「相機(jī)拍攝到的場景畫面」。相機(jī)決定了：從哪個(gè)角度、以什么視野、看場景中的哪些內(nèi)容。

核心常用相機(jī)（99%開發(fā)場景只用這一種）

Three.js 有多種相機(jī)，新手只需掌握「透視相機(jī) PerspectiveCamera」，該相機(jī)模擬人眼的視覺效果，實(shí)現(xiàn)「近大遠(yuǎn)小」的透視關(guān)系，最符合人類的視覺習(xí)慣。

創(chuàng)建語法

// 透視相機(jī)：new THREE.PerspectiveCamera(視角, 寬高比, 近裁剪面, 遠(yuǎn)裁剪面)
const camera = new THREE.PerspectiveCamera(
  75,                // 視角(fov)：越大看到范圍越廣，畫面越廣，默認(rèn)75
  window.innerWidth / window.innerHeight, // 寬高比：與畫布一致，避免畫面拉伸
  0.1,               // 近裁剪面：距離相機(jī)小于該值的物體，不渲染（看不見）
  1000               // 遠(yuǎn)裁剪面：距離相機(jī)大于該值的物體，不渲染（看不見）
);

關(guān)鍵注意點(diǎn)

相機(jī)默認(rèn)創(chuàng)建在場景的坐標(biāo)原點(diǎn) (0,0,0)，與場景中心重合，此時(shí)會和幾何體重疊導(dǎo)致看不到內(nèi)容，必須手動調(diào)整相機(jī)位置，最常用的就是調(diào)整Z軸讓相機(jī)「后退」：

// 相機(jī)沿Z軸向后移動5個(gè)單位，即可看到場景中心的物體
camera.position.z = 5;

2.3 渲染器 (Renderer) - 畫畫的「畫家/畫筆」

核心概念

THREE.WebGLRenderer 是 Three.js 的渲染核心，可以理解成「畫家」，核心作用是：把相機(jī)視角下的場景內(nèi)容，繪制到瀏覽器的 canvas 畫布上，我們最終在頁面上看到的 3D 畫面，就是渲染器的工作成果。

創(chuàng)建語法

// 創(chuàng)建WebGL渲染器
const renderer = new THREE.WebGLRenderer();
// 設(shè)置渲染畫布的尺寸（與瀏覽器窗口一致，滿屏顯示）
renderer.setSize(window.innerWidth, window.innerHeight);
// 將渲染器生成的canvas畫布，添加到HTML頁面中
document.body.appendChild(renderer.domElement);

2.4 三大核心聯(lián)動 - 核心渲染指令（必寫）

擁有了「場景、相機(jī)、渲染器」后，三者唯一的聯(lián)動核心語法，就是執(zhí)行渲染命令，讓渲染器把相機(jī)拍到的場景，繪制到畫布上，這行代碼是所有Three.js程序的核心：

// 語法：渲染器.render(要渲染的場景, 拍攝的相機(jī))
renderer.render(scene, camera);

三、物體形狀：幾何體 Geometry（完整參數(shù)+用法+注意事項(xiàng)）

場景是空的容器，想要在3D世界中看到「物體」，首先需要定義物體的形狀和結(jié)構(gòu) → 這就是「幾何體 Geometry」。
Three.js 中所有可見的3D物體，都是 「幾何體(形狀) + 材質(zhì)(外觀)」 的組合體，幾何體是物體的「骨架」，材質(zhì)是物體的「皮膚」。

核心通用說明

1. 所有幾何體的長度單位：無物理單位，默認(rèn)約定 1 單位 = 1 米，可根據(jù)業(yè)務(wù)自定義縮放；
2. 所有幾何體的分段數(shù)（Segments）：參數(shù)值越大，幾何體的面數(shù)越多、頂點(diǎn)越多，形狀越平滑，但會增加性能開銷；常規(guī)開發(fā)中 16~64 足夠，遠(yuǎn)距離物體可使用更小的值；
3. 所有角度相關(guān)參數(shù)：單位均為 弧度，而非角度（Math.PI = 180°、Math.PI*2 = 360°）；
4. 搭配規(guī)則：如果幾何體使用 MeshStandardMaterial/MeshPhongMaterial/MeshLambertMaterial 等受光照影響的材質(zhì)，必須給場景添加光源，否則物體會顯示純黑色。

3.1 長方體 | BoxGeometry

用途

創(chuàng)建立方體、長方體，是最基礎(chǔ)、最常用的幾何體，適用于盒子、方塊、墻體、立方體模型等場景。

創(chuàng)建語法

// 最簡創(chuàng)建（長寬高為2的正方體）
const boxGeometry = new THREE.BoxGeometry(2, 2, 2);
// 完整語法
const boxGeometry = new THREE.BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments);

完整參數(shù)說明

3.2 圓柱體 | CylinderGeometry

用途

創(chuàng)建標(biāo)準(zhǔn)圓柱、空心圓柱、圓錐臺、管道；特殊用法：頂部半徑設(shè)為0 → 圓錐、掃描角度小于360° → 弧形柱體。

創(chuàng)建語法

// 最簡創(chuàng)建（上下半徑1，高度2，圓周32段的標(biāo)準(zhǔn)圓柱）
const cylinderGeometry = new THREE.CylinderGeometry(1, 1, 2, 32);
// 完整語法
const cylinderGeometry = new THREE.CylinderGeometry(radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength);

完整參數(shù)說明

3.3 球體 | SphereGeometry

用途

創(chuàng)建完整球體、半球、球殼、扇形球等，適用于球體模型、星球、圓球物體等場景。

創(chuàng)建語法

// 最簡創(chuàng)建（半徑1，32段經(jīng)線、32段緯線的標(biāo)準(zhǔn)球體）
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32);
// 完整語法
const sphereGeometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength);

完整參數(shù)說明

優(yōu)化建議：widthSegments ≥32 、heightSegments ≥16 即可保證球體足夠平滑。

3.4 圓錐體 | ConeGeometry

用途

創(chuàng)建標(biāo)準(zhǔn)圓錐、扇形圓錐、尖塔等模型，是圓柱體的特殊形態(tài)（頂部半徑固定為0）。

創(chuàng)建語法

// 最簡創(chuàng)建（底面半徑1，高度2，圓周32段的標(biāo)準(zhǔn)圓錐）
const coneGeometry = new THREE.ConeGeometry(1, 2, 32);
// 完整語法
const coneGeometry = new THREE.ConeGeometry(radius, height, radialSegments, heightSegments, openEnded, thetaStart, thetaLength);

完整參數(shù)說明

3.5 矩形平面 | PlaneGeometry

用途

創(chuàng)建無限薄的2D矩形平面，適用于地面、墻面、UI背景、廣告牌、畫布等場景，是使用率極高的幾何體。

創(chuàng)建語法

// 最簡創(chuàng)建（寬5、高5的矩形平面）
const planeGeometry = new THREE.PlaneGeometry(5, 5);
// 完整語法
const planeGeometry = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments);

完整參數(shù)說明

關(guān)鍵注意：PlaneGeometry 默認(rèn)創(chuàng)建在 XY 平面，如果需要作為「地面」使用，需要繞X軸旋轉(zhuǎn)90°，讓平面落在 XZ 平面：

plane.rotation.x = -Math.PI / 2;

3.6 圓形平面 | CircleGeometry

用途

創(chuàng)建無限薄的2D圓形平面、扇形平面，適用于圓形地面、雷達(dá)圖、指示器、餅圖、圓形畫布等場景。

創(chuàng)建語法

// 最簡創(chuàng)建（半徑1，32段的標(biāo)準(zhǔn)圓形）
const circleGeometry = new THREE.CircleGeometry(1, 32);
// 完整語法
const circleGeometry = new THREE.CircleGeometry(radius, segments, thetaStart, thetaLength);

完整參數(shù)說明

實(shí)用技巧：創(chuàng)建1/4圓 → thetaLength: Math.PI/2，創(chuàng)建半圓 → thetaLength: Math.PI。

四、幾何體通用優(yōu)化與注意事項(xiàng)（必看）

1. 分段數(shù)的取舍：分段數(shù)越高，幾何體越平滑，但頂點(diǎn)和面數(shù)越多，渲染性能越低。常規(guī)開發(fā)中，16~64段 是「平滑度+性能」的最優(yōu)解，無需盲目調(diào)高；
2. 幾何體復(fù)用：同一個(gè)幾何體可以綁定多個(gè)不同材質(zhì)，生成多個(gè)不同外觀的物體，能極大節(jié)省內(nèi)存，優(yōu)化性能；
3. 尺寸縮放：如果需要調(diào)整已創(chuàng)建幾何體的大小，無需重新創(chuàng)建，可通過物體的 scale 屬性縮放：cube.scale.set(2,2,2)（長寬深放大2倍）；
4. 位置調(diào)整：幾何體默認(rèn)創(chuàng)建在場景坐標(biāo)原點(diǎn)，可通過物體的 position 屬性調(diào)整位置：cube.position.set(1,2,3)。

核心知識總結(jié)（必記）

1. Three.js 三大核心：Scene(場景) + Camera(相機(jī)) + Renderer(渲染器)，缺一不可，核心渲染指令：renderer.render(scene, camera)；
2. 右手坐標(biāo)系規(guī)則：X右、Y上、Z外，相機(jī)默認(rèn)看向 -Z 軸，必須調(diào)整相機(jī)位置才能看到物體；
3. 幾何體是物體的「骨架」，材質(zhì)是物體的「皮膚」，二者組合成可渲染的3D物體；
4. 所有幾何體的分段數(shù)是「平滑度」和「性能」的權(quán)衡，按需設(shè)置即可；
5. 受光照影響的材質(zhì)，必須搭配光源使用，否則物體全黑。

到此這篇關(guān)于Three.js學(xué)習(xí)筆記之簡介與幾何體的文章就介紹到這了,更多相關(guān)Three.js幾何體內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！