WEBGL之three.js实现

Shidong Zhu | Created: Sep 5, 2016 Updated: Jul 24, 2024

上一期讲的是WebGL原理和应用--OpenGL实现3D渲染效果,这一次主要介绍Three.js是如何实现3D渲染效果的(Three代表3D):

three.js应用

(1)首先是Three.js里面主要的三个要素:场景,相机,渲染器。这也很好理解,就是在一个空间里实现3D效果的三个环节,了解了这个后面就很容易想象出模拟的过程。

WEBGL threejs code1.png

(2)接下来是渲染模型所要的几何体和材质,并添加到场景。

WEBGL threejs code2.png

(3)场景和模型定义好后,接下来需要一个视角,就是下面的相机视角,观察的角度。

WEBGL threejs code3.png

(4)场景和相机都好了下面就是渲染的过程,通过图形重绘实现3D的效果。

WEBGL threejs code4.png

three.js用户交互

(1):实现3D模型的外部操作。

首先要引入script库 :OrbitControls.js和OrbitControls.js,然后实现具体操作。可参考github源码。

WEBGL threejs code5.png

(2):实现3D模型的数据检测的可视化:

先要引入script库 :dat.gui.js和at.gui.js,可参考:dat.gui文档,github源码

three.js模型引入

WEBGL threejs code6.png

(1)Object格式模型的引入用THREE.ObjectLoader,同时还有很多格式可参考Three.js文档.

(2)Clara.io网站(导入模型,制作模型,格式转换):

格式包括: .3d .3dc .3ds .ac .b3d .blend .bmp .bvh .bw .cfg .claraarchive .claramats .csm .dae .dds .dxf .fbx .gdal .geo .gif .hdr .hmp .ifc .iges .igs .int .inta .irr .irrmesh .iv .jpeg .jpg .jsfbx .json .lwo .lws .lxo .markdown .md .md2 .md3 .md5 .mdc .mdl .mtl .ndo .nff .obj .off .osgterrain .pbm .pgm .pic .pk3 .ply .png .pnm .pov .ppm .q3d .q3s .rgb .rgba .sgi .shp .smd .step .stl .stp .terrain .text .tga .tif .tiff .txp .txt .vismat .vismatzip .vrmat .vrmatzip .vrscene .vrscenezip .vta .wrl .wrz .x .xgl .zgl .zip。

关于作者

Dan Hu

Shidong Zhu

联系我们 订阅电子报

Practical B2B Marketing Tips to 10X Better Marketing Results

Join 2,000+ professionals getting: Proven growth tactics, battle-tested strategies, and real B2B case studies.

Stephen Tseng
Stephen Tseng

为什么 B2B 企业的广告预算不断增加,高质量询盘却没有增长?

对于许多 B2B 企业来说,广告预算持续投入,网站访问量看起来也不错,但真正有价值的询盘却始终有限。问题往往不在于是否继续加预算,而在于广告是否吸引了正确的客户,以及点击之后是否形成有效转化。

继续阅读 →

Stephen Tseng
Stephen Tseng

海外品牌在中国卖不动,真的是中国市场太难了吗?

很多海外企业觉得“中国市场太难了”。在得出这个结论之前,先问一个问题:当中国客户产生采购需求时,他们能不能在百度上找到你?问题往往不是需求不足,而是品牌可见度不够。

继续阅读 →