[THREEJS]实战-基础三要素

1.1 Three.js 简介

Three.js 是什么
为什么选择 Three.js
Three.js 的应用场景
开发环境搭建

1.2 Three.js 三要素详解

1.2.1 场景（Scene）

概念说明：

场景是 Three.js 中所有物体的容器，是 3D 世界的舞台。所有需要渲染的对象（网格、光源、相机等）都必须添加到场景中。

基本用法：

javascript 复制代码

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000); // 设置背景色
scene.fog = new THREE.Fog(0xffffff, 0, 750); // 添加雾效

核心知识点：

场景的创建与初始化
向场景添加/移除对象
场景背景设置（颜色、纹理、天空盒）
场景雾效（Fog、FogExp2）
场景层级结构管理

1.2.2 相机（Camera）

概念说明：

相机定义了观察 3D 场景的视角和方式，决定了用户能看到什么内容。Three.js 提供了多种相机类型，最常用的是透视相机和正交相机。

基本用法：

javascript 复制代码

// 透视相机（模拟人眼视角）
const camera = new THREE.PerspectiveCamera(
  75,                                   // 视野角度（FOV）
  window.innerWidth / window.innerHeight, // 宽高比
  0.1,                                  // 近裁剪面
  1000                                  // 远裁剪面
);
camera.position.set(0, 0, 5); // 设置相机位置
camera.lookAt(0, 0, 0);       // 相机朝向

核心知识点：

透视相机（PerspectiveCamera）与正交相机（OrthographicCamera）的区别
相机参数详解（FOV、aspect、near、far）
相机位置与朝向控制
相机控制器（OrbitControls、TrackballControls 等）
相机动画与过渡

1.2.3 渲染器（Renderer）

概念说明：

渲染器负责将场景和相机的内容绘制到屏幕上，是连接 Three.js 和浏览器 Canvas 的桥梁。

基本用法：

javascript 复制代码

const renderer = new THREE.WebGLRenderer({
  antialias: true,  // 抗锯齿
  alpha: true       // 透明背景
});
renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染尺寸
renderer.setPixelRatio(window.devicePixelRatio);        // 设置像素比
document.body.appendChild(renderer.domElement);         // 添加到 DOM

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

核心知识点：

WebGLRenderer 的创建与配置
渲染器参数设置（抗锯齿、透明度、色彩空间）
渲染尺寸与像素比
渲染循环与动画帧
多渲染器与多场景渲染
性能监控与优化

1.3 基础几何体与材质

常用几何体（BoxGeometry、SphereGeometry、PlaneGeometry 等）
材质类型（MeshBasicMaterial、MeshStandardMaterial、MeshPhongMaterial 等）
网格（Mesh）的创建与使用
光源基础（AmbientLight、DirectionalLight、PointLight 等）

1.4 坐标系统与变换

Three.js 坐标系统
位置、旋转、缩放变换
本地坐标与世界坐标
对象层级关系