three.js 入门：场景初始化探索之旅

2024-02-14 05:02:19







## three.js 场景初始化：构建你的 3D 世界

在 three.js 中，场景是容纳所有三维对象及其交互的虚拟舞台。场景初始化是创建逼真 3D 体验的第一步。让我们从了解场景的组成部分开始：

- **场景图：** 场景图是一个层次结构，组织并管理场景中的所有对象。
- **摄像机：** 摄像机定义了场景的视点，确定观众如何观察虚拟世界。
- **渲染器：** 渲染器负责将场景转换成 2D 图像，以便在屏幕上显示。

## 场景初始化步骤

### 1. 创建场景

```javascript
const scene = new THREE.Scene();

2. 创建摄像机

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

3. 创建渲染器

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

4. 将场景和摄像机添加到渲染器

renderer.render(scene, camera);

5. 渲染循环

为了让场景保持动态和响应，我们需要设置一个渲染循环，它会不断更新场景并将其重新渲染到屏幕上。

function animate() {
  requestAnimationFrame(animate);

  // 更新场景...

  renderer.render(scene, camera);
}

animate();

three.js 库的强大功能

three.js 库提供了一系列强大的功能，简化了场景初始化和管理：

几何体： 用于创建基本 3D 形状，如立方体、球体和圆柱体。
材质： 用于为对象赋予外观和纹理，如颜色、纹理和光泽度。
光源： 用于照亮场景并创建阴影。
动画： 用于为对象创建运动和交互。

实例：创建一个简单的立方体场景

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

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

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();