初学WebGL引擎-BabylonJS：第1篇-基础构造
继续上篇随笔
步骤如下：
一：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
