《WebGL入门指南》——第2章,第2.1节Three.js——一个JavaScript 3D引擎

简介:

本节书摘来自异步社区《WebGL入门指南》一书中的第2章,第2.1节Three.js——一个JavaScript 3D引擎,作者 【美】Tony Parisi,更多章节内容可以访问云栖社区“异步社区”公众号查看

2.1 Three.js——一个JavaScript 3D引擎
WebGL入门指南
需求是创新之母。每个开发者在项目之初都必须不厌其烦的使用WebGL原生API来编写代码,直到可以建立一个自己的代码库,以用于随后的通用3D编程。事实上,已经有很多人完成了这项工作。现在有很多不错的WebGL开源框架,例如GLGE(http://www.glge.org/)、SceneJS(http://www.scenejs.org/)、CubicVR(http://www.cubicvr.org/)等。每个框架都有各自不同的地方,但它们的共同目的都是为了构建一个高等级的、对开发者相对友好的WebGL开发环境。

在本书中我们使用的WebGL框架叫做Three.js,它是由居住在西班牙巴塞罗那的程序员Ricardo Cabello Miguel开发的,此人更出名的网名叫做Mr.doob。Three.js以简单、直观的方式封装了3D图形编程中常用的对象。Three.js在开发中使用了很多图形引擎的高级技巧,极大地提高了性能。另外,由于内置了很多常用对象和极易上手的工具,Three.js的功能也非常强大。最后,Three.js还是完全开源的,你可以在GitHub上找到它的源代码,并且有很多人贡献代码,帮助Mr.doob一起维护这个框架。

我选择Three.js来编写示例代码有两个原因。第一,我目前在我自己的项目中也在使用它,并且我很喜欢它。第二,在众多引擎中它更受欢迎,已经成为其中的佼佼者。不过没有关系,你也可以选择其他你喜欢的框架,也许其他框架会更适合你的项目,更满足你项目的需求。一个引擎肯定不能适用于所有情况。我提及的其他引擎也都非常不错。如果可以的话,你甚至也可以编写自己的3D引擎。但在这之前,我们还是来看看既存的WebGL框架吧!

事实上,像Three.js这种工具集的出现和存在很大程度上是因为在最近几年中浏览器中的JavaScript虚拟机的迅猛发展。在一些年之前,虚拟机的性能还不足以支持这种库的存在,甚至连WebGL都不可能投入实际应用。得益于虚拟机的技术进步,才让WebGL和像Three.js这种工具集走进数以百万计的Web开发者的视线。

随着本书的逐步深入,你会了解到Three.js的更多细节。现在,我们先简要地列出Three.js的功能概述。

Three.js掩盖了3D渲染的细节
Three.js将WebGL原生API的细节抽象化,将3D场景拆解为网格、材质和光源(即它内置了图形编程常用的一些对象种类)。
Three.js是面向对象的
开发者可以使用上层的JavaScript对象,而不是仅仅调用JavaScript函数。
Three.js功能非常丰富
除了封装了WebGL原始API之外,Three.js还包含了许多实用的内置对象,可以方便地应用于游戏开发、动画制作、幻灯片制作、高分辨率模型和一些特殊的视觉效果制作。
Three.js速度很快
Three.js采用了3D图形最佳实践来保证在不失可用性的前提下,保持极高的性能。
Three.js支持交互
WebGL本身并不提供拾取(picking)功能(即是否知道鼠标正处于某个物体上)。而Three.js则固化了拾取支持,这就使得你可以轻松为你的应用添加交互功能。
Three.js包含数学库
Three.js拥有一个强大易用的数学库,你可以在其中进行矩阵、投影和矢量运算。
Three.js内置文件格式支持
你可以使用流行的3D建模软件导出文本格式的文件,然后使用Three.js加载;也可以使用Three.js自己的JSON格式或二进制格式。
Three.js扩展性很强
为Three.js添加新的特性或进行自定义优化是很容易的事情。如果你需要某个特殊的数据结构,那么只需要封装到Three.js即可。
Three.js同时支持HTML5 2DCanvas
尽管WebGL日益流行,但是仍然有一些环境尚未支持。Three.js可以同时在2D画布中渲染大部分的3D内容,尤其是在那些无法成功获取3D上下文的地方,可以让你的代码平滑的回滚到其他解决方案。
另外很重要的一点就是了解有哪些事情是Three.js无法做到的。Three.js不是一个游戏引擎,也不是一个虚拟现实平台。它缺少了一些在这些系统中常用的特性,比如公告板(billboard)、头像(avatar)和物理引擎。另外,如果你打算开发一个多人在线游戏,那么很可惜,Three.js并没有内置任何的网络支持。如果你确实需要这些功能模块,那你必须在Three.js上层再进行二次封装。尽管如此,Three.js的简洁和强大仍然使其成为开始学习WebGL的最佳选择之一。

好了,如果没有其他问题,那么就让我们继续,并开始写一些代码吧!

相关文章
|
1月前
|
JavaScript 前端开发 物联网
JavaScript:构建动态世界的引擎
JavaScript:构建动态世界的引擎
|
1月前
|
前端开发 JavaScript 开发者
JavaScript:构建动态网络的引擎
JavaScript:构建动态网络的引擎
|
1月前
|
JavaScript 前端开发 开发者
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
1月前
|
JavaScript 前端开发 物联网
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
5月前
|
资源调度 JavaScript 前端开发
Day.js极简轻易快速2kB的JavaScript库-替代Moment.js
dayjs是一个极简快速2kB的JavaScript库,可以为浏览器处理解析、验证、操作和显示日期和时间,它的设计目标是提供一个简单、快速且功能强大的日期处理工具,同时保持极小的体积(仅 2KB 左右)。
283 24
|
5月前
|
JavaScript 数据可视化 前端开发
three.js简单实现一个3D三角函数学习理解
1.Three.js简介 Three.js是一个基于JavaScript编写的开源3D图形库,利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能,如几何体、纹理、光照、阴影等,以便开发者能够快速地创建复杂且逼真的3D场景。同时,Three.js还具有很好的跨平台和跨浏览器兼容性,让用户无需安装任何插件就可以在现代浏览器上观看3D内容。
189 0
|
7月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
8月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
180 32
|
7月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~

热门文章

最新文章