Babylon.js入门教程和开发实例

iefreer 发表于 2016-10-10 23:52:52

标签: webgl, babylonjs, html5, canvas, 教程

- +

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等桌面工具开发,那么首先你得下载最新版本的BabylonJS,创建一个项目,文件如下:

yourProject
    |- index.html
    |- babylon.2.3.js

在本文中,我们简化下,直接使用在线开发工具http://wow.techbrood.com/fiddle/new

只要有浏览器即可,无需下载或安装任何软件。

在其中的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 {  
        overflow: hidden;  
        width   : 100%;  
        height  : 100%;  
        margin  : 0;  
        padding : 0;  
}  
 
#renderCanvas {  
        width   : 100%;  
        height  : 100%;  
        touch-action: none;  
}

接着我们在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);  
  
    return 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 = groundMaterial;  
ground.receiveShadows = true;

最终的作品如下图所示,点击图片可以链接到在线演示



possitive(4) negative(0) views8178 comments1
私信 收藏 分享
分享到

发送私信

最新评论

iefreer 2016-10-10 23:59:12

http://doc.babylonjs.com/


请先 登录 再评论.
相关文章
  • 如何使用BabylonJS加载OBJ或STL模型

    BabylonJS(也就是babylon.js,这是一个和three.js类似的WebGL开发框架),更多的用在游戏领域。
    本文说明和演示如何使用babylon.js来加载一个标准3d模型文...

  • CSS3特性查询(Feature Query: @supports)功能简介

    这是2017年不能不了解和学习的一个CSS新特性,非常实用,考虑到现实世界浏览器的复杂性,该特性本应该先于其他新特性出来。我们已经知道使用媒体查询(Media Que...

  • 函数式JavaScript编程基础概念:Curry和Partial Application

    本文介绍JS函数式编程中的两个概念:柯里(Curry)和部分应用程序(Partial Application)。什么是应用程序(Application)将函数应用于其参数以产生返回值的过...

  • 常见面试题JavaScript闭包(ES5语法)

    JavaScript闭包(Closure)是常见的JS面试题,是否理解闭包是一个简单的区分JS初级和高级程序员的判例。几乎每个JS程序员都在使用闭包,有意或无意间。比如编写一个jQuery鼠标点击处理函数:$(function()

  • Web界面编程状态变化和JS开发框架(React/Angular/Ember)

    UI编程中的一个关键课题就是界面组件化(可复用)以及组件状态管理。稍早一些的windows程序员可能接触过MFC,其界面编程中有一个DDX(DoDataExchange)的机制,...

  • CSS3弹性布局弹性流(flex-flow)属性详解和实例

    弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)。其中flex-flow是flex-direction...

  • 使用HTML5 FileReader和Canvas压缩用户上传的图片

    手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体...

  • WebGL入门教程6 - 光照效果和Phong光照模型

    正是因为有了光,世界才能被我们看见,在3D的世界里,光照给物体带来真实的视觉感受。当光照射在某一表面上时,它可能被吸收、反射或投射。其中入射到表面上的一...

  • 使用Canvas绘制完美的不完美圆形

    真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...

  • Three.js 3D打印数据模型文件(.STL)加载

    3D打印是当下和未来10年产品技术主流方向之一,影响深远。对于电子商务类的3D打印网站,一个主要功能是把商品以3D的方式呈现出来,也就是3D数据可视化技术。HTML...

  • 使用requestAnimationFrame和Canvas给按钮添加绕边动画

    要给按钮添加酷炫的绕边动画,可以使用Canvas来实现。基本的思路是创建一个和按钮大小相同的Canvas元素,内置在按钮元素中。然后在Canvas上实现边线环绕的动画。...

  • 如何使用CSS3/SCSS实现逼真的车窗雨滴效果

    在天气预报类的Web移动应用中,常常需要实现屏幕的雨滴效果,表示阴雨天气。感觉上比较神奇,其实想通了,这个效果的实现只需要一点物理知识和CSS3的简单变换。实现一个小雨滴首先雨滴是一个个小的椭圆形元素:.raindrop

  • 更多...