带你入门three.js——从0到1实现一个3d可视化地图

前言

终于到周末了，前几篇的文章一直给大家介绍2d，canvas 和svg的一些东西。7月份我打算输出3篇万字长文带大家系统地学习可视化表达的3种方式，svg、canvas、webgl。所以这是第一篇文章3d的。 读完本篇文章，你可以学到什么

1. 对于three.js 这个框架有一个简单的理解，可以入门下。
2. 学习three中的Raycaster，主要是用鼠标来判断当前选择的是哪一个物体。
3. 我用一个简单的实例 带大家用three实现简单的可视化地球案例 。

3d框架的选择——three.js

1.为什么选择three.js

​ 官网对 「Threejs」 的介绍非常简单：“Javascript 3D library”。「openGL」 是一个跨平台3D/2D的绘图标准，「WebGL」 则是「openGL」 在浏览器上的一个实现。web前端开发人员可以直接用「WebGL」 接口进行编程，但 「WebGL」 只是非常基础的绘图API，需要编程人员有很多的数学知识、绘图知识才能完成3D编程任务，而且代码量巨大。「Threejs」 对 「WebGL」 进行了封装，让前端开发人员在不需要掌握很多数学知识和绘图知识的情况下，也能够轻松进行web 3D开发，降低了门槛，同时大大提升了效率。总结来一句话： 就是你不懂计算机图形学，只要理解了three.js的一些基本概念你可以。

Threejs 的基本要素——场景

定义如下：

「场景」：是一个三维空间，所有物品的容器，可以把场景想象成一个空房间，接下来我们会往房间里放要呈现的物体、相机、光源等。

用代码表示就是如下：

const scene = new THREE.Scene();

你就把他想象成一个房间，然后你可以往里面去添加一些物体，加一个正方体哈，加矩形，什么都可以。其实three.js 整个之间的关系是一个 「树形结构」。

Threejs 的基本要素——相机📷

「相机」：Threejs必须要往场景中添加一个相机，相机用来确定位置、方向、角度，相机看到的内容就是我们最总在屏幕上看到的内容。在程序运行过程中，可以调整相机的位置、方向和角度。

three.js 中的相机分为两种一种是正交相机📷 和透视相机📷，接下来我给大家一一介绍，但是理解照相机的情况下，你要先理解一个概念——视椎体

透视相机

视锥体是摄像机可见的空间，看上去像截掉顶部的金字塔。视锥体由6个裁剪面围成，构成视锥体的4个侧面称为上左下右面，分别对应屏幕的四个边界。为了防止物体离摄像机过近，设置近切面，同时为了防止物体离摄像机太远而不可见，设置远切面。

oc 就是照相机的位置， 近平面、和远平面图中已经标注。从图中可以看出，棱台组成的6个面之内的东西，是可以被看到的。 影响透视照相机的大小因素：

1. 摄像机视锥体垂直视野角度 也就是图中的 「a」
2. 摄像机视锥体近端面 也就是图中的 「near plane」
3. 摄像机视锥体远端面 也就是图中的 「far plane」
4. 摄像机视锥体长宽比 「表示输出图像的宽和高之比」

对应的three 中的照相机：

const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );

​ 透视相机最大的特点：就是符合我们人眼观察事物的特点， 近大远小。

近大远小的背后的实现原理就是相机会有一个投影矩阵: 投影矩阵的做的事情很简单，就是把视椎体转换成一个正方体。 所以远截面的点就要缩小， 近距离的反而放大。

投影矩阵.png

正交相机

正交相机的特点就是视椎体的是一个立方体

在这种投影模式下，无论物体距离相机距离远或者近，在最终渲染的图片中物体的大小都保持不变。

这对于渲染2D场景或者UI元素是非常有用的。如图：

正交相机.png

three中代码如下：

const camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );

说完相机就要介绍下图形的组成形式了。

Threejs 的基本要素——网格

在计算机的世界里，一条弧线是由有限个点构成的有限条线段连接得到的。当线段数量越多，长度就越短，当达到你无法察觉这是线段时，一条平滑的弧线就出现了。 计算机的三维模型也是类似的。只不过线段变成了平面，普遍用三角形组成的网格来描述。我们把这种模型称之为 Mesh 模型。

一条弧线由多条线段得到，线段的数量越多，越接近弧线。 不懂的小伙伴，可以看下我的这篇文章：面试官问我会canvas? 我可以绘制一个烟花🎇动画里面「贝塞尔曲线可以是用一段段小线段去拟合起来的」 。

three.js 背后所有的图形在进行渲染之前， 都会进行三角化， 然后交给webgl 去渲染。

Threejs提供了一些常见的几何形状，有三维的也有二维的，三维的比如长方体、球体等，二维的比如长方形圆形等，如果默认提供的形状不能满足需求，也可以自定义通过定义顶点和顶点之间的连线绘制自定义几何形状，更复杂的模型还可以用建模软件建模后导入。

2d

image-20210703111412606.png

3d

image-20210703111444001.png

有了形状，可能渲染出来的图形没有美丽的样子，这时候材质就出来了。 组成的mesh其实是有两个部分：

材质(Material)+几何体(Geometry)就是一个 mesh，Threejs提供了集中比较有代表性的材质，常用的用漫反射、镜面反射两种材质，还可以引入外部图片，贴到物体表面，成为纹理贴图。大家有兴趣可以自己去试一下。如图：

image-20210703111750461.png

Threejs 的基本要素——灯光

假如没有光，摄像机看不到任何东西，因此需要往场景添加光源，为了跟真实世界更加接近，Threejs支持模拟不同光源，展现不同光照效果，有点光源、平行光、聚光灯、环境光等。

AmbientLight(环境光)

环境光会均匀的照亮场景中的所有物体，环境光不能用来投射阴影，因为它没有方向。

const light = new THREE.AmbientLight( 0x404040 ); // soft white light