00-入门
发表于5年前(Mar 23, 2017 12:25:00 PM)  阅读 3035  评论 0
标签: babylonjs
babylonjs
一个基于webGL和JavaScript的开源3D引擎。
快速安装
使用BdbylonJS开发应用并不需要在您电脑上额外安装其他软件。同样客户运行您的应用也不需要安装任何东西。您待会可以在下面的入门教程中看到这一切。您可以通过查看文档结构图来了解一个大概,或者查看更详细的内容。
WebGL
Web图形库,也可以说它是一个JavsScript的API,用来在一些兼容WebGL的浏览器上展现可交互的3D图形以及2D图形,而且不需要别的任何插件。
JavaScript
同ECMAScript,JavaScript是一个动态的、基于原型的脚本语言,功能非常强大。广泛用于客户端(有时甚至用于服务端,本站就是)。BabylonJS就是基于JavsScript语言的。
快速入门
首先,我们下载最新版本的BabylonJS,然后,检查一下您的浏览器是否支持WebGL特性(支持的有Internet Explorer 11+/Firefox 4+/Google Chrome 9+/ Opera 15+...)。创建一个工程目录来放置刚下载的BabylonJS,并创建一个index.html文件,目录结构如下:
yourAwesomeProject
|- index.html
|- babylon.2.3.js
我们只在index.html文件里面写几句代码,以保证这个例子足够简单和简洁。HTML文件内容如下:
<!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.3.debug.js"></script>
</head>
<body>
<canvas id="renderCanvas"></canvas>
</body>
</html>
正如你所看到的,我们在body标签内插入了一个canvas标签,这个canvas标签将用来展示我们3D渲染的结果。我们再插入几句样式代码到head标签内:
<style>
html, body {
overflow: hidden;
width : 100%;
height : 100%;
margin : 0;
padding : 0;
}
#renderCanvas {
width : 100%;
height : 100%;
touch-action: none;
}
</style>
现在我们还需要编写几句必要的javascript代码来运行我们的例子。将下面代码插入到body标签结束之前:
<script>
window.addEventListener('DOMContentLoaded', function() {
// your code here
});
</script>
你可以看到,我们在DOMContentLoaded时间处理函数里面留下了一块地方,待会我们将在这块地方编写代码,以确保这些代码是在这个DOM加载完成后再执行。
下面编写的代码对于BabylonJS应用来说非常基础,就是创建一个场景,插入和显示一些物体(在这里,我们插入两个基础图形,球体和地面)。我们将一步步来实现。
首先我们需要拿到HTML文档中canvas元素的引用:
var canvas = document.getElementById('renderCanvas');
然后,加载Babylon 3D引擎:
var engine = new BABYLON.Engine(canvas, true);
然后,我们创建一个场景。为了使您的应用更灵活,我们建议先创建createScene方法。除了创建一个Babylon的Scene场景对象,createScene方法还添加了一个场景的基本要求:一个Camera摄像机,一个light光源,还有两个基础图形(球体和地面)。
var createScene = function() {
// create a basic BJS Scene object
var scene = new BABYLON.Scene(engine);
// create a FreeCamera, and set its position to (x:0, y:5, z:-10)
var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);
// target the camera to scene origin
camera.setTarget(BABYLON.Vector3.Zero());
// attach the camera to the canvas
camera.attachControl(canvas, false);
// create a basic light, aiming 0,1,0 - meaning, to the sky
var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);
// create a built-in "sphere" shape; its constructor takes 5 params: name, width, depth, subdivisions, scene
var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);
// move the sphere upward 1/2 of its height
sphere.position.y = 1;
// create a built-in "ground" shape; its constructor takes the same 5 params as the sphere's one
var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);
// return the created scene
return scene;
}
现在,我们的createScene方法应准备好了,我们要做的就是去调用它:
var scene = createScene();
接下来的三行代码非常重要,他们用来告诉canvas,反复循环渲染上面的场景:
engine.runRenderLoop(function() {
scene.render();
});
最后,我们来添加一点代码,以确保在canvas或window大小变化时,我们的场景也会跟着变化:
window.addEventListener('resize', function() {
engine.resize();
});
所有的工作都已完成,现在保存您的文件,然后用你最喜欢的浏览器打开index.html文件,您将会看到如下效果:
您可以点击上面的图片,看到一个BabylonJS平台提供的实时例子。
如果您的演示文档无法正常运行,您可以将下面的代码重新复制到您的index.html文件中:
<!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.3.debug.js"></script>
<style>
html, body {
overflow: hidden;
width : 100%;
height : 100%;
margin : 0;
padding : 0;
}
#renderCanvas {
width : 100%;
height : 100%;
touch-action: none;
}
</style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script>
window.addEventListener('DOMContentLoaded', function(){
// get the canvas DOM element
var canvas = document.getElementById('renderCanvas');
// load the 3D engine
var engine = new BABYLON.Engine(canvas, true);
// createScene function that creates and return the scene
var createScene = function(){
// create a basic BJS Scene object
var scene = new BABYLON.Scene(engine);
// create a FreeCamera, and set its position to (x:0, y:5, z:-10)
var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);
// target the camera to scene origin
camera.setTarget(BABYLON.Vector3.Zero());
// attach the camera to the canvas
camera.attachControl(canvas, false);
// create a basic light, aiming 0,1,0 - meaning, to the sky
var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);
// create a built-in "sphere" shape; its constructor takes 5 params: name, width, depth, subdivisions, scene
var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);
// move the sphere upward 1/2 of its height
sphere.position.y = 1;
// create a built-in "ground" shape; its constructor takes the same 5 params as the sphere's one
var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);
// return the created scene
return scene;
}
// call the createScene function
var scene = createScene();
// run the render loop
engine.runRenderLoop(function(){
scene.render();
});
// the canvas/window resize event handler
window.addEventListener('resize', function(){
engine.resize();
});
});
</script>
</body>
</html>