本文目錄導(dǎo)讀：

1. 引言
2. 1. Three.js簡介
3. 2. 搭建Three.js開發(fā)環(huán)境
4. 3. Three.js進階：光照、紋理與交互
5. 4. Three.js高級應(yīng)用：模型加載與動畫
6. 5. 優(yōu)化與性能調(diào)優(yōu)
7. 6. 實戰(zhàn)案例：構(gòu)建一個3D產(chǎn)品展示網(wǎng)站
8. 7. 總結(jié)

隨著Web技術(shù)的快速發(fā)展,3D交互網(wǎng)站逐漸成為現(xiàn)代網(wǎng)頁設(shè)計的重要趨勢，Three.js作為一款基于WebGL的JavaScript 3D庫，因其易用性和強大功能，成為開發(fā)者構(gòu)建3D交互網(wǎng)站的首選工具，本文將帶領(lǐng)你從Three.js的基礎(chǔ)概念入手，逐步深入實戰(zhàn)開發(fā)，最終掌握3D交互網(wǎng)站的高級技巧。

---

Three.js簡介

1 什么是Three.js？

Three.js是一個開源的JavaScript 3D圖形庫，由Ricardo Cabello（Mr.doob）創(chuàng)建，旨在簡化WebGL的開發(fā)流程，它提供了豐富的API，使開發(fā)者能夠輕松創(chuàng)建3D場景、模型、動畫和交互效果，而無需深入了解復(fù)雜的WebGL底層實現(xiàn)。

2 Three.js的核心概念

• 場景（Scene）：3D對象的容器，相當(dāng)于一個虛擬世界。
• 相機（Camera）：決定用戶如何觀察場景，常用的有透視相機（PerspectiveCamera）和正交相機（OrthographicCamera）。
• 渲染器（Renderer）：負責(zé)將3D場景渲染到2D屏幕上。
• 幾何體（Geometry）：定義3D物體的形狀，如立方體、球體等。
• 材質(zhì)（Material）：決定物體的外觀，如顏色、紋理、光照效果等。
• 網(wǎng)格（Mesh）：幾何體和材質(zhì)的結(jié)合，構(gòu)成可渲染的3D對象。

---

搭建Three.js開發(fā)環(huán)境

1 安裝Three.js

Three.js可以通過多種方式引入項目：

• CDN引入：

  <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>

• npm安裝：

  npm install three

2 創(chuàng)建第一個3D場景

以下是一個簡單的Three.js示例代碼，創(chuàng)建一個旋轉(zhuǎn)的立方體：

import * as THREE from 'three';
// 初始化場景、相機和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 創(chuàng)建立方體
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
// 動畫循環(huán)
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

---

Three.js進階：光照、紋理與交互

1 添加光照

Three.js支持多種光源類型，如環(huán)境光（AmbientLight）、平行光（DirectionalLight）、點光源（PointLight）等，以下示例展示如何添加光照：

const ambientLight = new THREE.AmbientLight(0x404040); // 柔和的環(huán)境光
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);

2 加載紋理

紋理可以讓3D物體更真實,Three.js支持加載圖片作為紋理：

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/texture.jpg');
const material = new THREE.MeshStandardMaterial({ map: texture });

3 實現(xiàn)交互

Three.js可以與鼠標(biāo)、鍵盤等輸入設(shè)備交互，以下示例實現(xiàn)鼠標(biāo)拖動旋轉(zhuǎn)物體：

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 啟用阻尼效果，使旋轉(zhuǎn)更平滑
function animate() {
  requestAnimationFrame(animate);
  controls.update(); // 更新控制器
  renderer.render(scene, camera);
}

---

Three.js高級應(yīng)用：模型加載與動畫

1 加載外部3D模型

Three.js支持加載多種3D模型格式（如GLTF、OBJ、FBX），以下是加載GLTF模型的示例：

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
const loader = new GLTFLoader();
loader.load('path/to/model.glb', (gltf) => {
  scene.add(gltf.scene);
});

2 骨骼動畫

Three.js支持播放3D模型的骨骼動畫：

const mixer = new THREE.AnimationMixer(gltf.scene);
const action = mixer.clipAction(gltf.animations[0]);
action.play();
function animate() {
  requestAnimationFrame(animate);
  mixer.update(deltaTime); // 更新動畫
  renderer.render(scene, camera);
}

---

優(yōu)化與性能調(diào)優(yōu)

1 減少渲染開銷

• 使用THREE.BufferGeometry代替THREE.Geometry以提高性能。
• 合并相同材質(zhì)的幾何體以減少繪制調(diào)用。

2 使用WebGLRenderer的高級功能

• 開啟抗鋸齒（Antialiasing）：

  const renderer = new THREE.WebGLRenderer({ antialias: true });

• 使用陰影：

  renderer.shadowMap.enabled = true;
  directionalLight.castShadow = true;

---

實戰(zhàn)案例：構(gòu)建一個3D產(chǎn)品展示網(wǎng)站

1 項目需求

• 展示3D產(chǎn)品模型（如汽車、家具）。
• 支持鼠標(biāo)拖拽旋轉(zhuǎn)、縮放。
• 添加產(chǎn)品信息面板。

2 實現(xiàn)步驟

1. 使用GLTFLoader加載3D模型。
2. 添加OrbitControls實現(xiàn)交互。
3. 使用CSS3D渲染器創(chuàng)建信息面板。

3 完整代碼示例

// 初始化場景、相機、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 加載模型
const loader = new GLTFLoader();
loader.load('car.glb', (gltf) => {
  scene.add(gltf.scene);
});
// 添加控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 動畫循環(huán)
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();

---

本文從Three.js的基礎(chǔ)概念講起，逐步深入3D交互網(wǎng)站的開發(fā)實戰(zhàn)，涵蓋了光照、紋理、模型加載、動畫和性能優(yōu)化等核心內(nèi)容，通過實際案例，你可以掌握如何利用Three.js構(gòu)建高性能的3D交互網(wǎng)站，隨著WebGPU等新技術(shù)的發(fā)展，Three.js將繼續(xù)引領(lǐng)Web 3D開發(fā)的潮流。

如果你對Three.js感興趣，建議深入學(xué)習(xí)官方文檔（https://threejs.org/）并嘗試更多創(chuàng)意項目，祝你成為3D交互開發(fā)的高手！