01-创建一个基础场景
发表于5年前(Mar 23, 2017 7:49:00 PM) 阅读 4144 评论 0
标签: babylonjs
在本教程，我们将会使用Babylon.js创建一个基础的3D场景。
在上面基础场景里面有两个基础图形。
在开始前，请您确认您的浏览器是否支持WebGL特性（Internet Explorer 11+, Firefox 4+, Google Chrome 9+, Opera 15+等等是支持的）。
HTML代码部分
首先，创建一个基本的HTML5 web页面：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Babylon - Basic scene</title>
</head>
<body>
</body>
</html>
CSS样式代码部分
为了让canvas最大化显示，我们在head标签中添加CSS样式代码：
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
框架JavaScript代码引入部分
现在我们加载我们框架需要的文件。在CSS代码后面，（但是依然在head标签内）加入下面代码：
<script src="babylon.js"></script>
<script src="hand.js"></script>
<script src="cannon.js"></script> <!-- optional physics engine -->
<!-- <script src="Oimo.js"></script> New physics engine -->
（如果您还没有上面的文件，您可以在下面地址找到他们：https://github.com/BabylonJS/Babylon.js, http://handjs.codeplex.com/）
接下来，我们在body内添加HTML5的canvas元素，用来绘制我们的场景。
<canvas id="renderCanvas"></canvas>
现在，我们开始写JavaScript代码。依然是在body代码内部，我们添加：
<script>
// Get the canvas element from our HTML above
var canvas = document.getElementById("renderCanvas");
// Load the BABYLON 3D engine
var engine = new BABYLON.Engine(canvas, true);
接下来，我们将添加创建场景的代码。为了使您的应用更灵活，我们建议先创建createScene方法。除了创建一个Babylon的Scene场景对象，createScene方法还添加了一个场景的基本要求：一个Camera摄像机，一个light光源，还有一些图形和物体。
所以现在我们已经将整个createScene方法加入到了web页面：
// This begins the creation of a function that we will 'call' just after it's built
var createScene = function () {
// Now create a basic Babylon Scene object
var scene = new BABYLON.Scene(engine);
// Change the scene background color to green.
scene.clearColor = new BABYLON.Color3(0, 1, 0);
// This creates and positions a free camera
var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
// This targets the camera to scene origin
camera.setTarget(BABYLON.Vector3.Zero());
// This attaches the camera to the canvas
camera.attachControl(canvas, false);
// This creates a light, aiming 0,1,0 - to the sky.
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
// Dim the light a small amount
light.intensity = .5;
// Let's try our built-in 'sphere' shape. Params: name, subdivisions, size, scene
var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
// Move the sphere upward 1/2 its height
sphere.position.y = 1;
// Let's try our built-in 'ground' shape. Params: name, width, depth, subdivisions, scene
var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);
// Leave this function
return scene;
}; // End of createScene function
确实，上面的方法有点复杂，但是不要被它吓到。在接下来的教程中，我们会学习创建lights（光源），cameras（摄像头）的参数和属性，以及如何创建图形等等。现在最主要的是记住createScene方法已经包含了创建场景的必要条件，包括：
- 一个Babylon Scene（场景）对象
- 一个绑定好的camera（摄像头）对象
- 一个对好焦点的light（光源）对象
- 一个坐标为0,1,0的球体（我们将它往y轴正方向移动了）
- 一个坐标为0,0,0（默认坐标）的平面
接下来还有三件事我们需要做。首先，在刚刚完成的代码后面添加调用createScene方法的代码：
// Now, call the createScene function that you just finished creating
var scene = createScene();
然后，最重要的是添加循环渲染：
// Register a render loop to repeatedly render the scene
engine.runRenderLoop(function () {
scene.render();
});
最后，添加canvas/window的重置大小处理事件，这个是可选的，但是非常有用：
// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
engine.resize();
});
现在，所有的JavaScript代码应添加完毕，确保您正确关闭了script，body和html标签。HTML5页面的最后三行代码应该是：
</script>
</body>
</html>
如果您完成了，保存您的文件（同babylon.js，hand.js和cannon.js在同一目录）用您开始准备的支持WebGL的浏览器打开。您会看到一个新的场景以3D的方式展现在canvas里面。
您可以在这里找到本章createScene方法代码的精确复制。同时您可以在线实时的进行查看。还可以使用Get.zip选项来下载整个index.html文件。
遇到了问题？
下面是整个web页面的代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Babylon - Basic scene</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="babylon.js"></script>
<script src="hand.js"></script>
<script src="cannon.js"></script> <!-- optional physics engine -->
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script type="text/javascript">
// Get the canvas element from our HTML below
var canvas = document.querySelector("#renderCanvas");
// Load the BABYLON 3D engine
var engine = new BABYLON.Engine(canvas, true);
// -------------------------------------------------------------
// Here begins a function that we will 'call' just after it's built
var createScene = function () {
// Now create a basic Babylon Scene object
var scene = new BABYLON.Scene(engine);
// Change the scene background color to green.
scene.clearColor = new BABYLON.Color3(0, 1, 0);
// This creates and positions a free camera
var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
// This targets the camera to scene origin
camera.setTarget(BABYLON.Vector3.Zero());
// This attaches the camera to the canvas
camera.attachControl(canvas, false);
// This creates a light, aiming 0,1,0 - to the sky.
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
// Dim the light a small amount
light.intensity = .5;
// Let's try our built-in 'sphere' shape. Params: name, subdivisions, size, scene
var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
// Move the sphere upward 1/2 its height
sphere.position.y = 1;
// Let's try our built-in 'ground' shape. Params: name, width, depth, subdivisions, scene
var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);
// Leave this function
return scene;
}; // End of createScene function
// -------------------------------------------------------------
// Now, call the createScene function that you just finished creating
var scene = createScene();
// Register a render loop to repeatedly render the scene
engine.runRenderLoop(function () {
scene.render();
});
// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
engine.resize();
});
</script>
</body>
</html>
更深入一步
在基础场景教程里，我们主要讨论的东西都包含在createScene方法里面（上面虚线之间的代码）。我们假定您已经知道如何将createScene方法加入到HTML5文档里（就如上面）。
记住这个页面代码布局，createScene方法是核心部分。当您使用过一段时间的Babylon.js Playground，您会发现createScene方法非常好用，您可以很容易的复制或者粘贴他到playground的编辑窗口，这样可以很方便然别人来帮助你解决问题，同样，您也可以很方便的帮助别人解决问题。
下一步
现在我们将进一步学习如何创建更多的元素，像球体，圆柱体，盒子等等。
下一章节-基础元素
ps：2.5版本以后应该是已经没有hand.js这个文件，可能已经合并到babylon.js文件里面了。（译者注）