微软的基于webgl的H5 3D游戏引擎

它是个大图片,不是么?   这是个完整的 Babylon.js 场景, 使用 ‘简单的 HTML 文件’ 的方法.  这不是唯一(也不是最好)的设置一个场景的方法, 但是快速而简单.  我已经在”大图片上”的重要段上标色,而且我们现在就一段段段查看.

外部包含 - 红色部分

‘包含’ 不一定是对 图中红色部分的最好的描述方式, 但是在这个教程中我会常常使用这中方式.  三个外部的Javascript文件被包含到这个场景里.

第一个从外部包含的是 hand.minified-1.2.js (通常简称为hand.js) - 一个用来辅助Babylon.js相机的小JavaScript框架.

下一个是 cannon.js - 一个可选的物理 ‘引擎’, 其使WebGL里的造型(网格)的行为像真实生活里的物体对象.

之后的是 oimo.js - 一个不同的物理 ‘引擎’, 其表现的功能有点像 cannon.js, 但是它更快速高效, 尽管它缺少 cannon.js中出现的许多高级特性.

最重要是 Babylon.js 框架, 我们的骄傲与荣幸.

每个包含都是 JavaSCRIPT 文件, 所以它们被放在使用 HTML的 <SCRIPT> 元素/标签中.  这些文件里显示的 ‘src’ (源码位置) 在 the Babylon.js 网站的文件夹里, 但是稍后我将告诉你如何把这些文件放到你的硬盘驱动器里 - 如果你希望那样做, 然后从那儿包含它们.  当是”本地” 时她们加载会更快, 但是当你将它们保存到本地后你需要修改 ‘src’ 的网址; 我很快会告诉你如何做的.

CSS 样式 - 蓝色部分

 注意大图片中的蓝色部分.  那是用来呈现场景页面的 CSS (布局样式表) 样式,  它会调整 WebGL 画布居中且填满你的整个浏览器.

有一天, 你希望通过把这些样式内容放在单独的文件里使它们外部化, 也许可以把文件叫做 styles.css.  那是可以把蓝色部分从这个HTML文件里移除掉, 然后使用HTML LINK元素/标签把样式文件放到里面.  我不回教你怎么做那个, 但是网上满是文档教你如何做的; 它非常简单.

内部包含 - 绿色部分

这是大图片场景文件里的第五个 HTML SCRIPT 元素/标签 .  我们用了4个 SCRIPT 元素/标签 实现外部包含.  这个是内部包含.  注意没有 ‘src’ 地址.  那是因为它是你直接写入这个文档的 Javascript代码部分.  是的, 你写的.  现在你是名 Javascript 程序员!

你可以把绿色部分外部化, 可以把它们放到一个叫做… ‘myJavascript.js’文件里, 也许还在个叫做… ‘jsfolder’的目录里.  然后你可以移除绿色部分, 且再添加一个外部包含 脚本 元素/标签, 看起来就像这样:

<code class="language-html hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"./jsfolder/myJavascript.js"</span>></span><span class="javascript" style="box-sizing: border-box;"></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

You need not concern yourself with that, at this point.  Externalizing your Javascript is often done when you have written LOTS of Javascript code.  Externalizing your code into separate files helps your project be organized, but it is not necessary this early in your webGL adventures.

你看到的在绿色部分里的 JS 代码… 很快会被讨论到.  我主要是希望你学习下大图片里的内容, 而且弄明白单个HTML文件里的Babylon.js场景是如何创建的.  对这个文件的格式, 我希望你能够尽力留下印象且记得一点点.

createScene() 函数 - 紫色部分

大图片里的紫色部分…是createScene() ‘函数’… 一个Javascript ‘函数’.  它是’单HTML文件’场景里的最重要部分的.  在你的Javascript代码里你不必使用createScene()函数, 但是在学习WebGL的早期日子里,请这样做吧.  我有些魔法展示给你看… 如果你把大部分的场景代码放到一个叫做createScene()的函数里.  (就像大图片里展示的那样.)

在 createScene() 函数里 (紫色部分)… 我们将开始执行真实的 Babylon.js 指令, 以产生漂亮的WebGL效果出现.  大图片里的剩下部分… 是些简单的辅助和准备工作… 为神奇的紫色部分(那个createScene()函数)服务的.  记住这个函数名, 因为我将在许多游戏练习系列教材里常常提到它.  我能保证,它将成为你最好的支持者.&nbsp

访问 娱乐场

我们做得很努力且学到不少东西了, 所以我们可以获得一些时间在 Babylon.js 娱乐场游乐一下了.  此处是创建保存一次性场景的练习场:

BabylonJS 娱乐场

你也许希望在新的浏览器窗口或标签页来打开娱乐联系的场景, 那样可以通过后退和前进切换不同场景.

看到左边代码窗口里的 ‘createScene’ 函数里么?  看起来熟悉吧?  它是和大图片里的紫色部分非常像的代码(只是多了些换行).  现在你该清楚了为什么那个 createScene 函数是一个重要的部分.  它是有一定可移植性的.  你能够在 createScene 函数和你本地的场景文件之间将代码拷来拷去.

让我们假设,你在一直在家中创建了一个场景文件, 经过多次尝试, 它就是不能正常工作.  你可以复制你家里的 createScene 函数, 然后访问娱乐场, 点击 清除按钮 来清空编辑窗口, 最后把你的 createScene 函数粘贴到编辑区域里. 按下娱乐场的运行按钮,看看它是否有效.  如果不正常, 你可以在编辑窗口里做些修改, 然后再次点击 运行 … 如此不断调整.  尝试下, 如果你你仍然不能使它有效运行, 你可以按下 保存 按钮.  之后会为你的场景生成一个唯一的网址.  看起来就像这个样子:

http://babylonjs-playground.azurewebsites.net/#QKQHS

现在你可以用书签纪录下那个唯一的网址, 然后去访问 Babylon.js 论坛:

http://www.html5gamedevs.com/forum/16-babylonjs/

在那,你可以开始一个新的话题, 将破坏你娱乐场场景的createScene函数网址告诉大家, 问下是否有人乐意访问你的娱乐场场景并帮助你修正. 

这就是所谓的白板.  它使得其他人能很容易的在你创建的场景上工作, 并帮你指出错误之处.  清楚了创建场景函数是如何’可移植’了么?  从家里获得, 扔到娱乐场, 然后在上面折腾一阵.  如果有必要, 你可以点击娱乐场上的 保持 按钮, 产生一个网址.   最后到论坛上讲网址告诉其他人, 向他们求助.  很方便吧, 哼??  我们认为是这样的.

关于娱乐场更多

让我们再次访问上面发给你的保存的娱乐场场景网站.

http://babylonjs-playground.azurewebsites.net/#QKQHS

这次,我希望你按下 获取zip压缩包 按钮.  娱乐场将打开一个小面板让你下载该场景.  保存这个zip压缩文件到你家里电脑上某个新的空文件夹下.  现在使用一个 UNZIP 工具程序解压开.  注意那个文件夹下有一个index.html文件.  请将该文件用文本编辑器或编程用 编辑器打开.  它看起来像上面的大图片吧?  必需的.  Babylon.js 娱乐场的任何场景, 包括它里面预装的演示场景, 都可以通过 获取.zip压缩包 按钮下载到你家里的电脑上.  其中的大部分看起来都非常像上面的大图片.

Babylon.js 娱乐场有个教程.  就在 点击这儿.

哇, 到这儿信息量很大了,不是吗?  你已经学了如何识别一个场景文件 (大突破) 了, 学了它重要的 createScene() 函数, 而且学了怎么复制粘贴它到别处.  你已经见识了娱乐场里的 createScene() 函数, 而且为你介绍了它的 运行, 保存 和 获取.zip压缩包的按钮.

您正在成为Babylon.js工具专家.  我所说的 ‘工具’, 是指… 那些你学到的支持 createScene() 函数的东西.  你已经准备好加入学习代码知识,以用在创建场景的功能么?  我知道你准备好了.

深入 createScene()

  
我希望你在此访问下 Babylon.js 娱乐场 (如果可能的话,用新的窗口或标签打开), 只是这次我们访问的是它的基础网址:

http://babylonjs-playground.azurewebsites.net

注意当前标注了 基础场景的按钮.  (实际上它叫做场景选择按钮, 只是当前标上了’基础场景’).

请点击它.  注意那有许多不同当预装场景 (创建场景的功能).  可以在它们中自便的选择.  浏览一下, 在之中拖动鼠标, 甚或在编辑区域修改下代码然后点击 运行 .  你不可能毁坏预装的场景, 甚至你点击了 保存也不会.  你在 Babylon.js 的娱乐场的场景里很安全, 而且你可以看到许多的创建场景的函数.  你可以使用它们的设定玩一下, 再次点击 运行.  再次的, 你可以使用娱乐演示图任何一个演示上方的 获取 .zip压缩包*, 从而实现你的收集梦想.  方便, 是吧?

现在来讲干货stuff.  在Babylon.js里每次 createScene()调用 (也就是每个场景)通常需要三件事情:

1. 相机.  众多相机类型里3种常用的是, ArcRotateCamera(弧形旋转相机), FreeCamera(自由相机), 和 TouchCamera(触控相机).  在Babylon.js里有许多种可用的相机, 但是这3种是最常见的.  一个场景里可以编码任意多个相机, 但是只有其中一个能是’激活的相机’.  在操练系列教程里我们有一个例子, 专门谈论各种相机.

2. 光源.   在Babylon.js里有4种基础类型的光源.  它们是 PointLight(点光光源), SpotLight(聚光光源), DirectionalLight(平行光光源), 和 HemisphericLight(半球光源).  一个场景里编码任意数量的光源,  但是在场景光源列表里只有前4个光源被场景使用.

老实说, 光源不是绝对必需的.  如果场景里的网格对象都设置了material.emissiveColor(材料的颜色)或material.emissiveTexture(材料的纹理)属性, 那么它们自己会产生各自的光.  它们将是 ‘自发光的’.  注意, 如果一个场景里没有光是很容易迷失的.  好的建议是总是创建一个光源(半球体光源(HemisphericLight)是个非常方便的光源工具 - 应用到天空体上).  你可以通过调整它的 .intensity 值来设置光的亮度. 在操练系列教程里我们有一个例子, 专门谈论各种光源.

2. 有型物.  有型物也叫做 网格对象.  每个场景里都需要可视物,对吧?  相机是不可见的, 光源也不可见.  每个场景都需要个有型物, 或者许多个.  没有限制在你的场景里可有的网格对象个数.  一个网格对象可以是Babylon.js的许多内置有型物之一, 或者是你自己通过Babylon.js的顶点数据系统绘制的有型物, 或者是从外部建模软件,例如 Blender 或 3D Studio Maxl里’导入’到场景里的一个网格对象.

关于Babylon.js的场景, 在另外的 教程和文档里你可以学到许多.  而且别忘了察看娱乐场里 ‘createScene()’ 函数的预装演示场景.  Babylon.js的娱乐场是个学习乐园, 也充满乐趣.

Babylon.js 对象, 属性, 方法, 和值

你已经见识了一些创建场景的函数, 而且你也应该注意到大量Javascript代码被用来创建Babylon.js场景… 给些代码阐述下我的意思,  比如设置对象的属性值:

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">object.property = value;</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

让我们更深入的讨论这4个事情: 对象, 属性, 方法, 和 值.

对象

首先,不要把对象认为成 3D造型/网格.  那些事物品对象, 但此处, 我们谈论的事关于… 

Javascript 语言里的对象

Javascript 对象里的一些常见对象在 Babylon.js 场景里有使用… 它们叫做 引擎(engine), 场景(scene), 花布(canvas), 网格(mesh), 光源(light), 相机(camera), 三元向量(Vector3), 三元颜色(Color3), 动作管理器(ActionManager), 和动画(Animation). 

比如, 下面每行代码… 创建了一个Javascript对象 (或者多个):

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 创建一个 BABYLON.Engine 引擎对象类型.</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> engine = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> BABYLON.Engine(canvas, <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>);
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 创建一个 BABYLON.Scene 场景对象类型.</span>

<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> scene = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> BABYLON.Scene(engine);

<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 创建一个 BABYLON.FreeCamera 自由相机对象类型</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> camera = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> BABYLON.FreeCamera(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"freecam"</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> BABYLON.Vector3(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">5</span>), scene);

<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 创建一个 BABYLON.DirectionalLight 方向光对象类型</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> light = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> BABYLON.DirectionalLight(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"Dir0"</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> BABYLON.Vector3(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, -<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>), scene);

<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 创建一个 BABYLON.Mesh 网格对象类型</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> mybox = BABYLON.Mesh.CreateBox(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"box"</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6.0</span>, scene);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li></ul>

你该清楚了.  Javascript 对象, 常常用在 Babylon.js 场景里.  又是你创建它们, 另外一些时候你获得一个早些时候创建的对象的’引用’ 或 ‘句柄’ .  持有一个Javascript对象的引用或句柄, 实质上意味着和已有的对象建立了通信线.

这些每个 Javascript 对象都有命名的 ‘存储空间’ 来保存内容到里面.  通常是, 值, 数据, 和对象… 被存在这些内存空间里.  这些存储着值的空间被叫做对象的’属性’.  属性通常被 ‘设置(set)’ (将一个值放入存储空间), 和 ‘获取(get)’ (到存储空间查看里面是什么内容).

属性

属性是存储着的值.  这些纸被Babylon.js框架使用… 用于 ‘渲染(render)’ 场景.  这是个例子:

<code class="language-javascript hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">light.intensity = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0.5</span>;</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

此处, 我们给一个被称为’光’的对象设置其叫做 ‘intensity’的属性值为0.5 (0.5 叫做浮点值, 或仅称为’a float’).  我们后面简短的谈论下值.  我主要是希望你注意 那个具有intensity名字的属性(存储空间), 而且我们吧值0.5存到那里(属于那个称为’light’的对象).