Three.js 梦开始的地方：Scene、Camera、Render、Mesh

0. 写在开头

本文秉承Talk is cheap, show me the code原则，做到文字精简，一切交由代码~

1. three.js 应用的基石

Scene：场景是我们能看到的一切的载体

Camera：透过投影仪查看场景

Renderer：渲染器将透过Camera观察到的每一帧Scene绘制到<canvas>中

Mesh：网格是计算机图形学中最常见的可见对象

场景、投影仪、渲染器再加上可见对象组成了应用的基石

2. Scene

创建 Scene

const scene = new Scene()

场景定义了三维的笛卡尔坐标系，里边的物体都是基于这个坐标系移动

场景及场景中的物体构成了一个树结构，场景位于根节点

3. Camera

创建 Camera

const container = document.getElementById('container') // 应用容器

const fov = 45 // 视角
const aspect = container.width / container.height // 投影宽高比
const near = 0.1 // 可视近点
const far = 1000 // 可视远点
const camera = new PerspectiveCamera(fov, aspect, near, far) // 透视投影仪

投影仪可选类型，传参配置项都不同

0. Camera（基类） (opens new window)
1. PerspectiveCamera（透视） (opens new window)
2. OrthographicCamera（正交） (opens new window)
3. CubeCamera（立方） (opens new window)
4. StereoCamera（立体） (opens new window)

4. Renderer

创建 Render

const renderer = new WebGLRenderer() // WebGL渲染器

5. Mesh

创建 Mesh

Mesh由几何体和材质构成

const width = 2
const height = 2
const depth = 2
const geomery = new BoxBufferGeometry(width, height, depth) // 立方几何体

const material = new MeshBasicMaterial() // 基础网格材质

const mesh = new Mesh(geometry, material) // 网格

6. 构建场景

1. 获取应用容器
2. 创建Scene、Camera、Renderer，并初始化
3. 创建Mesh，并加入到Sene中
4. 通过Renderer渲染场景

// 1.获取应用容器
const container = document.getElementById('container') // 应用容器

// 2.创建Scene、Camera、Renderer，并初始化
const scene = new Scene() // 场景
scene.background = new Color('pink') // 设置背景颜色

const camera = new PerspectiveCamera(45, container.width / container.height, 0.1, 1000) // 透视投影仪
camera.position.set(0, 0, 10) // 设置投影点坐标，默认为(0, 0, 0)

const renderer = new WebGLRanderer() // WebGL渲染器
renderer.setSize(container.width, container.height) // 设置渲染器大小
renderer.setPixelRatio(window.devicePixelRatio) // 设置渲染像素比为设备像素比dpr，防止模糊

// 3.创建Mesh，并加入到Sene中
const geomery = new BoxBufferGeometry(width, height, depth) // 立方几何体
const material = new MeshBasicMaterial() // 基础网格材质
const mesh = new Mesh(geometry, material) // 网格
scene.add(mesh) // 向场景中加入物体

// 4.通过Renderer渲染场景
container.append(render.domElement) // 将渲染器生成的<canvas>添加到父容器中
renderer.render(scene, camera) // 透过camera将观察到的sene绘制到<canvas>中

参考

1. Welcome to Discover three.js! (opens new window)
2. 最官方的官方文档 (opens new window)