本文檔旨在為初學者提供一個全面的 Three.js 入門指南。我們將從 Three.js 的基本概念開始，逐步介紹如何創建場景、添加物體、設置材質、使用光照和相機，以及如何實現簡單的動畫和交互。通過本教程，你將能夠掌握 Three.js 的核心知識，并為進一步學習和開發復雜的 3D 應用打下堅實的基礎。
1. Three.js 簡介
Three.js 是一個基于 JavaScript 的 3D 圖形庫，它簡化了 WebGL 的使用，允許開發者使用更高級別的 API 創建和渲染 3D 場景。WebGL 本身是一個底層的圖形 API，直接操作起來比較復雜，而 Three.js 封裝了 WebGL 的許多細節，使得開發者可以更專注于場景的構建和交互邏輯。
Three.js 的主要特點：
- 易于使用： 提供了簡潔的 API，降低了 3D 圖形開發的門檻。
- 跨平臺： 基于 WebGL，可以在支持 WebGL 的瀏覽器上運行。
- 豐富的特性： 支持各種 3D 模型格式、材質、光照、陰影、動畫等。
- 活躍的社區： 擁有龐大的用戶群體和豐富的資源。
2. 環境搭建
在使用 Three.js 之前，需要先搭建開發環境。最簡單的方式是直接在 HTML 文件中引入 Three.js 的 CDN 鏈接。
<!DOCTYPE html>
<html><head><title>Three.js 教程</title><style>body {margin: 0;}canvas {display: block;}</style></head><body><script src="https://cdn.jsdelivr.net/npm/three@0.155.0/build/three.min.js"></script><script>// Three.js 代碼將在這里編寫</script></body>
</html>
也可以使用 npm 安裝 Three.js，并在項目中使用模塊化的方式引入。
npm install three
import * as THREE from 'three'
3. 基本概念
Three.js 中有幾個核心概念需要理解：
- Scene (場景)： 3D 世界的容器，所有物體、光照和相機都添加到場景中。
- Camera (相機)： 定義了觀察場景的視角。
- Renderer (渲染器)： 將場景渲染到屏幕上。
- Geometry (幾何體)： 定義了物體的形狀，例如立方體、球體等。
- Material (材質)： 定義了物體的外觀，例如顏色、紋理等。
- Mesh (網格)： 幾何體和材質的組合，是場景中實際可見的物體。
- Light (光照)： 照亮場景，影響物體的顏色和陰影。
4. 創建第一個 Three.js 場景
下面是一個簡單的 Three.js 場景，包含一個立方體：
// 1. 創建場景
const scene = new THREE.Scene()// 2. 創建相機
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000
)
camera.position.z = 5// 3. 創建渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)// 4. 創建幾何體
const geometry = new THREE.BoxGeometry(1, 1, 1)// 5. 創建材質
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })// 6. 創建網格
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)// 7. 渲染循環
function animate() {requestAnimationFrame(animate)cube.rotation.x += 0.01cube.rotation.y += 0.01renderer.render(scene, camera)
}animate()
代碼解釋：
-
創建場景：
new THREE.Scene()創建了一個新的場景。 -
創建相機：
new THREE.PerspectiveCamera()創建了一個透視相機，參數分別是：75：視野角度（FOV）。window.innerWidth / window.innerHeight：寬高比。0.1：近平面。1000：遠平面。camera.position.z = 5將相機沿 Z 軸移動 5 個單位，以便觀察立方體。
-
創建渲染器：
new THREE.WebGLRenderer()創建了一個 WebGL 渲染器。
renderer.setSize()設置渲染器的大小，使其與窗口大小一致。
document.body.appendChild(renderer.domElement)將渲染器的 DOM 元素添加到頁面中。 -
創建幾何體：
new THREE.BoxGeometry()創建了一個立方體幾何體，參數分別是立方體的寬度、高度和深度。 -
創建材質：
new THREE.MeshBasicMaterial()創建了一個基礎材質，參數是材質的顏色。 -
創建網格：
new THREE.Mesh()創建了一個網格，將幾何體和材質組合在一起。
scene.add(cube)將立方體添加到場景中。 -
渲染循環：
animate()函數是一個循環，不斷更新場景并渲染。
requestAnimationFrame(animate)請求瀏覽器在下一次重繪之前調用 animate() 函數。
cube.rotation.x += 0.01和cube.rotation.y += 0.01使立方體沿 X 軸和 Y 軸旋轉。
renderer.render(scene, camera)使用相機渲染場景。
5. 幾何體
Three.js 提供了多種幾何體，例如：
THREE.BoxGeometry：立方體。THREE.SphereGeometry：球體。THREE.PlaneGeometry：平面。THREE.CylinderGeometry：圓柱體。THREE.TorusGeometry：圓環。
可以根據需要選擇合適的幾何體，并設置其參數。
6. 材質
Three.js 提供了多種材質，例如：
THREE.MeshBasicMaterial：基礎材質，不受光照影響。THREE.MeshLambertMaterial：Lambert 材質，受光照影響，但沒有鏡面反射。THREE.MeshPhongMaterial：Phong 材質，受光照影響，有鏡面反射。THREE.MeshStandardMaterial：標準材質，基于物理的渲染 (PBR)，更真實。
可以根據需要選擇合適的材質，并設置其顏色、紋理、光澤度等屬性。
7. 光照
Three.js 提供了多種光照，例如：
- THREE.AmbientLight：環境光，照亮整個場景。
- THREE.DirectionalLight：平行光，模擬太陽光。
- THREE.PointLight：點光源，從一個點向四周發光。
- THREE.SpotLight：聚光燈，從一個點向一個方向發光。
需要將光照添加到場景中，才能使物體顯示出顏色和陰影。
8. 動畫
可以使用 requestAnimationFrame() 函數創建動畫。在每一幀中，更新物體的位置、旋轉或縮放，然后重新渲染場景。
9. 交互
可以使用 JavaScript 事件監聽器來處理用戶的交互，例如鼠標點擊、鍵盤按鍵等。可以根據用戶的交互來改變場景中的物體或相機。
10. 總結
本教程介紹了 Three.js 的基本概念和使用方法。通過學習本教程，你應該能夠創建簡單的 3D 場景，并實現簡單的動畫和交互。要深入學習 Three.js，可以參考官方文檔、示例代碼和社區資源。祝你學習愉快！
 114. 二叉樹展開為鏈表 （深度優先搜索dfs+鏈表）)
![[Android] 顯示的內容被導航欄這擋住](http://pic.xiahunao.cn/[Android] 顯示的內容被導航欄這擋住)
)
