软件开发平台webgl-深圳网站优化推广公司

软件开发平台webgl threejs3D场景页面制作系列之总述

Three.js是基于原生WebGL封装运行的三维引擎,在软件开发平台所有WebGL引擎中,Three.js是国内文资料最多、使用最广泛的三维引擎。 所以接下来内容会展示大量基于Threejs的Web3D应用,以便大家了解。

什么是threejs

     什么是threejs,很简单,你将它理解成three + js就可以了。three表示3D的意思,js表示javascript的意思。那么合起来,three.js就是使用javascript 来写3D程序的意思。Javascript是运行在网页端的脚本语言,它能写出在浏览器上流畅运行的3D程序,那么毫无疑问Three.js也是运行在浏览器上的。

threejs源码结构

作为github上一款知名的3D网页动画制作开源项目,它包含以下代码结构,在软件开发平台源代码中已经添加,我们不需要再去下载部署:

threejs文档目录

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监控页面制作技术包含以下几个大的方面:

  1. 首先引入了three.js的库文件,就和引入jquery一样。
  2. 创建场景。
  3. 创建相机,并设置视野,显示的宽高比,近裁剪面,远裁剪面。
  4. 创建渲染器,并设置属性,放置到dom中。
  5. 设置相机的位置。
  6. 导入3D模型,并放入到场景。
  7. 加载三维文字。
  8. 设置一个动画函数,并使用渲染器把场景和相机渲染出来,设置动画帧数,就变成了动画。
  9. 加载二维文字。
  10. 局部刷新文字数据内容。

后续请继续关注上述10点详细教程。

本站文章除注明转载外,均为本站原创或翻译,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动,共创和谐网络环境。
转载请注明:文章转载自:快速开发框架 » 软件开发平台webgl threejs3D场景页面制作系列之总述
本文标题:软件开发平台webgl-threejs3D场景页面制作系列之总述
本文地址:https://www.hocode.com/OrgTec/DB/0024.html

相关文章: 软件开发平台外部3D模型mtl格式材质透明度设置方法