Three.js入门：初探其表象

### 什么是Three.js？
Three.js是一个开源的Javascript库，用于在网页上创建3D图形。它基于WebGL技术，极大地简化了3D图形的编程工作，使得开发者能够更容易地在网页上实现复杂的3D效果。

#### Canvas与WebGL
- **Canvas**：作为HTML5的一部分，Canvas提供了一个二维绘图表面，可以用来绘制图形和动画。然而，Canvas仅限于2D绘图，对于需要3D效果的应用来说显得力不从心。
- **WebGL**：WebGL是一种低级3D绘图协议，允许Javascript和OpenGL ES 2.0之间进行交互，通过硬件加速渲染3D图像。WebGL为HTML5 Canvas提供了强大的3D绘图能力，使开发者能够在浏览器中展示复杂的3D场景和模型。

### Three.js的核心组件
Three.js的主要组成部分包括场景（Scene）、相机（Camera）和渲染器（Renderer）。这三个元素共同作用，实现了3D场景的创建与呈现。

- **场景**：包含所有可见对象，如模型和灯光。
- **相机**：定义了观察者的视角，决定了如何查看场景中的对象。
- **渲染器**：负责将场景中的对象通过相机的视角渲染到屏幕上。

### 示例代码
接下来，我们将通过一个简单的示例来了解Three.js的基本用法。

#### 创建场景
```Javascript
var scene = new THREE.Scene();
```

#### 添加光源
为了使场景中的物体可见，需要添加光源。
```Javascript
var light = new THREE.PointLight(0xffffff); // 创建一个白色点光源
light.position.set(300, 400, 200); // 设置光源位置
scene.add(light); // 将光源添加到场景中
```

#### 添加模型
接下来，我们添加一个基本的立方体模型。
```Javascript
var geometry = new THREE.BoxGeometry(100, 100, 100); // 创建一个立方体几何体
var material = new THREE.MeshLambertMaterial({ color: 0xff0000 }); // 创建材质，设置颜色为红色
var mesh = new THREE.Mesh(geometry, material); // 创建网格模型
scene.add(mesh); // 将模型添加到场景中
```

#### 设置相机
为了观察场景，需要设置一个相机。
```Javascript
var camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000); // 创建透视相机
camera.position.set(200, 200, 200); // 设置相机位置
camera.lookAt(scene.position); // 相机看向场景中心
```

#### 渲染场景
最后，使用渲染器将场景渲染到DOM中。
```Javascript
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器尺寸
document.body.appendChild(renderer.domElement); // 将渲染器添加到body中
renderer.render(scene, camera); // 渲染场景
```

至此，一个简单的Three.js示例就完成了。通过上述步骤，你可以在浏览器中看到一个带有红色立方体的3D场景。