Three.js可视化企业实战WEBGL教程分享下载，2023年7月升级版45章，附源码+课件+素材下载！

Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。不过，这款引擎目前还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏），《Three.js可视化企业实战WEBGL教程》无疑弥补了这个空缺，课程结合大量实践案例，让您对Three.js有更深入的了解！

掌握一些概念性知识
1、前端基本功 – HTML+CSS+JS ，至少会写需要引入入外部JS的单页HTML，本文即使用这种模式编写和实现
2、Three.js 概念 ：Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎
3、基于Three.js写页面的三要素是：场景(Scene)、相机(Camera)、渲染器(Renderer)

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

文章的开头我们就已经说过了，threejs三大妈：场景、相机、渲染器。
其中的场景，暂且可以理解为最终我们看到的这个画布。我们首先需要new一个scene对象。然后分别new一个形状和材料实例，通过scene的add方法加入到画布中去。这个过程的实现代码就是下面这几行。逻辑很清晰：我们往场景中塞入了一个球体，然后给这个球体做了点装饰，就是用的“材料”。我们可以设置这个“材料”的颜色、金属强度等一系列的图像学的属性。

Build目录：包含两个文件，three.js 和three.min.js 。这是three.js最终被引用的文件。一个已经压缩，一个没有压缩的js文件。
Docs目录：这里是three.js的帮助文档，里面是各个函数的api，可惜并没有详细的解释。试图用这些文档来学会three.js是不可能的。
Editor目录：一个类似3D-max的简单编辑程序，它能创建一些三维物体。
Examples目录：一些很有趣的例子demo，可惜没有文档介绍。对图像学理解不深入的同学，学习成本非常高。
Src目录：源代码目录，里面是所有源代码。
Test目录：一些测试代码，基本没用。
Utils目录：存放一些脚本，python文件的工具目录。例如将3D-Max格式的模型转换为three.js特有的json模型。
.gitignore文件：git工具的过滤规则文件，没有用。
CONTRIBUTING.md文件：一个怎么报bug，怎么获得帮助的说明文档。
LICENSE文件：版权信息。
README.md文件：介绍three.js的一个文件，里面还包含了各个版本的更新内容列表。

场景——相机——渲染器
从实际生活中拍照角度或是使用三维渲染软件角度理解本节课的案例代码，立方体网格模型和光照组成了一个虚拟的三维场景,相机对象就像你生活中使用的相机一样可以拍照，只不过一个是拍摄真实的景物，一个是拍摄虚拟的景物，拍摄一个物体的时候相机的位置和角度需要设置，虚拟的相机还需要设置投影方式，当你创建好一个三维场景，相机也设置好，就差一个动作“咔”，通过渲染器就可以执行拍照动作。