繼續上篇隨筆
步驟如下：
一：http://www.babylonjs.com/中下載源碼。獲取其中babylon.2.2.js。建立gulp項目
二：參見http://doc.babylonjs.com/部分，建立第一個demo
以下是個人完成后的demo分享
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> <title>Babylon - Getting Started</title> <!-- link to the last version of babylon --> <script src="babylon.2.2.max.js"></script> </head> <style> html, body { overflow: hidden; width : 100%; height : 100%; margin : 0; padding : 0; } #renderCanvas { width : 100%; height : 100%; touch-action: none; } </style> <body> <canvas id="renderCanvas"></canvas> <script> window.addEventListener('DOMContentLoaded', function() { //獲取畫布對象 var canvas = document.getElementById('renderCanvas'); //加載巴比倫3D引擎 var engine = new BABYLON.Engine(canvas, true); //創建場景 var createScene = function() { // 通過引擎創建基本場景 var scene = new BABYLON.Scene(engine); // 創建一個開放免費的相機，地點位於x:0(橫向距離), y:5(高度), z:-10(縱向距離) var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(9, 5,-10), scene); // 相機到場景的起源 camera.setTarget(BABYLON.Vector3.Zero()); // 相機放置畫布 camera.attachControl(canvas, false); // 創建基本光源, 目標位於 x:0,y:1,z:0 -(由天空出現) var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene); // 創建一個內置的“球”的形狀,它的構造函數包括5個參數:名稱、寬度、深度、細分,場景(例子中僅4個參數) var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene); // 球向上移動高的二分之一距離 sphere.position.y = 1; // 創建一個內置的“地面”，它的構造函數包括5個參數:名稱、寬度、深度、細分,場景 var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene); // 返回該場景 return scene; } //賦予該場景於變量 var scene = createScene(); //在引擎中循環運行這個場景 engine.runRenderLoop(function(){ scene.render(); }); //追加事件：帆布與大小調整程序 window.addEventListener('resize', function(){ engine.resize(); }); }); </script> </body> </html>
完成這個后，一個初步的思路達成。
一個基礎構造分為了：鏡頭+渲染+場景。輔助部分包括光源+模型+畫布
坐標點的三部分：X（長）,Y（高度）,Z（深度）
BABYLON對象下擁有相機的定義，光源的定義
BABYLON.Mesh對象下有個簡單物體的定義
接着便發現了更合適的學習方式：http://www.babylonjs-playground.com