探索基础元素---基于WebGL的H5 3D游戏引擎BabylonJS

介绍

在本教程, 我们将学习如何使用Babylon.js创建基础元素, 比如盒子, 球体, 和平面.

娱乐场演示场景2 - 七个基本形状/网格

我怎么做到这个 ?

一个简单的方法是通过访问娱乐场演示场景 02来开始使用基础元素. 你可能想使用弹出菜单的’下载.zip压缩包’ 选项. 你得到的zip压缩包里的index.html文件,包含有你开始创建基础元素所需的一切. 记住那个链接, 因为我们将更多的谈论到它.

我确定你已经读过Babylon.js初级教程先前的教程, 因此你应该知道如何设置场景文件格式. 因此, 我们不在谈论它了. 我们将一步步通过娱乐场演示场景02来学习. 在新标签页或窗口中打开那个链接, 然后返回此处, 我们马上开始.

从盒子开始, 我们创建了高中基础元素, 在该函数的最后将它们定位好(以防止它们堆叠起来). 让们一一谈论下各个基础形状/网格.

  • 创建一个盒子
var box = BABYLON.Mesh.CreateBox("box", 6.0, 场景, false, BABYLON.Mesh.DEFAULTSIDE);

参数为: 名字,盒子大小, 它们将放到场景, 是否可更新?(如果该网格后面必须被更新) 和可选的面朝向(参见下面). 如果你需要默认表现那么最后两个参数可以忽略:

var box = BABYLON.Mesh.CreateBox("box", 6.0, scene);
  • 创建一个球体
var sphere = BABYLON.Mesh.CreateSphere("sphere", 10.0, 10.0, 场景, false,  BABYLON.Mesh.DEFAULTSIDE);

参数为: 名字, 细分段数 (高度细节或不需), 大小, 将被放到的场景, 是否可更新?(如果该网格后面必须被更新) 和可选的面朝向(参见下面). 如果你需要默认的表现那么最后两个参数可以忽略:

var sphere = BABYLON.Mesh.CreateSphere("sphere", 10.0, 10.0, scene);

记得根据你的网格对象到校调整细分段数 ;)

  • 创建一个平面
var plane = BABYLON.Mesh.CreatePlane("plane", 10.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);

参数为: 名字, 大小, 和将被放到的场景, 是否可更新?(如果该网格后面必须被更新) 和可选的面朝向(参见下面). 如果你需要默认的表现,那么最后两个参数可以忽略 :

var plane = BABYLON.Mesh.CreatePlane("plane", 10.0, scene);
  • 创建一个盘片(或着一个规则多边形)
var disc = BABYLON.Mesh.CreateDisc("disc", 5, 30, scene, false, BABYLON.Mesh.DEFAULTSIDE);

参数为: 名字, 半径, 边数, 场景, 可更新否和可选的朝向(参见下面). 如果你需要默认的表现,那么最后两个参数参数可以忽略:

var disc = BABYLON.Mesh.CreateDisc("disc", 5, 30, scene);

根据tessellation 的值, 你可以创建一个多边形:

3产生一个三角形,

4产生一个正方形,

5产生一个五边形,

6产生一个六边形, 7产生一个七边形, 8产生一个八卦形, 以此类推.

  • 创建一个圆柱体
var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, 场景, false, BABYLON.Mesh.DEFAULTSIDE);

参数为: 名称, 高度, 顶直径, 底直径, 边数, 高向细分度, 场景, 可更新否和可选的朝向(参见下面). 如果你需要默认表现,那么最后两个参数可以忽略:

var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene);
  • 创建一个环面体
var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false, BABYLON.Mesh.DEFAULTSIDE);

参数为: 名称, 直径, 厚度, 边数(高度细节或不是), 场景, 可更新否和可选的朝向(参见下面). 如果你使用默认表现那么最后两个参数可忽略 :

var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene);
  • 创建一个结
var knot = BABYLON.Mesh.CreateTorusKnot("knot", 2, 0.5, 128, 64, 2, 3, scene, false, BABYLON.Mesh.DEFAULTSIDE);

参数为: 名称, 半径, tube, 半径上分段数, tubularSegments, p, q, 场景, 可更新否和可选的朝向(参见下面). 如果你使用默认的表现那么最后的两个参数可以忽略 :

var knot = BABYLON.Mesh.CreateTorusKnot("knot", 2, 0.5, 128, 64, 2, 3, scene);

将将在此处关于 结 学习更多知识.

  • 创建线型网格
var lines = BABYLON.Mesh.CreateLines("lines", [
    new BABYLON.Vector3(-10, 0, 0),
    new BABYLON.Vector3(10, 0, 0),
    new BABYLON.Vector3(0, 0, -10),
    new BABYLON.Vector3(0, 0, 10)
], scene);

参数为: 名称, [都好分隔的向量数组], 场景.

我可以解释线型网格是如何工作的, 当时我认为剋可以通过观察上面的演示代码而知晓. 注意 [ 和 ]. 这两个是数组的起止标志, 数值是Javascript的另一种值类型. 数组里的头个三元向量是线的开始地方. 那之后, 一个逗号, 然后下一个三元向量为画线的线一个定位点. 然后, 又一个逗号, 和又一个三元向标示点新定位点. 可以添加任意多个向量, 但是注意最后一个三元向量之后没有逗号跟随. 请按照个格式组织向量数组.

  • 绘制点划线网格
var dashedlines = BABYLON.Mesh.CreateDashedLines("dashedLines", [v1, v2, ... vn], dashSize, gapSize, dashNb, 场景);

参数为 : 名称, [三元向量数组], 划线大小, 间隙大小, 段划线数, 场景.

作为许多线段, 每条段先都是以三元向量组的方式呈现在空间里. 上面函数设置了这条点划线里线段的数量, 每段都是由两个连续三元向量定义.

划线大小间隙大小 是指点划线里每个划线和之间间隙的相对大小.

你可能会被我们新的线系统吸引住.

  • 创建一条板带

什么是板带 ?

首先, 想象一下一系列连续点定义的路径.

接下来,想象另一系列连续点,定义的一条路径.

现在, 如果你在第一条路径和第二条路径上互相间隔着连接点来构建三角形, 就像你系鞋带的方式, 你就会得到一个板带.

你的路径间不需要平行. 它们甚至不需要是直线或在同一平面内.

它们可以是任何你想要的方式. 板带就沿着你定义的路径.

现在, 想象一下, 不是两条路径, 你定义了许多连续的不同路径.

成对路径间构成的所有板带会结合起来形成连续表面.

var ribbon = BABYLON.Mesh.CreateRibbon("ribbon", [path1, path2, ..., pathn], false, false, 0, scene, false, BABYLON.Mesh.DEFAULTSIDE);

参数为: 名称, 路径数组, 闭合数组, 闭合路径, 偏移量, 场景, 可更新否?(如果网格之后要被修改) 和可选的朝向 (参见下面).

  • 名称: 一个字符串, 你想要给你的造型物定义的名称,
  • 路径数组: 填充路径的数组. 路径也是数组, 由一系列连续点 三元向量 填充. 你需要至少一条路径形成板带,而且每条路径包含至少四个 三元向量,
  • 闭合数组: 布尔值, 如果为真, 则会由 路径数组 里的第一条路径和最后一条路径产生一组额外的三角形,
  • 闭合路径: 布尔值, 如果为真, 则 路径数组 里的每条路径的最后一个点和其第一个点相连接,
  • 偏移量 : 正数 (默认值是 路径 大小的一半), 仅当 路径数组 只有一条路径时才必须指定. 此时板带由该单条路径上的 第 i 个点和第 i+偏移量 个点连接来构成. 这个参数会被忽略如果 路径数组 里有多于一条路径,
  • 场景 : 当前场景对象,
  • 可更新否: 布尔值, 如果允许之后更新缎带则设置为true,
  • 朝向: 期望的面朝向(BABYLON.Mesh.FRONTSIDE / BACKSIDE / DOUBLESIDE / DEFAULT).

如果仅需要使用默认表现则最后两个参数可以被忽略:

var ribbon = BABYLON.Mesh.CreateRibbon("ribbon", [path1, path2, ..., pathn], false, false, 0, scene);

如果你想知道处理该方法的更多细节, 你可能会阅读参数化造型 部分.

  • * 创业一个管子*
var tube = BABYLON.Mesh.CreateTube("tube", [V1, V2, ..., Vn], radius, tesselation, radiusFunction, cap, scene, false, BABYLON.Mesh.DEFAULTSIDE);

参数为: 名称, 路径, 半径, 曲面细分, 可选的半径函数, 头罩, 场景, 可更新否, 朝向.

  • 名称: 字符串, 管子网格的名字符,

    • 路径: 连续的三元向量数组, 至少两个三元向量,
    • 半径: 数值, 管子的半径, 当 半径函数 参数设置为 null时使用,
    • 曲面细分: 径向的段数,
    • 半径函数: 可选的, 一个返回半径值的 javascript 函数. 这个可以设置为 null,
    • 头罩: BABYLON.Mesh.NO_CAP, BABYLON.Mesh.CAP_START, BABYLON.Mesh.CAP_END, BABYLON.Mesh.CAP_ALL,
    • 可更新否: 布尔值, 该管子后面是否可以被更新,
    • 朝向: 期望有用的朝向 (前向, 后像 或 双向).

如果你仅仅要使用默认的表现则最后两个参数可以忽略:

var tube = BABYLON.Mesh.CreateTube("tube", [V1, V2, ..., Vn], radius, tesselation, radiusFunction, cap, scene);

管子也可以通过设置一个半径函数而作为参数化造型 的方式使用.

可更新否

这个参数, 在每个网格创建方法里出现… 告知该网格在创建后是否可以被更新.

如果为 false (默认值), 则该网格数仅仅往GPU传送一次.

如果为 true, 则该网格数据可以被重新计算并在每帧刷新时传递给GPU.

朝向

当一个网格被创建时, 可以为其提供一个可选的朝向.

该朝向被用来提供可见性而且/或则光反射性.

这个值有四个可能的值:

* BABYLON.Mesh.FRONTSIDE,

  • BABYLON.Mesh.BACKSIDE,
  • BABYLON.Mesh.DOUBLESIDE,
  • BABYLON.Mesh.DEFAULT 这是默认值, 当前同 FRONTSIDE.

这个参数时可选的. 如果没提供, 则 DEFAULT 值被设置.

(我们假设默认 backFaceCulling 被启用了)

例如, 假设你创建一个基本形状像, 比如一个盒子,球体或平面,你没给它的设置材质.

如果你到平面的背后或者盒子/球体的里面, 你会注意到那些面时不可见的: Babylon.js 网格通常都是由默认的朝向 FRONTSIDE 构成. 这意味着每个面只有一边可见.

试验下: http://www.babylonjs-playground.com/#14RNAU#4

如果你为网格应用了一个材质, 设置 material.backFaceCulling = false;, 同时用光源照明它, 你会注意到背面(或者里面)… 现在可见了, 但是它却不反射光. 同样的原因: 默认的朝向仍然是 FRONTSIDE.

(你可以用这个值来禁用 _backFaceCulling_ )

现在, 在你的网格构造函数里仅仅改变 朝向 参数为 BABYLON.Mesh.BACKSIDE. (也移除你试验的材质.) 你仅能看到平面的背面, 或者仅看到盒子和球体的里面 (内部的面).

试验: http://www.babylonjs-playground.com/#14RNAU#5

如果你为网格提供一些材质, 你可以看到光源仅仅能照射到背面 (平面的)或者里面 (盒子的, 球体的等).

(你可以用_朝向_值来禁用 _backFaceCulling_ )

最后, 改变 朝向 参数值为 BABYLON.Mesh.DOUBLESIDE.

正如你猜测的, 网格面现在两边可见了. 而且如果你提供了材质, 光也会在两边都反射.

试验: http://www.babylonjs-playground.com/#14RNAU#6

那么为何不总是用 BABYLON.Mesh.DOUBLESIDE 作为默认值 ?

因为此值创建一个前向面的网格两倍的顶点. 在其它方面, 你的网格消耗将翻倍.

(你不能用 _BABYLON.Mesh.DOUBLESIDE_ 值来禁用 _backFaceCulling_)

更多基础元素 - 地面

对这点, 我们在 娱乐场演示场景 02里谈论过该基础元素, 但有更多的重要网格造型 (基础元素)没有包含在那个演示场景里. 它们(下面例子)是Babylon.js创建’地面’的各种方法. 让我们看看:

  • 创建一个地面
var ground = BABYLON.Mesh.CreateGround("ground", 6, 6, 2, scene);

参数为: 名称, 宽度, 纵深, 子分段数, 场景

我们的 娱乐场演示场景01使用了一个CreateGround构造函数… 所以你可以使用上面的链接来看看它的行为.

  • 使用高度图创建地面
var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "heightmap.jpg", 200, 200, 250, 0, 10, scene, false, successCallback);

参数为: 名称, 高度图路径, 宽度, 纵深, 子分段数, 最小高度,最大高度, 场景, 可更新否, 成功回调

高度图地面很简单, 但是我们决定创建一个独立的教程讲它, 以便能更多的讲述Babylon.js的这个重要特征. 请看我们的高度图教程 以学习所有的高度图地面知识.

  • 创建一个瓦片地图

感谢论坛用户Kostar111提供了这个方便的瓦片地图构造方法. 这儿是创建一个瓦片地图所需的基础代码.


var precision = {
    "w" : 2,
    "h" : 2
};
var subdivisions = {
    ‘h‘ : 8,
    ‘w‘ : 8
};
var tiledGround = BABYLON.Mesh.CreateTiledGround("Tiled Ground", -3, -3, 3, 3, subdivisions, precision, scene, false);

参数为: 名称, 最小x值, 最小z值, 最大x值, 最大z, 细分数量 = 瓦片数量. (subdivisions.w : 宽度上的细分数量; subdivisions.h: 高度上的细分数量), 精度 = 一个瓦片内部的细分数量. (precision.w : 宽度上的精度; precision.h: 高度上的精度), 场景, 可更新否.

Kostar111 好人做到底了:为我们提供了一个关于如何使用瓦片地图的很好教程. 点击这儿 查看该教程. 在那个链接, Kostar111全面地说明了瓷砖地面的工作方式,还提供了一些Babylon.js游乐场景, 很好地演示了一些它的许多用途.

结束语

就是这样!现在你已经看了我们所有的基础元素, 同时看了它们的一些使用方法. 保持关注教程里这方面的内容, 因为新的基础元素很快会被添加: 你会在这个章节里发现更新了的名单和其所有参数的解释.

请自由设想你自己的基础元素创意, 并把它们提交到论坛上. 如果你能,请帮助我们增加基础元素列表.

下一步



我们看到过, 我们需要一点’定位’来保持我们基础元素不覆盖场景里另一个基础元素. 现在,我们进一步的学习定位(有时叫做平移) 还有旋转和缩放. 准备好了吗?你肯定准备好了! 点击这儿进入下一教程.

时间: 05-22

探索基础元素---基于WebGL的H5 3D游戏引擎BabylonJS的相关文章

创建基础场景---基于WebGL的H5 3D游戏引擎BabylonJS

在本教程里, 我们将用Babylon.js创建一个基础的3D场景. 具有两个造型物的基础场景 在你开始之前,请确定你有个支持WebGL的浏览器 (比如:IE11+, 火狐4+, 谷歌浏览器9+, Opera15+, 等.). HTML部分 首先, 创建一个基础的HTML5网页: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=

Top 10:HTML5、JavaScript 3D游戏引擎和框架

由于很多人都在用JavaScript.HTML5和WebGL技术创建基于浏览器的3D游戏,所有JavaScript 3D游戏引擎是一个人们主题.基于浏览器的游戏最棒的地方是平台独立,它们能在iOS.Android.Windows或其他任何平台上运行. 有很多的JavaScript能够用于创建基于浏览器.使用HTML5和WebGL的3D游戏.然后,选择一个合适的游戏引擎是一个不小的挑战,它有时能帮你完成项目或突破项目瓶颈. 为了让你的选择变的容易,我们已经通过分析大多数JavaScript 3D游

HTML5、JavaScript 3D游戏引擎和框架

由于很多人都在用JavaScript.HTML5和WebGL技术创建基于浏览器的3D游戏,所有JavaScript 3D游戏引擎是一个人们主题.基于浏览器的游戏最棒的地方是平台独立,它们能在iOS.Android.Windows或其他任何平台上运行. 有很多的JavaScript能够用于创建基于浏览器.使用HTML5和WebGL的3D游戏.然后,选择一个合适的游戏引擎是一个不小的挑战,它有时能帮你完成项目或突破项目瓶颈. 为了让你的选择变的容易,我们已经通过分析大多数JavaScript 3D游

Java 3D游戏引擎——JME(java Monkey Engine)

转自:http://bbs.gameres.com/forum.php?mod=viewthread&tid=180732 JME(java Monkey Engine),一个非常棒的Java 3D游戏引擎 一直以来,由于性能等原因,Java并不是3D图形应用的主流平台,但随着各种新技术的出现,这种情况有了很大改变.从开始的JIT.Static compilers,到现代的HotSpot技术,使Java程序的运行效率越来越高,目前已经接近于C++程序.此外,通过JNI技术,Java程序可以调用任

3D游戏引擎系列九

笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者,国家专利发明人;已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D实战核心技术详解>电子工业出版社等. CSDN课程视频网址:http://edu.csdn.net/lecturer/144 Phong 着色法是结合了多边形物体表面反射光的亮度,并以特定位置的表面法线作为像素参考值,以插值方式来估计其周围位置像素的色值.与Gouraud着色法比较,Phong着色法的效

一个人独立开发 3D 游戏引擎可能吗?

作者:孙志超链接:https://www.zhihu.com/question/24733255/answer/42000966来源:知乎著作权归作者所有,转载请联系作者获得授权. 当然可以,但难道有个引擎,就可以做出真正商业化的游戏么?而且国产游戏大部分是网游啊. 几年前的老文--<一个人的服务器端>(只是为了说明游戏开发难度,不是针对题主问题.) 技术准备 能够做这个MMO的触发点是通过某些途径得到了某个大公司使用的一款3D引擎,其他的都是白手起家.当时大家还不知道有"分布式服务

基于HTML5的燃气3D培训仿真系统

最近上线了的基于HTML5的燃气3D培训仿真系统,以前的老系统是采用基于C++和OpenGL的OpenSceneGraph引擎设计的,OSG引擎性能和渲染效果各方面还是不错的,但因为这次新产品需求要求能运行多移动终端,多年前基于MFC封装OSG的老系统架构也实在该退休了,这年头找能维护MFC这种古董级GUI的靠谱人也非易事. 系统最终采用HT for Web的3D框架实现,项目中的程序员也很高兴有这样的机会终于摆脱维护MFC老系统的宿命,虽然大家都只有C++的开发经验,对HTML/CSS/JS并

Cocos2d-x 基础元素

 Cocos2d-x  基础元素 看过本章,然后实践之后,应该会掌握以下的认识: 1.Cocos2d-x引擎的基本运转过程 2.Cocos2d-x引擎的一些初始设置 3.对导演及图层及现实对象的认识 4.如何定义自己的显示对象 1.引擎的运转 游戏设计的问题: 在游戏设计之初,我们就需要设置游戏是横屏的还是竖屏的. 展示图像的清晰度是多少? 帧数? 适配哪些屏幕? 在处理以上问题之前,我们需要了解引擎的运转是怎么样的? (以后补充) 关于XCode设置游戏屏幕竖屏的方式: 2.显示对象 每一个节

《DirectX 9.0 3D游戏开发编程基础》 第一章 初始化Direct3D 读书笔记

REF设备 参考光栅设备,他能以软件计算方式完全支持Direct3D Api.借助Ref设备,可以在代码中使用那些不为当前硬件所支持的特性,并对这此特性进行测试. D3DDEVTYPE 在程序代码中,HAL设备用值D3DDEVTYPE_HAL来表示.该值是一个枚举变量.REF设备用D3DDEVTYPE_REF来表示.这种类型非常重要,你需要铭记,因为在创建设备的时候,我们必须指定使用哪种设备类型. COM(组件对象模型) 创建COM接口时不可以使用c++关键字new.此外使用完接口,应调用Rel

Cocos2d-x 的3D游戏制作官方教程(中文翻译)

Cocos2d-x 在版本3开始已经支持了3D游戏开发的特性,我在官网文档看到3D开发的部分,觉得有必要记录一下,权当做学习笔记.因为只花了半天时间翻译,而且能力有限,各位看官勿喷. 本博客虽然水分很足,但是也算是博主的苦劳了,如需转载,请附上本文链接http://blog.csdn.net/cyh_24/article/details/45702343,不甚感激! 相信,你已经对Cocos2d-x有所了解,并且将它作为一种2D游戏引擎来看待.但是,从版本3开始,我们已经将3D一些特性添加到了C