2. 迈出第一步-让babylon运行起来
2. 迈出第一步-让babylon运行起来
本教程翻译自官方教程First Steps，各位也可以进入本站镜像站点查看
本文目录
第一步
Babylon.JS使用了HTML5的canvas元素作为容器，可以非常方便的在Web上进行3D编程。
Babylon.js与非常著名的three.js类似，都是构建在webGL之上，用于实现3d效果，Babylon.js的优势在于很多有用的功能都是原生提供，并且社区非常活跃，在里面提问都会得到回复，而且playground提供的演示也非常方便，最近发布的新版本还提供了ios、windows、android的原生执行环境，所以我们很看好babylon未来的发展。
Playground-一个很方便的babylon代码演示工具
本教程会提供一个最快、最简单的方法来让你制作属于自己的场景。其实创建一个3d场景非常容易，一个相机、一组灯光和若干3d物体就搞定了。
Playground是一个专为babylon打造的类似codeOpen或者jsfiddle的在线代码编辑器，你可以在里面进行任意的实验，创建任意的3d场景，保存并分享给其他人，也可以查看和编辑其它人分享的3d场景，是一个学习babylon编程的利器。这是更多关于playground的介绍
在Playground中创建一个3d场景，可以参照下面的例子：
// 初始化一个场景，engine是Playground准备好的默认参数
var scene = new BABYLON.Scene(engine);
// 添加一个相机，并绑定鼠标事件
var camera = new BABYLON.ArcRotateCamera(
"Camera",
Math.PI / 2,
Math.PI / 2,
2,
BABYLON.Vector3.Zero(),
scene
);
camera.attachControl(canvas, true);
// 添加2个灯光到场景中
var light1 = new BABYLON.HemisphericLight(
"light1",
new BABYLON.Vector3(1, 1, 0),
scene
);
var light2 = new BABYLON.PointLight(
"light2",
new BABYLON.Vector3(0, 1, -1),
scene
);
// 添加一个球体到场景中
var sphere = BABYLON.MeshBuilder.CreateSphere(
"sphere",
{ diameter: 2 },
scene
);
//Playground中必须返回一个创建好的场景实例
return scene;
Playground会准备好执行环境，你不必考虑babylon怎么引入，HTML怎么写，canvas如何的摆放，只需要专心处理核心逻辑，相当于Playground帮你处理好了所有食材，接下来只需要下锅就行, 这是上面的代码在Playground中展示的效果
搭建自己的HTML执行环境
自己从零开始搭建babylon执行环境，这是把babylon引入到自己项目中的必经之路，你需要考虑更多的东西，例如如何引入babylon的js文件，并且在平板电脑和手机上，BabylonJS使用pointer事件而不是mouse事件，因此也需要加载PEP.js。
此外，首先需要把canvas添加到body中，它决定了3d场景的渲染位置，然后我们还需要把这个canvas引入到我们的JavaScript代码中，用它来初始化babylon引擎，得到一个engine对象，使用这个engine对象来创建我们的3d场景scene。
最后，还有一个很重的步骤，让scene开始执行渲染，Playground中不需要这一步，因为它在已经为我们自动做了。所以这导致很多人会忽略这一步，觉得自己初始化了场景，加入了物体，效果就出来了，但是场景却出不来。这一步的关键就是调用engine对象的runRenderLoop方法，让scene在这个方法中进行60fps的不间断渲染，而且也可以让3d场景自动适应画布的大小，在我们改变浏览器窗口大小的时候，做到大小自适应。
HTML执行环境的代码模板
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Babylon Template</title>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
</head>
<body>
<canvas id="renderCanvas" touch-action="none"></canvas> //touch-action="none" for best results from PEP
<script>
var canvas = document.getElementById("renderCanvas"); // 得到canvas对象的引用
var engine = new BABYLON.Engine(canvas, true); // 初始化 BABYLON 3D engine
/******* Add the create scene function ******/
var createScene = function () {
// 创建一个场景scene
var scene = new BABYLON.Scene(engine);
// 添加一个相机，并绑定鼠标事件
var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, new BABYLON.Vector3(0,0,5), scene);
camera.attachControl(canvas, true);
// 添加一组灯光到场景
var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);
var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, -1), scene);
// 添加一个球体到场景中
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter:2}, scene);
return scene;
};
/******* End of the create scene function ******/
var scene = createScene(); //Call the createScene function
// 最后一步调用engine的runRenderLoop方案，执行scene.render()，让我们的3d场景渲染起来
engine.runRenderLoop(function () {
scene.render();
});
// 监听浏览器改变大小的事件，通过调用engine.resize()来自适应窗口大小
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
注意事项
- 上面的栗子都使用了 MeshBuilder 方法来创建形状物体，相比旧的 BABYLON.Mesh.Create 创建方式更加方便。因为历史原因，以前有很多Playground中的栗子都使用了 BABYLON.Mesh.Create 方法来创建物体，我们更加推荐 MeshBuilder 方法。
- 在pointer事件的兼容处理中，babylon以前是使用 hand.js ，但是它的作者已经不再维护，所以改为了使用 PEP.js 来实现，目前两者都可以正常运行。
下一步
现在你可以进入4. 了解基本形状物体及其要素来进一步学习如何创建更多的形状，如球体、圆柱体、长方体等物体。
延伸阅读
外站延伸阅读
有用的外站链接
BabylonJS官方主页
Babylon中文网
Playground
PEP Github
hand.js Github
贡献者
参与贡献? 联系alexads@foxmail.com