开发者社区> 异步社区> 正文

《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的最佳选择之一。

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Ember.js 入门指南——{{link-to}} 助手
link-to助手表达式渲染之后就是一个a标签。而a标签的href属性的值是根据路由生成的,与路由的设置是息息相关的。并且每个设置的路由名称都是有着对应的关系的。
1193 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
23680 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
18681 0
MaxCompute(原ODPS)开发入门指南——数据上云篇
根据《MaxCompute(原ODPS)开发入门指南——计量计费篇》的了解,大家清楚了MaxCompute可以做什么,计费模式如何,想必大家也开通了MaxCompute想进行一次POC,但是大家遇到第一个问题一定是我的数据如何上云?
9425 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
12049
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载