3D 图形的绘制

Three.js 洛城风起

如何在网页中绘制 3D 场景?

什么是 3D 图形?

现实世界里，三维空间有真实的距离空间，人眼有一个特性，近大远小，这样就会形成立体感。

然而，计算机屏幕是平面二维的，我们之所以能看到真如实物般的三维图像，是因为显示在计算机屏幕上色彩灰度的不同而使人眼产生视觉上的错觉。三维物体边缘的凸出部分一般显高亮度色，而凹下去的部分或背部由于受光线的遮挡而显暗色，这样就会让我们将二维图形感知为三维图形了。

OpenGL、WebGL 是什么？

OpenGL 大概许多人都有所耳闻，它是最常用的跨平台图形库。

WebGL 是基于 OpenGL 设计的面向web的图形标准，提供了一系列 JavaScript API，通过这些 API 进行图形渲染将得以利用图形硬件获得高性能。

然而 .. WebGL 开发门槛?

应运而生的 Three.js

Three.js 是通过对 WebGL 接口的封装与简化而形成的一个易用的图形库。

所以，出现了一批封装库如 Babylon、PhiloGL、SceneJS、CopperLicht、ThreeJS

本次分享将重点介绍，如何使用 Threejs 让3D可视化开发不再复杂。

基本概念

Three.js 里面的概念和现实生活很类似。当我们用眼睛看周围的世界，必要的条件是存在三维空间和眼睛。Three.js里面我们也需要搭建一个三维的空间（场景），我们也需要一个观察这个三维空间的眼睛（相机）。理论上有了上面的东西就可以了，但是我们最后需要将眼睛看到的东西绘制到网页上，就还有个渲染对象，当然最后还需要有光源，黑天也是看不见东西的。

Three.js 五要素

01 渲染器 / 02 场景

01 渲染器 / 02 场景

渲染器：我们可以把渲染器理解成一个画布，我们将要在这个画布上去画出要展示的东西。
场景：相当于一个舞台，我们需要将展示的东西放在这个舞台上

01 创建渲染器

02 创建场景

03 相机

03 相机

相机：相当于人的眼睛，我们想要看到物体，就需要眼睛去看。
- fov 可视角度
- aspect 实际窗口的纵横比
- near 近处的裁面的距离
- far 远处的裁面的距离

创建相机

04 光源

04 光源

光源：物体需要光照才能看见，不然就是漆黑一片（但是在某些情况下展示物体不需要光源）。

开启光影的条件

  1. 渲染器开启阴影渲染
  2. 光源开启投射阴影
  3. 物体开启投射阴影
  4. 物体开启接收阴影

环境光 AmbientLight(color)

光源颜色会添加到整个场景和所有对象的当前颜色上。

环境光可以放在任意一个位置，不会衰减，不需要设置光强，各个点都一样。

平行光 DirectionalLight(color, intensity)

光源发出的光线可以看作是平行的，类似太阳光。

平行光可设置光照强度，光照越强，显示的颜色越鲜艳，反之显示的颜色越暗淡

点光源 PointLight(color, intensity, distance, decay)

此光源类似照明弹，从一点朝所有的方向发射光线

参数（颜色，强度，距离，衰退）

聚光灯 SpotLight( color, intensity, distance, angle, penumbra, decay)

聚光灯从开始位置以锥形的照射向目标位置发射光线，默认目标位置为原点

半球光 HemisphereLight(skyColor, groundColor, intensity)

半球光是一种位于场景上方，从天空逐渐递减到地面的一种光照，其可以为室外环境模拟更真实的光照效果；当模拟室外光照的时候，可以使用半球光作为基础光照，再添加方向光模拟太阳光

平面光 RectAreaLight(color, intensity, width, height);

平面光是在一个平面上均匀的发射出一个矩形平面，平面光可以用来模拟明亮的窗户或者条形透明物体

光源回顾

  1. 环境光
  2. 平行光
  3. 点光源
  4. 聚光灯
  5. 半球光
  6. 平面光

创建平行光

05 物体

05 物体

一般来说在 Three.js 中一个物体就是一个 Mesh。一个Mesh需要一个 Geometry 和一个 Material 组成。

几何体 Geometry

材质 Material

创建一个正方体

渲染

VR 全景

回到开始，如何绘制这个场景?