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文件里面了。(译者注)