在web前端三维可视化上，Three.js是国内应用得最为广泛的三维引擎。Three.js是基于原生WebGL封装运行的三维引擎。
Three.js能做些什么？
⑤WebVR。实现在线链接VR浏览；
threejs三大组件
这三大组件分别是相机（Camera）、渲染器（Renderer）和场景（Scene），这三个组件是创建3D图形的必备组件。其中：
-
场景用来容纳图形元素。场景相当于宇宙，而图形元素就是星星，图形元素只有添加到场景中，其坐标、大小等才有意义。
-
相机的作用是定义可视域，即确定哪些图形元素是可见的。
-
渲染器则负责用如何渲染出图像，是使用WegGL还是Canvas。
threejs基本图形元素
所谓基本图形元素，就是threejs中的图形显示，基本与这些对象相关。那么，理解了这些对象，就能知道如何在threejs中表示图形。threejs的基本图形元素都定义在Objects下，如下图：
这些类又可以分成下面4个小类别：
点、线、面
首先，所有图形都是由点、线或面构成，所以有：
-
Points：点或点云，可以用点或点云表示图形
-
Line/LineSegments：直线和虚线，可以用线或线团表示图形
-
Mesh：网格模型，可以用若干三角面表示图形
点、线、面都可以聚集到一起组成一个立体图形，也可以单独一个，作为一个2D图形，可以看【点云表示图形】【线团表示图形】【网格模型表示图形】这几个例子来直观了解。
精灵
Sprite在threejs中定义为“一个永远面向相机的平面，通常用来加载纹理”，其最重要的特点是永远面向相机，这在某些时候很有用。要想一睹精灵的风采，可以打开【精灵】，注意一下，所有图形都是面向相机的。
骨骼
骨骼相当于图形的控制单元，控制骨骼运动，就能带动骨骼上附着的图形的运动。如果你不理解什么是骨骼，可以看看腾讯开发的一个骨骼游戏框架【AlloyStick】,按JJKL,看看火柴人的运动。threejs的骨骼例子则看【这里】。
在threejs中，与骨骼相关的类有：
-
Bone：骨骼
-
Skeleton：骨架，由多根骨骼组成
-
SkinnedMesh：皮肤，附着在骨骼上的图形
其它类
-
lensFlare：光晕
-
LOD：细节级别
-
Group:组，可以将多个对象打包成一个组，便可统一操作。
其实，在Threejs中能看到的东西就是这些了，然后这些东西的组成也有很大的变化，从而演化成一个变化多端的系统。
几何形状和材质
threejs使用Geometry定义物体的几何形状，其实Geometry的核心就是点集，之所以有这么多的Geometry，是为了更方便的创建各种形状的点集。
threejs通过Material定义物体的材质。下面是创建一个图形的过程的例子：
-
//1、定义形状 -
let geometry = new THREE.BoxGeometry(10,10,10); -
//2、定义材质 -
let meshMaterial = new THREE.MeshBasicMaterial({color:0xff0000}); -
let lineMaterial = new THREE.LineBasicMaterial({color:0x934894}); -
let pointMaterial = new THREE.PointMaterial({color:0x738938}); -
-
//3、创建图形 -
let mesh = new THREE.Mesh(geometry,meshMaterial); //创建一个用网格模型表示的形状 -
let line = new THREE.Line(geometry,lineMaterial); //创建一个用线团表示的形状 -
let point = new THREE.Points(geometry,pointMateril); //创建一个用点云表示的形状
看了上面的例子，你应该明白，图形的几何形状（Geometry）是与表示方法无关的，你可以使用点、线或面来表示一个几何形状。
几何形状（Geometry）
Geometry其实就是点的集合，Geometrys分类下放的各种几何形状都是各种图形表示方法通用的：
这些类提供便捷方法来创建代表各种形状的顶点的集合。
材质（Material）
材质与图形的类型是相关的，点使用PointsMaterial，线使用LineXXXMaterial，网格使用MeshXXXMaterial，精灵使用SpriteMaterial等等。
纹理
纹理是用来表现图形的一些微小细节的。理论上讲，一个图形所有的细节都可以用点线面表示出来，但是这么做需要巨量的点线面，计算速度十分的慢，所以，在细节上，可以使用纹理。
在threejs中使用Texture来表示纹理，纹理可以从图片中加载，也可以从canvas中加载，所以，纹理能表示的图像很丰富。