3D 技術已經不再是游戲引擎的專屬，隨著瀏覽器技術的發展，我們完全可以在網頁上實現令人驚艷的 3D 效果。而 Three.js，作為 WebGL 的封裝庫，讓 Web 3D 的大門向更多開發者敞開了。
這是我開啟這個 Three.js 專欄的第一篇文章，我們將簡單認識一下 Three.js，并為后續的項目開發打下基礎。
🔍 什么是 Three.js？
Three.js 是一個 JavaScript 3D 庫，它封裝了 WebGL，使開發者可以用更簡單的方式在瀏覽器中創建和展示 3D 內容。
通過 Three.js，你可以輕松實現以下效果：
- 🧱 創建 3D 模型和場景
- 🖼? 加載紋理和材質
- 💡 添加光照、陰影、動畫等
- 🎮 控制攝像機視角、交互行為
適合以下人群：
- 想讓網頁更酷的前端開發者
- 想快速構建可視化場景的可視化工程師
- 想把 3D 應用到展示中的設計師
? 你可以做什么？
以下是 Three.js 常見的使用場景：
- 🛍? 產品展示（3D 鞋子、家具、模型旋轉等）
- 📊 數據可視化（地球、地圖、圖表）
- 🧑?💻 個人主頁（酷炫背景、交互動畫）
- 🎮 小型 3D 游戲開發
🧰 常用資源推薦
| 名稱 | 簡介 | 鏈接 |
|---|---|---|
| 官網 | Three.js 官方網站 | https://threejs.org |
| 文檔 | 官方 API 文檔 | https://threejs.org/docs/ |
| 示例 | 各種 Three.js 示例 | https://threejs.org/examples/ |
| GitHub | 項目源碼倉庫 | https://github.com/mrdoob/three.js |
| React Three Fiber | React 開發者專用封裝 | https://docs.pmnd.rs/react-three-fiber |
| 模型/紋理下載 | 免費素材庫 | https://sketchfab.com, https://poly.pizza, https://readyplayer.me/ |
| Three.js中文網 | 其他博主網站 | http://www.webgl3d.cn/pages/4a14ce/ |
🚀 Hello Three.js！
先放一個最簡單的示例：創建一個旋轉的立方體 👇，你可以在菜鳥教程運行下面示例：在線運行html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Hello Three.js!</title><style>body { margin: 0; }</style></head><body><script src="https://unpkg.com/three@0.160.1/build/three.min.js"></script><script>// 創建場景const scene = new THREE.Scene();// 創建相機const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.z = 5;// 創建渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 創建幾何體和材質const geometry = new THREE.BoxGeometry();const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });const cube = new THREE.Mesh(geometry, material);scene.add(cube);// 動畫循環function animate() {requestAnimationFrame(animate);cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);}animate();</script></body>
</html>
🔮 下一篇預告
接下來我們將手把手寫一個更完整的場景，講解：
-
如何添加多個物體
-
如何設置光源與陰影
-
如何實現用戶交互（如鼠標旋轉控制）
后續我們還會結合 React 使用 react-three-fiber 構建一個炫酷的個人主頁項目 🖥??
)
(詳解))
時自動輸出COCO指標(AP)：2025最新配置與代碼詳解 (小白友好 + B站視頻))
