一名Web3D开发工程师的Three.js知识总结与学习步骤

wx：codekongfu

一、背景介绍

      各位小伙伴们大家好，我是web前端开发，在2018~2019年某网的大屏可视化项目结束后，忽然有个想法，就是，如果把里面的Echarts图表换成三维的图形，效果看起来应该很酷（因为那时候Echarts官网里有webgl的三维代码）。

        于是2019年外包项目结束回来后，经过一番百度后，找到三维的相关技术找到的three.js（比较适合小白入手），看到官网的案例后，实在是非常炫酷，实在是按捺不住，想试试手，但是对于从来没有接触过三维的我来说，真是无从下手。

        面对three.js案例中的Api，看起来很是陌生，一开始在51cto上买课程学，但是51cto上的课程很是片段化，不系统，有的知识点很难串联起来。后来自己在谷歌上找了一些电子书与实战案例，下班回家对着源码与电子书上，一行一行看案例，敲代码自学。

        在学到需要加载gltf模型的时候，自己自学blender三维建模软件，把油管上的教程0.25倍速播放（有的操作快捷键，我需要看到里面UP主的快捷键），建模前后大概学了15个晚上（大概晚上10点左右到1点）,学建模的时候基本没有学习three.js，那个时候内心暗下决心一定要把建模学会。

后来自己的梦想就是一定要把这个模型自己独立建模建出来

 后来建出来是这样的，建模主要是学习threejs如何操作模型，比如模型鼠标事件交互。

 后来对着B站上面学习油管上的扎克小蓝车的游戏场景建模，在感觉自己建模给水平能支撑threejs开发够用的情况下，自己又转回来Three.js的学习上。

 

期间在学习three.js的路上也走走停停，走了不少弯路，耽误了不少时间，主要是网上找不到系统的教程、教材。

        仅仅看官网的案例实在是看不懂，即使看懂了，在自己写demo用起来很难，有时候完全是一脸懵逼，很是着急。在通过1年的摸索中也慢慢的找到一些资源与电子书，有一本叫"Three.js 菜谱 "（老外真会起名字），看完了这本书，再回头看看threejs官网，第一个感觉“原来是这样”，当自己写demo的时候，自己大概知道解题思路，以及怎么去找案例里面的代码了。

那什么是Three.js呢

二、Three.js 简介

1、什么是Three.js

Three.js是一个跨浏览器的脚本，使用JavaScript函数库或API来在网页浏览器中创建和展示动画的三维计算机图形。Three.js使用WebGL。源代码托管在GitHub。Three.js允许使用JavaScript创建网页中的GPU加速的3D动画元素，而不是使用特定的浏览器插件。webgl封装成便于用户使用的Three.js ，类似jquery封装了JavaScript，那么什么是webgl呢？

2、什么是WebGL

WebGL是一种JavaScript API，用于在不使用插件的情况下在任何兼容的网页浏览器中呈现交互式2D和3D图形[2]。WebGL完全集成到浏览器的所有网页标准中，可将影像处理和效果的GPU加速使用方式当做网页Canvas的一部分。WebGL元素可以加入其他HTML元素之中并与网页或网页背景的其他部分混合，WebGL技术结合了HTML5和 Java Script，允许开发者在网页（Web页面）上创建和渲染三维图形。

3、什么是OpenGL

OpenGL（英语：Open Graphics Library，译名：开放图形库或者“开放式图形库”）是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口（API）。这个接口由近350个不同的函数调用组成，用来从简单的图形比特绘制复杂的三维景象。而另一种程序接口系统是仅用于Microsoft Windows上的Direct3D。OpenGL常用于CAD、虚拟现实、科学可视化程序和电子游戏开发。

三、Three.js主要知识结构

        2020年之前基本都是学习，也没有写过项目，从去年10月到今年的一个项目，从项目中用到three.js主要知识点有以下，在这里总结下，这个也是小白入门必会的知识点。

1、初级

a、Three.js场景的构成

重要的三个组件：场景，相机，渲染器，这三个就想是舞台，有场地、有相机、有舞台特效，有了这些，才能有人在舞台上表演，而表演的人就是场景中的对象。

b、Three.js光源类型

Three.js 光源类型：环境光 THREE.AmbientLight 、点光源THREE.PointLight、聚光灯 THREE.SpotLight、定向光 THREE.DirectionalLight、半球光THREE.HemisphereLight （HDR天空盒环境贴图）、区域光THREE.AreaLight、镜头光晕THREE.LensFlare。

c、Three.js几何Geometry

材料描述物体的外观

d、Three.js材质Material

材料描述物体的外观

 网格=几何+材质

e、Three.js粒子系统Pointcloud、精灵

2、中级

f、Gltf模型加载、压缩、交互

g、粒子系统：点云加载、交互，精灵材质

h、Three.js声音

three.js + 声音 = 音频可视化

i、Three.js物理

惯性、重力、撞击、坠落等物理属性

j、Gltf、Obj等多种格式相互转换；点云Las、Pcd、Ply多格式项目转换、点云裁剪；模型压缩

3、高级

k、webgl学习；

l、Shader着色器、GLSL特效等；

m、其他webgl三维引擎：Ceisum、Babylon；

n、Unity、UE（涉及到C++）；

o、WebRTC技术（云渲染技术，也叫信息流技术，我觉得未来必须要会的技术栈（会了在三维的世界能游刃有余，但是这个涉及到C++））。

上面是我总结的三维学习图谱，从three.js 入手是新手不错的选择。

近期我整理了我入门Three.js的学习包，可以点击此链接了解详细，这是github地址：网速可能有点慢，请耐心等待多刷新几次：↓↓↓

《Three.js 小白从入门到实战，案例分析与代码精解》threeRealCode/README.md at main · webingcool/threeRealCode · GitHub

​