Three.js 三大基石：渲染器、场景与相机

Three.js 三大基石：渲染器、场景与相机

Three.js 是构建WebGL应用的强大框架，其核心由三大组件构成：渲染器(Renderer)、场景(Scene)和相机(Camera)。

1. 渲染器(Renderer)

渲染器是将3D场景绘制到2D屏幕的核心组件。WebGLRenderer是最常用的渲染器：

// 创建WebGL渲染器
const renderer = new THREE.WebGLRenderer
();
renderer.setSize(window.innerWidth, 
window.innerHeight);
document.body.appendChild(renderer.
domElement);

关键功能：

• 初始化WebGL上下文
• 设置渲染尺寸
• 将canvas元素添加到DOM
• 执行渲染循环

2. 场景(Scene)

场景是3D对象的容器，构成完整的3D世界：

// 创建场景
const scene = new THREE.Scene();
scene.background = new THREE.Color
(0x000000); // 设置背景色

// 添加物体
const geometry = new THREE.BoxGeometry
();
const material = new THREE.
MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, 
material);
scene.add(cube);

场景管理：

• 3D对象层级结构
• 光照环境
• 雾效等全局效果

3. 相机(Camera)

相机决定从什么角度观察场景。常用透视相机(PerspectiveCamera)：

// 创建透视相机
const camera = new THREE.
PerspectiveCamera(
  75, // 视野角度(FOV)
  window.innerWidth / window.
  innerHeight, // 宽高比
  0.1, // 近裁剪面
  1000 // 远裁剪面
);
camera.position.z = 5; // 设置相机位置

相机类型：

• 透视相机(3D效果)
• 正交相机(2D效果)
• 阵列相机(多视角)

三者协作

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera); // 关
  键渲染调用
}
animate();

完整示例代码可参考three.js官方文档或示例库中的基础示例。