未加星标

Babylon.js入门简介和开发实例

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

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面板(
Babylon.js入门简介和开发实例
) 中编写如下代码: <script src="http://cdn.babylonjs.com/2-3/babylon.js"></script> <canvas id="renderCanvas"></canvas> WebGL需要借助html5的canvas元素来作为3D渲染的容器。所以上面的代码我们在文档中插入了一个id为renderCanvas的canvas元素。接着我们在 CSS面板(
Babylon.js入门简介和开发实例
) 中编写如下样式代码,让canvas元素占满预览渲染窗口(右下角的窗口): html, body { overflow: hidden; width : 100%; height : 100%; margin : 0; padding : 0; } #renderCanvas { width : 100%; height : 100%; touch-action: none; } 接着我们在 javascript面板(
Babylon.js入门简介和开发实例
) 中编写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快捷键,预览窗口将呈现如下的结果:
Babylon.js入门简介和开发实例

我们还可以给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; 最终的作品如下图所示,点击图片可以链接到 在线演示


Babylon.js入门简介和开发实例

by iefreer

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: WebGLHTMLCSS浏览器JavaScriptHTML5JavaChromeBAB微软
分页:12
转载请注明
本文标题:Babylon.js入门简介和开发实例
本站链接:http://www.codesec.net/view/480990.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(114)