Threejs中文文档:www.webgl3d.cn/threejs/doc…
英文官网:threejs.org/
官网对 Threejs 的介绍：“Javascript 3D library”。
openGL 是一个跨平台3D/2D的绘图标准，WebGL 则是openGL 在浏览器上的一个实现，而Threejs 对 WebGL 进行了封装
前端开发人员可以直接用WebGL 接口进行编程，但直接使用WebGL进行开发需要具备一定的数学能力和物理知识，为了让前端开发人员能够轻松进行web 3D开发，Threejs 就对 WebGL 进行了封装，降低了门槛，同时大大提升了效率。所以即便你不懂什么计算机图形学，也只要了解一点threejs的基本概念就可以进行3D开发了。
Three.js和Thing.js的区别
Threejs库的出现解决了底层的渲染细节和复杂的数据结构，终于将复杂的底层细节抽象出来。但对于初学者来说需要花费很多时间，就一个加载模型、调光、选择模型弹框的功能，就能写出Threejs上百行代码。 ThingJS是更为上层的抽象，不用关心渲染、mesh、光线等复杂概念。ThingJS封装了对模型交互事件的API、对模型的操作及层次关系，一个个具体的模型抽象把初学者从复杂的3D概念中解放出来
在开发效率上来说ThingJS要更优秀一些
而ThreeJS做出来的东西可能更精致更个性化一些
对了 ThingJS中的模型都是要收费的。
好了接下来我们来讲ThreeJs
three.js基本要素
一、场景
我们要展示东西肯定要有一个场景
就像我们2D作画的时候创建一个canvas画布一样
这里的场景就是一个三维空间，是所有物品的容器，可以把场景想象成一个空房间，接下来我们会往房间里放要呈现的物体、相机、光源等。
其实three.js 所有要素之间的关系就是一个 树形结构
用代码展示就是
const scene = new THREE.Scene();
二、相机
Threejs必须要往场景中添加一个相机，相机就相当于我们的眼睛，用来确定位置、方向、角度，相机看到的内容就是我们最终在屏幕上看到的内容。在程序运行过程中，我们可以调整相机的位置、方向和角度。
Threejs中使用的是PerspectiveCamera（透视相机）
这里的“透视”并不是我们平时理解的那种特异功能，而是指图像中近大远小的现象
上图
大概就是这个样子
代码是这样的
var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
接下来讲一下这四个参数
1、 fov(视场角)：全称field of view，视场角影响视野范围的大小。 就是上图中的那个α角，默认值是50°， 但是一般情况下我们都会用45°，因为45°更接近人眼看到的角度。
2、 aspect(宽高比)：指的是成像的宽高比，默认值为1，通常我们会以浏览器的宽高比作为aspect。
3、near (近距剪切面)：默认值0.1
4、far (远距剪切面)：默认值2000
near和far定义了能够成像的空间范围， 均为正值，且 far 应大于near 。
三、网格和形状和材质
在计算机的世界里，一条弧线是由有限个点构成的有限条线段连接得到的。当线段数量越多，长度就越短，当达到你无法察觉这是线段时，一条平滑的弧线就出现了。 计算机的三维模型也是类似的。只不过线段变成了平面，普遍用三角形组成的网格来描述。我们把这种模型称之为 Mesh 模型。
three.js 背后所有的图形在进行渲染之前， 都会进行三角化， 然后交给webgl 去渲染。Threejs提供了一些常见的几何形状，有三维的也有二维的，三维的比如长方体、球体等，二维的比如长方形圆形等，如果默认提供的形状不能满足需求，也可以自定义通过定义顶点和顶点之间的连线绘制自定义几何形状，更复杂的模型还可以用建模软件建模后导入。Threejs使用的是右手坐标系，这是源于opengl默认情况下也是右手坐标系。
ThreeJs提供的3D形状：
只有形状，可能渲染出来的图形并没有美丽的样子，这时候材质就出来了。 组成的mesh其实是有两个部分：材质(Material) +几何体(Geometry) 就是一个 mesh，Threejs提供了集中比较有代表性的材质，常用的用漫反射、镜面反射两种材质，还可以引入外部图片，贴到物体表面，成为纹理贴图。
ThreeJs提供的材质：
四、灯光
ThreeJs中有六中基础的灯光：
1、AmbientLight 环境光， 氛围光： 通常仅作为 基础光线， 一般需要与其他灯光配合使用，不能产生阴影，也无需指定坐标位置， 仅需设置颜色和强度
2、DirectionalLight 平行光：最为经常使用的光源， 光纤 都是平行向着一个方向发射，经常用来模拟太阳光照射到某个物体上的光照效果
3、HemisphereLight 半球光源：更加真实的模拟自然光源， 提供 天空 地面 漫反射光线。一共接收 3 个参数： 第一个： 天空光线颜色，第二个： 地面反射光颜色， 第三个： 光的反射强度
4、PointLight： 点光源： 类似生活中的灯泡， 光纤 没有固定方向， 朝着四周散射， 点光源对应的辅助对象 PointLightHelper 只有一个 菱形的光源形状，并没有 光 的 发射线条。
5、RectAreaLight 矩形面光源： 与 DirectionalLight 模拟太阳光不同， 光源形状为一个矩形， 可以模拟出明亮 的窗口或者 矩形照明光源。
1）只有 MeshStandardMaterial 和 MeshPhysicalMaterial 材质 才支持 RectAreaLight光源
2）RectAreaLight 对应的辅助对象， RectAreaLightArea 引入方式和 其他 光辅助对象 引入方式不同。其他光辅助对象 都是在 three 中 使用之前无需引入， 可以直接使用， RectAreaLight 在使用之前需要引入才可以使用。
****import { RectAreaLightHelper } from 'three/examples/jsm/helpers'
6、SpotLight 聚光灯 类似与生活中的 聚光灯效果
五、渲染器
字面意思，就是把上面所有的元素渲染出来
直接上代码:
let renderer = new THREE.WebGLRenderer({
antialias: true, // true/false表示是否开启反锯齿
alpha: true, // true/false 表示是否可以设置背景色透明
precision: 'highp', // highp/mediump/lowp 表示着色精度选择
premultipliedAlpha: false, // true/false 表示是否可以设置像素深度（用来度量图像的分率）
preserveDrawingBuffer: true, // true/false 表示是否保存绘图缓冲
maxLights: 3, // 最大灯光数
stencil: false // false/true 表示是否使用模板字体或图案
})
下面贴一些官网的案例:
沙发在线预览：app.xuanke3d.com/apps/trayto…
服装在线预览：suit.xuantech.cn/
化学相关——分子结构可视化：www.yanhuangxueyuan.com/3D/fenzi/in…
地理天文相关——太阳系3D预览：www.yanhuangxueyuan.com/3D/solarSys…
机械模型在线预览demo：www.yanhuangxueyuan.com/3D/jixiezhu…
室内设计作品展示案例：www.yanhuangxueyuan.com/3D/houseDes…
到这threeJs的元素就差不多了 还在学习中，后面有空还会更新……
