什么是threejs
什么是threejs,很简单,你将它理解成three + js就可以了。three表示3D的意思,js表示javascript的意思。那么合起来,three.js就是使用javascript 来写3D程序的意思。Javascript是运行在网页端的脚本语言,它能写出在浏览器上流畅运行的3D程序,那么毫无疑问Three.js也是运行在浏览器上的。
threejs源码结构
作为github上一款知名的3D网页动画制作开源项目,它包含以下代码结构,在软件开发平台源代码中已经添加,我们不需要再去下载部署:
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模型。
CONTRIBUTING.md文件:一个怎么报bug,怎么获得帮助的说明文档。
LICENSE文件:版权信息。
README.md文件:介绍three.js的一个文件,里面还包含了各个版本的更新内容列表。
一个案例讲述制作框架
我们在金发生产制造监控系统中,专门为户外原料储蓄罐研发一个3D监控页面,包括3D场景绘制、模型导入、数据刷新展示等功能、如下图所示案例:
该3D监控页面制作技术包含以下几个大的方面:
- 首先引入了three.js的库文件,就和引入jquery一样。
- 创建场景。
- 创建相机,并设置视野,显示的宽高比,近裁剪面,远裁剪面。
- 创建渲染器,并设置属性,放置到dom中。
-
设置相机的位置。
-
导入3D模型,并放入到场景。
- 加载三维文字。
- 设置一个动画函数,并使用渲染器把场景和相机渲染出来,设置动画帧数,就变成了动画。
-
加载二维文字。
- 局部刷新文字数据内容。
后续请继续关注上述10点详细教程。