踏得网: 发现和展示WEB魔法
Babylon.js入门简介和开发实例
Babylon.js是一款WebGL开发框架。和Three.js类似。主要的技术区别是Three.js还试图回退兼容CSS 3D。Three.js是完全社区推动的，比Babylon.js要成熟些，而Babylon.js是微软推动的，和微软的相关技术结合更好。本文对Babylon.js的使用做个简单的介绍。首先的首先，请确保你的浏览器支持WebGL(IE11+/Edge/Firefox 4+/Google Chrome 9+/ Opera 15+/Safari...)。如何你使用sublime等桌面工具开发，那么首先你得下载最新版本的，创建一个项目，文件如下:yourProject
|- index.html
|- babylon.2.3.js在本文中，我们简化下，直接使用：只要有浏览器即可，无需下载或安装任何软件。在其中的HTML面板()中编写如下代码：&script src="http://cdn.babylonjs.com/2-3/babylon.js"&&/script&
&canvas id="renderCanvas"&&/canvas&WebGL需要借助HTML5的canvas元素来作为3D渲染的容器。所以上面的代码我们在文档中插入了一个id为renderCanvas的canvas元素。接着我们在CSS面板()中编写如下样式代码，让canvas元素占满预览渲染窗口（右下角的窗口）：html, body {
padding : 0;
#renderCanvas {
touch-action:
}接着我们在JavaScript面板（）中编写JS脚本：window.addEventListener('DOMContentLoaded', function() {
// 我们的渲染代码
});上面的代码使得我们的绘制脚本确保会在文档加载完成后被执行。我们接下来完成一个基本场景、基本3D网孔模型的创建。首先我们获得canvas元素：var canvas = document.getElementById('renderCanvas');然后，使用该canvas元素创建babylon渲染引擎:var engine = new BABYLON.Engine(canvas, true);接着，我们来创建3D场景，包含相机、光源和两个基本的网孔模型（一个球体和一个平面）：var createScene = function() {
// 创建一个基本的Scene对象，用来容纳所有其他对象
var scene = new BABYLON.Scene(engine);
// 创建一个相机，设置其位置为(x:0, y:5, z:-10)
var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), scene);
// 相机聚焦在场景原点位置
camera.setTarget(BABYLON.Vector3.Zero());
// 使得我们可以控制相机拍摄角度，和three.js中的OrbitsControl效果类似，但简单得多
camera.attachControl(canvas, false);
// 创建一个半球形光源,朝向为天空
var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);
// 创建一个内置的“球”体；其构造函数的参数：名称、宽度、深度、精度，场景，其中精度表示表面细分数。
var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);
// 设置球体位置，使其位于平面之上
sphere.position.y = 1;
// 创建一个内置的“地面”形状；其构造函数的5个参数和球体一样
var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);
var scene = createScene();接下来，我们需要在canvas中渲染这个场景（注意渲染是一个定时循环）：engine.runRenderLoop(function() {
scene.render();
});这样一个简单而完整的WebGL应用就开发好了！点击[运行]菜单或者按住CTRL+R快捷键，预览窗口将呈现如下的结果:我们还可以给3D模型添加材料，比如给地面添加材料，代码类似如下：var groundMaterial = new BABYLON.StandardMaterial("groundMaterial", scene);
groundMaterial.diffuseColor = new BABYLON.Color3(0.1, 0.3, 0.1);
var ground = BABYLON.Mesh.CreateGround("ground", 10, 10, 2, scene);
ground.material = groundM
ground.receiveShadows =最终的作品如下图所示，点击图片可以链接到：
没有更多推荐了，初学WebGL引擎-BabylonJS：第1篇-基础构造
时间： 23:51:34
&&&& 阅读：866
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 继续上篇随笔
&&& 步骤如下：
&&& 一：http://www.babylonjs.com/中下载源码。获取其中babylon.2.2.js。建立gulp项目
&&& 二：参见http://doc.babylonjs.com/部分，建立第一个demo
&&& 以下是个人完成后的demo分享
&!DOCTYPE html&
&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&
html, body {
overflow: hidden;
padding : 0;
#renderCanvas {
touch-action: none;
&canvas id="renderCanvas"&&/canvas&
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);
// 返回该场景
//赋予该场景于变量
var scene = createScene();
//在引擎中循环运行这个场景
engine.runRenderLoop(function(){
scene.render();
//追加事件：帆布与大小调整程序
window.addEventListener(‘resize‘, function(){
engine.resize();
&&& 完成这个后，一个初步的思路达成。
&&& 一个基础构造分为了：镜头+渲染+场景。辅助部分包括光源+模型+画布
&&& 坐标点的三部分：X（长）,Y（高度）,Z（深度）
&&& BABYLON对象下拥有相机的定义，光源的定义
&&& BABYLON.Mesh对象下有个简单物体的定义
&&& 接着便发现了更合适的学习方式：http://www.babylonjs-playground.com
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&原文：http://www.cnblogs.com/slxb/p/5149635.html
教程昨日排行
&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！WebGL框架：Three.js和Babylon.js的比较
今天的web浏览器已经走了很长的路。由于出色的JavaScript WebGL api ,现代浏览器完全有能力在没有第三方插件帮助的情况下呈现先进的2 d和3 d图形。利用专用的图形处理器的性能,WebGL使我们访问的网页实现动态阴影和现实的物理。
正如你可能已经猜到的,如此强大的api通常有一个缺点。WebGL当然也不例外,其缺点是形式的复杂性。不要害怕,然而,当我们探索两个完全有能力框架的目标是,让你的生活更容易,甚至可能使用WebGL时更有效率。
三维框架的出身
曾经流行的 Three.js()随着新的 Babylon.js() 为web开发人员提供了一个抽象的，基础制作功能丰富的WebGL创作框架。
Three.js 早在2009年4月开始出生,在换成JavaScript语言之前最初是用ActionScript。在WebGL的引入之前已经创建了three.js独特方便的模块化渲染接口，并在不用WebGL的情况下允许它使用SVG和HTML5画布元素。
Babylon.js, 是相对陌生的来者, 它出生在2013年的夏天。由微软心中发布了Babylon.js和首次正式支持WebGL API的Internet Explorer 11。
设计的细微差异
Three.js and Babylon.js 两者都提供了易于使用的接口来处理错综复杂的WebGL动画。
利用在HTML一样简单的一行脚本语句引入相应的JavaScript文件。注意:Babylon.js的依赖性,需要引入开源的hand.js。
src="three.js"&&
Babylon.js:
src="babylon.js"&&
src="hand.js"&&
两者之间的主要区别在于他们的预期用途。虽然两者都可以产生相同的效果，但是了解他们两个的过程是很重要的。
Three.js的一个创作目标是:利用基于web的渲染器创建GPU增强的3d图形和动画。这样,这个框架使用非常广泛的方法web图形,而不需要不关注动画的任何一个细节。这种灵活的设计使得Three.js成为一个好工具(可以在找到很多的例子)。
尽管Three.js试图给WebGL带来许多的动画方式,而Babylon.js采用更有针对性的方法。最初设计作为一个Silverlight游戏引擎,Babylon.js的维护倾向于基于web的游戏开发与碰撞检测和抗锯齿等特性。在其官网上可以看到许多的例子。
为进一步体现这两个框架的相似点和不同点,让我们快速构建一个3d动画。我们的项目的选择将会是一个超级简单的立方体缓慢旋转的应用。在创建这两个示例项目,你应该开始了解这两种技术和逐渐发现他们独特的优势。让我们开始吧。
第一个任务是初始化一个空白的画布，以便中包含我们的3 d动画。
&div style="height:250 width: 250" id="three"&&/div&
var div = document.getElementById('three');
Babylon.js:
var canvas = document.getElementById(‘babylonCanvas’);
With Three.js we simply create an empty div as our container for the animation. Babylon.js on the other hand makes use of an explicitly defined HTML5 canvas to hold its 3D graphics.在使用Three.js时我们简单地创建一个空的div容器。而Babylon.js利用显式定义的HTML5 canvas来开始3D图像。
接下来,我们加载渲染器然后准备场景并绘制到画布上。
var renderer = new THREE.WebGLRenderer()
renderer.setSize(width, height)
div.appendChild(renderer.domElement)
Babylon.js:
var engine = new BABYLON.Engine(canvas, true);
这一步没有太多东西,我们只是初始化渲染器并把它们贴到我们的画布上。
下一步我们设置一个场景来装下我们的相机和立方体cube。
var sceneT = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
camera.position.z = 400;
Babylon.js:
var sceneB = new BABYLON.Scene(engine)
var camera = new BABYLON.ArcRotateCamera("camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), sceneB)
sceneB.activeCamera.attachControl(canvas)
var light = new BABYLON.DirectionalLight("light", new BABYLON.Vector3(0, -1, 0), sceneB)
light.diffuse = new BABYLON.Color3(1, 0, 0)
light.specular = new BABYLON.Color3(1, 1, 1)
这里我们创建了我们几乎相同的场景,然后实现相机(两个框架支持不同类型),从我们创建的场景中获得视图。参数传递给相机决定各种细节包括相机的角度、视野、纵横比和深度。
我们还得为Babylon.js加入方向性光源，同时将它附加到我们场景中，避免待会我们只能盯着漆黑一片的动画。
我们的画布,场景和相机都已经准备好了，在渲染和动画起来之前我们只需要加入方块。
var cube = new THREE.CubeGeometry(100, 100, 100);
var texture = THREE.ImageUtils.loadTexture('texture.gif');
texture.anisotropy = renderer.getMaxAnisotropy();
var material = new THREE.MeshBasicMaterial();
var mesh = new THREE.Mesh(cube, material);
sceneT.add(mesh);
Babylon.js:
var box = BABYLON.Mesh.CreateBox("box", 3.0, sceneB)
var material = new BABYLON.StandardMaterial("texture", sceneB)
box.material = material
material.diffuseTexture = new BABYLON.Texture("texture.gif", sceneB)
First, we create our cube objects of the specified size and then create our material/mesh (think texture) that will be painted onto the cubes. Any image file will work for the texture and both frameworks support mesh exports from 3D modeling tools like Blender ().
首先,我们创建指定大小的立方体对象,然后创建我们的材质/网格，把材质涂在立方体的各个面。任何图像文件都可以导入纹理texture,而且两个框架都支持从3D模型工具软件(如 Blender)中导出模型。
在最后一步,我们添加一个缓慢的旋转动画,然后渲染场景。
function animate() {
requestAnimationFrame(animate)
mesh.rotation.x += 0.005
mesh.rotation.y += 0.01
renderer.render(sceneT, camera)
Babylon.js:
engine.runRenderLoop(function () {
box.rotation.x += 0.005
box.rotation.y += 0.01
sceneB.render()
Three.jsjs和Babylon.js两者使用动画或渲染循环去更新一个新的旋转角度内容到画布上。您还将注意到Three.js与Babylon.js稍有不同。我们的最终产品是两个立方体在半空中轻轻旋转。
两个WebGL框架基于相同的Web图形接口,但专注于增强的不同方面,。
最后,这两个相对年轻的框架使web开发人员产生了能够更容易地利用强大的3 d WebGL的机会。这样,任何有兴趣进行3d web开发的同学，当然应该仔细看看这前沿技术。
没有更多推荐了，