《WebGL入门指南》——第2章,第2.2节建立Three.js运行环境

2.2 建立Three.js运行环境
WebGL入门指南
你要做的第一件事情就是从GitHub上获取到最新版的Three.js包。Three.js在GitHub上的地址是https://github.com/mrdoob/three.js/。复制到本地之后,你可以在build/Three.js目录找到打包好的库文件。另外,Three.js的全部源代码都在src文件夹中。而API文档则是直接连接到GitHub网站,但这份文档相当简陋,你最好还是对照源代码来上手。

Three.js使用了Google Closure编译器;它可以将位于不同的独立文件中的整个Three.js的源代码编译成一个库文件。如果你对Closure编译器不太熟悉,那可以访问http://code.google.com/closure/compiler/了解更多。如果你不想过多涉及,那也没关系,就把Three.js看成一个黑箱好了。

你可以花一些时间简单地看看代码树和文档,来熟悉一下Three.js。如果你和我不同,对这些繁琐的前置步骤厌恶不已,并打算忽略这些建议,现在就开始跳进代码之中!那么好吧,我非常理解你的心情,但至少请做一件事情——浏览一下示例。在example文件夹中你可以找到接近100个WebGL Demo和一些2D画布的Demo,其中包含了大量的特性和视觉效果。你不会后悔的,相信我!

最后,请把所有这些东西都放到一个网络服务器上。本书中的大部分示例代码都需要运行在服务器上。我在我的MacBook上安装了一个标准的LAMP套件,而你只需要其中的“A”部分(即安装Apache服务器)。

时间: 2024-09-20 00:13:54

《WebGL入门指南》——第2章,第2.2节建立Three.js运行环境的相关文章

《WebGL入门指南》——导读

目 录第1章 WebGL简介 1.1 WebGL--一个技术定义 1.2 3D图形学--入门 1.3 WebGL原生API 1.4 本章小结 第2章 你的第一个WebGL程序 2.1 Three.js--一个JavaScript 3D引擎 2.2 建立Three.js运行环境 2.3 一个简单的Three.js网页2.4 一个真实的3D示例 2.5 本章小结 第3章 图形 第4章 动画 第5章 交互 第6章 2D与3D的整合 第7章 实战WebGL 第8章 你的第一个WebGL游戏 后记 附录A

《WebGL入门指南》——第2章,第2.4节一个真实的3D示例

2.4 一个真实的3D示例 WebGL入门指南 到目前为止,你也许在想"真是个还不错的正方形",然后开始怀疑我们什么时候开始画一些真正的3D图形.好吧,那就现在吧!在示例2-2中我们将会用更有趣的物体来代替正方形,我们将会完成一个看起来还不错.并且展示了大部分WebGL主要特性.同时还保持代码简洁的页面. 图2-2就是页面的最终效果.其中我们设置了标题文字,添加了一个表面贴有图片的立方体,然后在页面底部也添加了文字.另外值得一提的是,这个页面是可以交互的:点击画布元素,立方体就会开始或

《WebGL入门指南》——第1章,第1.4节本章小结

1.4 本章小结 WebGL入门指南 这样我们就结束了WebGL基础知识之旅.噢!东西可真多啊!现在你也许在想,仅仅在屏幕上画一个正方形就如此兴师动众.而且,这还不是一个真正的3D物体!好吧,我部分同意你的意见.WebGL编程,在这个等级上的编程,是相当困难的.标准的设计者做出这样一个决定还是相当清醒的,他们用这样一个既小巧又简单的标准,换取了WebGL强大的能力,而付出的代价是开发者必须要在应用程序端编写大量的代码. 显然,在大部分情况下,我们不会使用WebGL来绘制2D物体.HTML5的2D

《WebGL入门指南》——第2章,第2.3节一个简单的Three.js网页

2.3 一个简单的Three.js网页 WebGL入门指南 好了,我想现在是时候来编写你的第一个 WebGL 程序了.在这一节中,你会看到上手Three.js是一件相当简单的事情.示例2-1实际上是第1章中的那个绘制正方形示例的翻版,但是将代码从150行精简到30行.由此可见,在使用Three.js之后对代码的压缩量之大. 示例2-1 一个简单的Three.js网页 <!DOCTYPE html> <html> <head> <title>A Simple

《WebGL入门指南》——第2章,第2.5节本章小结

2.5 本章小结 WebGL入门指南 本章介绍了第一个真实示例.我必须要说,这其实还是很轻松的.仅仅使用了很少的代码,我们就可以创建一个包含3D内容的HTML网页,装扮它,用动画赋予它生命,然后让它可以交互.你要意识到在过去这是根本不可能的.感谢WebGL,让这一切都变成了现实.而又有了Three.js,可以让你在开发前不必先去考取一个计算机图形学的学位. 我们已经构建和运行起来了WebGL,剩下的就都是细节了.

《WebGL入门指南》——第1章,第1.2节3D图形学——入门

1.2 3D图形学--入门 WebGL入门指南 "数学太难了啦!" --芭比娃娃 也许有点不太好听,但是我必须得说,当我写3D图形的代码的时候,我会和芭比一样,有强烈的欲望想要用疯狂购物来放纵一下自己.因为3D图形编程通常很难,而且需要大量的数学知识.幸运的是,你不需要先成为数学大师再来写WebGL应用:我们会使用各种框架来代替我们去做其中大部分的复杂工作.尽管如此,理解底层的工作原理依然是非常重要的,因此下面我尝试在几页的篇幅内总结出整个3D图形学的基础知识. 1.2.1 3D坐标系

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

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入门指南》——第1章,第1.3节WebGL原生API

1.3 WebGL原生API WebGL入门指南 计算机图形学中的基本概念在过去的数年中从未发生过变化.但图形技术却不断进化,特别是最近几年,伴随着设备和操作系统的多样化.这些百花齐放的图形技术的根基则是诞生于20世纪80年代末期的OpenGL.OpenGL作为行业规范已经存在了非常长的时间,并且成功经受住了来自微软的DirectX的竞争考验,无可争辩的成为了3D图形编程的领衔者. 但是并非所有的OpenGL都是一样的.根据不同平台的不同特征,包括台式电脑.智能电视.手机和平板电脑等,人们开发了

《WebGL入门指南》——第1章,第1.1节WebGL——一个技术定义

1.1 WebGL--一个技术定义 WebGL入门指南 WebGL 标准是由科纳斯组织(Khronos Group)开发和维护的,该组织还是管理着 OpenGL.COLLADA等其他你也许早有耳闻的规范的标准组织.以下是科纳斯组织的网站上对WebGL的官方描述: WebGL是免授权费的,跨平台的应用程序接口API,它将OpenGL ES 2.0作为在HTML网页内的3D绘图环境,作为低级别文档对象模型接口开放.它使用OpenGL渲染语言GLSL ES,并可被整洁地与其他3D内容上层或下层的网页内