threejs 绘制球体_3D可视化库-Threejs调研及简单示例

0 背景

WebGL是一种3D绘图协议，其允许JavaScript和OpenGL ES2.0结合在一起，为H5 Canvas提供硬件3D加速渲染，可以借助系统显卡在浏览器里更流畅地显示3D场景和模型。Threejs是一款webGL框架，由于其易用性被广泛应用。Threejs在WebGL的api接口基础上，又进行了一层封装。

WebGL原生的api是一种非常低层的接口，需要一些数学和图形学的相关技术。其解决是如何在画布上画图的问题，怎么画点、线、面，怎么上色，怎么贴图，怎么处理光线，视角转动之后怎么换算绘制等等。对于没有相关基础的人来说，入门很难，Three.js将入门的门槛降低了一大截，其解决底层的渲染细节和复杂的数据结构，将复杂的底层细节抽象出来，简化我们创建三维动画场景的过程。

1 Threejs核心概念

为快速入手，在使用threejs之前，需要了解场景、照相机、对象、光、渲染器等核心概念。

1.1 场景-Scene

场景是所有物体的容器，对应着现实生活中三维世界，所有的可视化对象及相关的动作均发生在场景中。

1.2照相机-Camera

Camera是三维世界中观察者，类似与眼睛。为了观察这个世界，需要描述空间中的位置，three.js采用右手坐标系。

Threejs中的Camera有两种，分别是正交投影相机THREE.OrthographicCamera和透视投影相机THREE.PerspectiveCamera。

正交投影与透视投影的区别如上图所示，左图是正交投影，物体发出的光平行地投射到屏幕上，远近的方块都是一样大的；右图是透视投影，近大远小，符合我们平时看东西的感觉。

1.3 对象-Objects

对象则是场景中被观察的物体，Threejs中供显示的物体有很多，它们都继承自Object3D类，主要的对象有两种Mesh和Points。

我们都知道，计算机的世界里，一条弧线是由有限个点构成的有限条线段连接得到的。线段很多时，看起来就是一条平滑的弧线了。计算机中的三维模型也是类似的，普遍的做法是用三角形组成的网格来描述，我们把这种模型称之为Mesh模型。

                                                                 

这是著名的斯坦福兔子，随着三角形数量的增加，它的表面越来越平滑准确。