Babylon.js - 起步

CDN

https://cdn.babylonjs.com/babylon.js
https://cdn.babylonjs.com/babylon.max.js

可以在https://cdn.babylonjs.com/xxx上找到其他参考，其中xxx是可以在/dist文件夹中找到的文件夹结构，如下所示：

https://cdn.babylonjs.com/gui/babylon.gui.min.js

对于预览版本，可以使用以下URL链接：

https://preview.babylonjs.com/babylon.js
https://preview.babylonjs.com/babylon.max.js

其他参考资料可在https://preview.babylonjs.com/xxx上找到，其中xxx是可以在/dist/预览版文件夹（如https://preview.babylonjs.com/gui/babylon.gui.min.js）中找到的文件夹结构

<!--- 使用cdn提供的url链接 --->
<!--- Link to the last version of BabylonJS --->
<script src="https://cdn.babylonjs.com/babylon.js"></script>

npm

使用npm来为项目安装BabylonJS：

npm install babylonjs --save

使用以下命令导入BabylonJS：

import * as BABYLON from 'babylonjs';

或加载特定的类：

import { Scene, Engine } from 'babylonjs';

Start

/第一步从HTML文档中获取canvas元素的引用：

var canvas = document.getElementById('renderCanvas');

然后，加载 Babylon 3D 引擎：

var engine = new BABYLON.Engine(canvas, true);

创建名为 createScene 的 function，并返回 scene ：

var createScene = function(){// Create a basic BJS Scene object.var scene = new BABYLON.Scene(engine);var camera = new BABYLON.FreeCamera('camera', 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);...// Return the created scene.return scene;
}

注意: 其中的 camera 是必须的。

接下来渲染场景：

// 调用createScene
var scene = createScene();// 注册一个渲染循环来重复渲染画布上的场景：
engine.runRenderLoop(function () {scene.render();
});

以上便创建了一个最基本的BabylonJS场景，不过场景中还未添加任何物体，之后的文章中再来介绍如何添加物体。

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Babylon - Getting Started</title><style>html, body {overflow: hidden;width: 100%;height: 100%;margin: 0;padding: 0;}#renderCanvas {width: 100%;height: 100%;touch-action: none;}</style><!--- Link to the last version of BabylonJS ---><script src="https://cdn.babylonjs.com/babylon.js"></script></head><body><canvas id="renderCanvas"></canvas><script>window.addEventListener('DOMContentLoaded', function () {var canvas = document.getElementById('renderCanvas');var engine = new BABYLON.Engine(canvas, true);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('camera', 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);// Return the created scene.return scene;}// 调用createScenevar scene = createScene();// 注册一个渲染循环来重复渲染画布上的场景：engine.runRenderLoop(function () {scene.render();});// 最后，您应该实现一个canvas/window resize 事件处理程序，如下所示：window.addEventListener('resize', function () {engine.resize();});});</script>
</body></html>

Babylon.js - 起步相关推荐

Babylon.js 3.3发布：更强大的粒子系统和WebVR支持
Babylon.js 3.3版本利用微软混合现实工具包(MRTK)的功能来改进WebVR开发,并改进了其粒子系统控件. MRTK提供了一系列脚本和组件来加速混合现实应用程序的开发.为了简化GUI VR ...
babylonjs 分部加载模型_使用 Babylon.js 在 HTML 页面加载 3D 对象
五一 Windwos Blogs 推了一篇博客, Babylon.js v3.2 发布了.因为一直有想要在自己博客上加载 3D 对象的冲动,这两天正好看到了,就动手研究研究.本人之前也并没有接触过 W ...
基于babylon.js的3D网页游戏从零教程
3D 游戏的 javascript 框架: 在很久一段时间 web 端的 3D 游戏引擎一直是 nothing,但现在却如雨后春笋. Unity (Unity 2018.2 开始已经彻底弃用 js,使 ...
Babylon.js 深入
目录 1.第一章动画 1. 设计动画设计剪辑反转动画 2. 动画方法描述创建动画设置关键帧开始动画可动画化 3. 排序动画编辑 (1)设计:对于相机 (2)对于门 (3)对于灯光 4 ...
Babylon.js 深入 - 第 2 章 - 声音(2)
Babylon.js 深入 - 第 2 章 - 声音(2) 声音 Babylon.js 声音引擎基于 Web Audio 规范,要使用它,您需要使用与 Web Audio 兼容的浏览器.声音引擎提供环 ...
babylon.js小人快跑动画效果
babylon.js小人快跑动画效果 var createScene = function () {// This creates a basic Babylon Scene object (non- ...
babylon.js实战教程
致读者最详细的babylon.js实战文档:babylon.js实战中文文档什么是Babylon.js Babylon.js是一个javascript开源框架,用于为Web开发3D应用程序/视频游 ...
Babylon.js 踩坑之正交摄像机,平行投影的相关设置
最近在研究Babylon.js这款专业Web3D的游戏引擎,官网的教程很全面,但不免有些遗漏的地方.今天,就讲Babylon.js中相机的投影类型. Babylon.js中的相机类型有 ...
图形化开发（一）——Three.js基本介绍-优缺点-在线编辑器 Babylon.JS是最好的JavaScript3D游戏引擎
图形化开发(一)--Three.js基本介绍-优缺点-在线编辑器 & Babylon.JS是最好的JavaScript3D游戏引擎课程主要学习目标 Threejs ( 3d ) D3 (做数 ...

Babylon.js - 起步

相关网站

CDN

npm

Start

完整代码

Babylon.js - 起步相关推荐

最新文章

热门文章