WEBGL之three.js实现

Shidong Zhu

上一期讲的是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

Subscribe to Our Newsletter

We will deliver China-related web design, web development, and digital marketing information or tips every month.

Stephen Tseng
Stephen Tseng

不要让不确定性束缚你的SEO营销策略

无论是政策变化、经济波动,还是突发的全球事件,企业在制定营销策略时常常需要面对各种变数。不确定性营销决错失大量的市场机会。可能导致营销决策的延迟和执行的犹豫,但如果因此停滞不前,那么企业将错失大量的市场机会。

继续阅读 →

Stephen Tseng
Stephen Tseng

B2B 业务增长的关键:解析行业平均转化率及行业基准

在竞争激烈的 B2B 市场中, lead conversion rate(潜在客户转化率) 是衡量业务成功与否的关键指标之一。它不仅反映了营销策略的有效性,还直接影响到公司的收入增长。本文将深入探讨 B2B 平均转化率的相关数据和行业基准,并为您带来提升转化率的实用建议。

继续阅读 →

Stephen Tseng
Stephen Tseng

内容营销对 SEO 到底有什么用?B2B 出海营销的最佳策略指南

在数字营销领域,“内容为王”早已不是口号,而是决定企业能否被全球潜在客户发现的关键。这一点对正在拓展海外市场的 B2B 企业尤为重要:内容营销与 SEO 紧密结合,才能真正将流量转化为有效询盘和长期客户。

继续阅读 →