threejs核心概念

Three.js 是一种基于 WebGL 的 JavaScript 库，用于创建和展示复杂的 3D 和 2D 图形无需插件。以下是 Three.js 中的一些核心概念：

### 1. **Scene（场景）**
- 场景是所有图形、物体、光源和其他元素的容器。你可以在场景中添加各种对象，并对它们进行操作。

### 2. **Camera（相机）**
- 相机决定了用户如何看到场景。Three.js 提供了多种相机类型，如透视相机（PerspectiveCamera）和正交相机（OrthographicCamera）。透视相机适合大多数情况，而正交相机则适用于需要精确测量的距离计算。

### 3. **Renderer（渲染器）**
- 渲染器负责将场景数据转换成图像并呈现到屏幕上。它接收来自相机的数据，并将其发送给浏览器的 GPU 进行处理。

### 4. **Object3D（对象3D）**
- Object3D 是所有图形的基本容器类别，包括几何体、材质、纹理等。所有其他类型的对象都是它的直接或间接子类。

### 5. **Geometry（几何体）**
- 几何体是三维空间中的基本形状，如立方体、球体、圆环等。每个几何体都有其特定的顶点坐标、法线向量和纹理坐标。

### 6. **Material（材质）**
- 材质决定了对象的颜色、光泽度、透明度等视觉属性。材质可以包含纹理，通过 UV 坐标映射到几何体上。

### 7. **Light（光源）**
- 光源为场景提供光线，影响几何体的阴影、颜色和亮度。常见的光源类型有环境光、点光源、聚光灯和方向光源。

### 8. **Shader（着色器）**
- 着色器是定制图形外观的强大工具，允许开发者编写自定义的渲染算法来控制像素颜色。

### 9. **Textures（纹理）**
- 文本图是贴在几何体表面的图片，可以模拟材料的外观，增加细节和复杂性。

### 10. **Loader 和 Exporter**
- Loader 负责加载外部资源文件（如 .obj 或 .gltf），而 exporter 则能够将 Three.js 场景导出为其他格式。

### 实现步骤示例

// 创建一个新的场景
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(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

cube.position.x = -5;
cube.position.y = 0;
cube.position.z = 0;

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  // 更新渲染器
  renderer.render(scene, camera);
}
animate();

以上是一个简单的 Three.js 示例，展示了如何创建场景、相机、渲染器以及动态更新一个旋转的立方体。