JavaScript Three.js基础

JavaScript Three.js基础

Three.js 是一个基于 WebGL 的轻量级 3D 图形库，用于在浏览器中创建和渲染交互式 3D 内容。它简化了 WebGL 的复杂性，使开发者能够更轻松地构建 3D 场景、动画和可视化效果。本章节将介绍 Three.js 的核心概念、基本用法和实际应用案例。

介绍

Three.js 由 Ricardo Cabello（Mr.doob）开发，是目前最流行的 JavaScript 3D 库之一。它提供了以下核心功能：

• **场景（Scene）**：3D 对象的容器，用于管理所有可见元素。
• **相机（Camera）**：定义用户视角，如透视相机（PerspectiveCamera）和正交相机（OrthographicCamera）。
• **渲染器（Renderer）**：将场景和相机渲染到 HTML 画布（Canvas）上。
• **几何体（Geometry）**：定义 3D 对象的形状（如立方体、球体）。
• **材质（Material）**：定义 3D 对象的外观（如颜色、纹理）。
• **光源（Light）**：为场景添加光照效果（如点光源、平行光）。

安装与基本设置

Three.js 可以通过 CDN 或 npm 安装：

  
<!-- 通过 CDN 引入 Three.js -->  
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>

或通过 npm：

  
npm install three

基本示例

以下是一个简单的 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();  
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });  
const cube = new THREE.Mesh(geometry, material);  
scene.add(cube);  

// 5. 渲染循环（动画）  
function animate() {  
    requestAnimationFrame(animate);  
    cube.rotation.x += 0.01;  
    cube.rotation.y += 0.01;  
    renderer.render(scene, camera);  
}  
animate();

输出：一个绿色的立方体在屏幕上旋转。

核心概念详解

场景（Scene）

场景是所有 3D 对象的根容器。可以通过 `THREE.Scene()` 创建，并使用 `scene.add()` 添加对象。

相机（Camera）

Three.js 支持多种相机类型，最常用的是透视相机（`PerspectiveCamera`），其参数包括：

• **fov**（视野角度）
• **aspect**（宽高比）
• **near**（近裁剪面）
• **far**（远裁剪面）

数学公式： $\text{aspect}=\frac{\text{width}}{\text{height}}$

几何体与材质

Three.js 提供了多种内置几何体（如 `BoxGeometry`、`SphereGeometry`）和材质（如 `MeshBasicMaterial`、`MeshPhongMaterial`）。

光源（Light）

光源类型包括：

• `THREE.AmbientLight`（环境光）
• `THREE.DirectionalLight`（平行光）
• `THREE.PointLight`（点光源）

实际案例：3D 地球模型

以下代码展示如何创建一个简单的 3D 地球模型：

  
// 创建地球几何体（球体）  
const geometry = new THREE.SphereGeometry(1, 32, 32);  

// 加载纹理贴图  
const textureLoader = new THREE.TextureLoader();  
const texture = textureLoader.load('earth_texture.jpg');  

// 创建材质  
const material = new THREE.MeshPhongMaterial({ map: texture });  

// 创建地球网格  
const earth = new THREE.Mesh(geometry, material);  
scene.add(earth);  

// 添加光源  
const light = new THREE.DirectionalLight(0xffffff, 1);  
light.position.set(1, 1, 1);  
scene.add(light);

总结

Three.js 是一个强大的工具，适用于游戏开发、数据可视化、虚拟现实等领域。通过本章的学习，你应该掌握了 Three.js 的基本概念和核心功能。下一步可以探索更高级的主题，如：

• 加载 3D 模型（如 GLTF 格式）
• 使用着色器（Shaders）自定义渲染
• 实现物理引擎（如 Cannon.js）

graph LR A[Three.js 基础] --> B[场景与相机] A --> C[几何体与材质] A --> D[光源与动画] B --> E[PerspectiveCamera] C --> F[BoxGeometry] D --> G[requestAnimationFrame]