【轉】探索基礎元素---基於WebGL的H5 3D遊戲引擎BabylonJS

原文地址：https://blog.csdn.net/AceWay/article/details/51472823

介紹

在本教程, 我們將學習如何使用Babylon.js創建基礎元素, 比如盒子, 球體, 和平面.

娛樂場演示場景2 - 七個基本形狀/網格

我怎麼做到這個 ?

一個簡單的方法是通過訪問娛樂場演示場景 02來開始使用基礎元素. 你可能想使用彈出菜單的’下載.zip壓縮包’ 選項. 你得到的zip壓縮包裏的index.html文件,包含有你開始創建基礎元素所需的一切. 記住那個鏈接, 因爲我們將更多的談論到它.

我確定你已經讀過Babylon.js初級教程 和 先前的教程, 因此你應該知道如何設置場景文件格式. 因此, 我們不在談論它了. 我們將一步步通過娛樂場演示場景02來學習. 在新標籤頁或窗口中打開那個鏈接, 然後返回此處, 我們馬上開始.

從盒子開始, 我們創建了高中基礎元素, 在該函數的最後將它們定位好(以防止它們堆疊起來). 讓們一一談論下各個基礎形狀/網格.

• 創建一個盒子

var box = BABYLON.Mesh.CreateBox("box", 6.0, 場景, false, BABYLON.Mesh.DEFAULTSIDE);

• 1

參數爲: 名字,盒子大小, 它們將放到場景, 是否可更新?(如果該網格後面必須被更新) 和可選的面朝向(參見下面). 如果你需要默認表現那麼最後兩個參數可以忽略:

var box = BABYLON.Mesh.CreateBox("box", 6.0, scene);

• 1

• 創建一個球體

var sphere = BABYLON.Mesh.CreateSphere("sphere", 10.0, 10.0, 場景, false,  BABYLON.Mesh.DEFAULTSIDE);

• 1

參數爲: 名字, 細分段數 (高度細節或不需), 大小, 將被放到的場景, 是否可更新?(如果該網格後面必須被更新) 和可選的面朝向(參見下面). 如果你需要默認的表現那麼最後兩個參數可以忽略:

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

• 1

記得根據你的網格對象到校調整細分段數 ;)

• 創建一個平面

var plane = BABYLON.Mesh.CreatePlane("plane", 10.0, scene, false, BABYLON.Mesh.DEFAULTSIDE);

• 1

參數爲: 名字, 大小, 和將被放到的場景, 是否可更新?(如果該網格後面必須被更新) 和可選的面朝向(參見下面). 如果你需要默認的表現,那麼最後兩個參數可以忽略 :

var plane = BABYLON.Mesh.CreatePlane("plane", 10.0, scene);

• 1

• 創建一個盤片(或着一個規則多邊形)

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

• 1

參數爲: 名字, 半徑, 邊數, 場景, 可更新否和可選的朝向(參見下面). 如果你需要默認的表現,那麼最後兩個參數參數可以忽略:

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

• 1

根據tessellation 的值, 你可以創建一個多邊形: 
3產生一個三角形, 
4產生一個正方形, 
5產生一個五邊形, 
6產生一個六邊形, 7產生一個七邊形, 8產生一個八卦形, 以此類推.

• 創建一個圓柱體

var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, 場景, false, BABYLON.Mesh.DEFAULTSIDE);

• 1

參數爲: 名稱, 高度, 頂直徑, 底直徑, 邊數, 高向細分度, 場景, 可更新否和可選的朝向(參見下面). 如果你需要默認表現,那麼最後兩個參數可以忽略:

var cylinder = BABYLON.Mesh.CreateCylinder("cylinder", 3, 3, 3, 6, 1, scene);

• 1

• 創建一個環面體

var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene, false, BABYLON.Mesh.DEFAULTSIDE);

• 1

參數爲: 名稱, 直徑, 厚度, 邊數(高度細節或不是), 場景, 可更新否和可選的朝向(參見下面). 如果你使用默認表現那麼最後兩個參數可忽略 :

var torus = BABYLON.Mesh.CreateTorus("torus", 5, 1, 10, scene);

• 1

• 創建一個結

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

• 1

參數爲: 名稱, 半徑, tube, 半徑上分段數, tubularSegments, p, q, 場景, 可更新否和可選的朝向(參見下面). 如果你使用默認的表現那麼最後的兩個參數可以忽略 :

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

• 1

將將在此處關於 結 學習更多知識.

• 創建線型網格

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);

• 1
• 2
• 3
• 4
• 5
• 6

參數爲: 名稱, [都好分隔的向量數組], 場景.

我可以解釋線型網格是如何工作的, 當時我認爲剋可以通過觀察上面的演示代碼而知曉. 注意 [ 和 ]. 這兩個是數組的起止標誌, 數值是Javascript的另一種值類型. 數組裏的頭個三元向量是線的開始地方. 那之後, 一個逗號, 然後下一個三元向量爲畫線的線一個定位點. 然後, 又一個逗號, 和又一個三元向標示點新定位點. 可以添加任意多個向量, 但是注意最後一個三元向量之後沒有逗號跟隨. 請按照個格式組織向量數組.

• 繪製點劃線網格

var dashedlines = BABYLON.Mesh.CreateDashedLines("dashedLines", [v1, v2, ... vn], dashSize, gapSize, dashNb, 場景);

• 1

參數爲 : 名稱, [三元向量數組], 劃線大小, 間隙大小, 段劃線數, 場景. 
作爲許多線段, 每條段先都是以三元向量組的方式呈現在空間裏. 上面函數設置了這條點劃線裏線段的數量, 每段都是由兩個連續三元向量定義. 
劃線大小 和 間隙大小 是指點劃線裏每個劃線和之間間隙的相對大小.

你可能會被我們新的線系統吸引住.

• 創建一條板帶

什麼是板帶 ?

首先, 想象一下一系列連續點定義的路徑. 
接下來，想象另一系列連續點，定義的一條路徑. 
現在, 如果你在第一條路徑和第二條路徑上互相間隔着連接點來構建三角形, 就像你繫鞋帶的方式, 你就會得到一個板帶.

你的路徑間不需要平行. 它們甚至不需要是直線或在同一平面內. 
它們可以是任何你想要的方式. 板帶就沿着你定義的路徑.

現在, 想象一下, 不是兩條路徑, 你定義了許多連續的不同路徑. 
成對路徑間構成的所有板帶會結合起來形成連續表面.

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

• 1

參數爲: 名稱, 路徑數組, 閉合數組, 閉合路徑, 偏移量, 場景, 可更新否?(如果網格之後要被修改) 和可選的朝向 (參見下面).

• 名稱: 一個字符串, 你想要給你的造型物定義的名稱,
• 路徑數組: 填充路徑的數組. 路徑也是數組, 由一系列連續點 三元向量 填充. 你需要至少一條路徑形成板帶,而且每條路徑包含至少四個 三元向量,
• 閉合數組: 布爾值, 如果爲真, 則會由 路徑數組 裏的第一條路徑和最後一條路徑產生一組額外的三角形,
• 閉合路徑: 布爾值, 如果爲真, 則 路徑數組 裏的每條路徑的最後一個點和其第一個點相連接,
• 偏移量 : 正數 (默認值是 路徑 大小的一半), 僅當 路徑數組 只有一條路徑時才必須指定. 此時板帶由該單條路徑上的 第 i 個點和第 i+偏移量 個點連接來構成. 這個參數會被忽略如果 路徑數組 裏有多於一條路徑,
• 場景 : 當前場景對象,
• 可更新否: 布爾值, 如果允許之後更新緞帶則設置爲true,
• 朝向: 期望的面朝向(BABYLON.Mesh.FRONTSIDE / BACKSIDE / DOUBLESIDE / DEFAULT).

如果僅需要使用默認表現則最後兩個參數可以被忽略:

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

• 1

如果你想知道處理該方法的更多細節, 你可能會閱讀參數化造型 部分.

• * 創業一個管子*

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

• 1
• 2

參數爲: 名稱, 路徑, 半徑, 曲面細分, 可選的半徑函數, 頭罩, 場景, 可更新否, 朝向.

• 名稱: 字符串, 管子網格的名字符, 
  • 路徑: 連續的三元向量數組, 至少兩個三元向量,
  • 半徑: 數值, 管子的半徑, 當 半徑函數 參數設置爲 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);

• 1

管子也可以通過設置一個半徑函數而作爲參數化造型 的方式使用.

可更新否

這個參數, 在每個網格創建方法裏出現… 告知該網格在創建後是否可以被更新. 
如果爲 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);

• 1

參數爲: 名稱, 寬度, 縱深, 子分段數, 場景

我們的 娛樂場演示場景01使用了一個CreateGround構造函數… 所以你可以使用上面的鏈接來看看它的行爲.

• 使用高度圖創建地面

var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "heightmap.jpg", 200, 200, 250, 0, 10, scene, false, successCallback);

• 1

參數爲: 名稱, 高度圖路徑, 寬度, 縱深, 子分段數, 最小高度,最大高度, 場景, 可更新否, 成功回調

高度圖地面很簡單, 但是我們決定創建一個獨立的教程講它, 以便能更多的講述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);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

參數爲: 名稱, 最小x值, 最小z值, 最大x值, 最大z, 細分數量 = 瓦片數量. (subdivisions.w : 寬度上的細分數量; subdivisions.h: 高度上的細分數量), 精度 = 一個瓦片內部的細分數量. (precision.w : 寬度上的精度; precision.h: 高度上的精度), 場景, 可更新否.

Kostar111 好人做到底了:爲我們提供了一個關於如何使用瓦片地圖的很好教程. 點擊這兒 查看該教程. 在那個鏈接, Kostar111全面地說明了瓷磚地面的工作方式，還提供了一些Babylon.js遊樂場景, 很好地演示了一些它的許多用途.

結束語

就是這樣!現在你已經看了我們所有的基礎元素, 同時看了它們的一些使用方法. 保持關注教程裏這方面的內容, 因爲新的基礎元素很快會被添加: 你會在這個章節裏發現更新了的名單和其所有參數的解釋. 
請自由設想你自己的基礎元素創意, 並把它們提交到論壇上. 如果你能,請幫助我們增加基礎元素列表.

下一步