babylonjs使用笔记

一、介绍了解

babylonjs是用于3D网页游戏开发的WEBGL插件，微软开发和维护的web端3D引擎。

• 官网地址
• 中文地址

babylonjs提供了很多很好用的工具，结合这些工具使用起来会比较容易上手。

1、游乐场：playground

Babylon.js提供了一个在线编辑器，它叫做The Playground，它是制作自己场景的最快捷，最简单的方法。

playground地址

界面很简单，左侧是代码区域，右侧是场景预览区域。编写完成后点击执行代码按钮即可实时预览场景。同时还可以单击下载按钮将代码下载下来。

2、沙盒：sanbox

sanbox工具主要是用于将三维模型导入，然后通过它可以看到当前模型的s素材组成部分、或者自带动画（如果有的话），简而言之，它是一个模型预览工具。

sanboxd地址

界面如下：

将模型文件拖拽至界面中或者点击右下角按钮选择文件即可。
这个我将要一个obj文件传入，效果如下：

然后我们点击第一个查看详情按钮，弹出左右两个弹窗。

1）Nodes

第一个Nodes节点中我们可以看到这个模型由四部分组成：Object059、Object060、Object061、Sphere020。这里我们把第一个碎片隐藏了。在开发过程中，我们也可以通过代码去获得这几个碎片，具体代码在下面的章节进行介绍。

2）Materials

纹理文件，通过右侧面板可以添加纹理。
diffuse texture 漫反射纹理
specular texture 高光纹理
reflection texture 反射纹理
…

3）Textrues

加载的贴图文件。这里暂时不知道为什么没有在场景中显示出来。

3、在线例子：examples

babylonjs也提供了很多在线例子可以查看，可以结合文档学习。同时也可以下载项目源码，在本地网页进行查看。

在线文档和例子

二、模型文件

从上面sandbox的初始化界面的【drag and drop gltf,glb,obj or babylon files to view them】，我们可以知道，babylonjs支持gltf，glb，obj以及babylon着四种文件格式。
其中，babylonjs内置模型格式是babylon格式，不需要其他插件即可加载。但如果使用的是其他格式的文件，则需要babylonjs-loaders插件进行加载，否则网页会提示报错无法显示。

• gltf：素材由.gltf、.bin、texture(皮肤)文件组成；
• glb：由gltf所有文件合成一个文件，线上转换网址；
• obj：由.obj、.mtl、texture(皮肤)文件组成；

由于我在项目中（也就是上述sandbox中使用的文件）使用的是obj模型文件，这里就记录下obj文件情况吧。
.obj文件：

.mtl文件

三、项目使用

下面的项目使用笔记基于vue项目。

1、文件包引入

babylon的文件包有很多，项目中可以根据自己的需要进行加载：

• babylonjs -主包
• babylonjs-loaders - 模型加载loader
• babylonjs-gui -GUI用户交互页面
• babylonjs-materials -官方提供的一些材质

还有很多其他的可以在官网上进行查阅。

而我在项目中主要用到：

import * as BABYLON from "babylonjs"; // 主包
import "babylonjs-loaders"; // 用于加载obj模型

2、具现实现

1）创建canvas画布

html中创建canvas元素作为挂载：

<canvas id="renderCanvas"></canvas>

2）加载3d引擎

const canvas = document.getElementById("imgCanvas");
const engine = new BABYLON.Engine(canvas, true, {
   
   
	preserveDrawingBuffer: true,
	stencil: true
});

3）创建场景对象

const scene = new BABYLON.Scene(engine);

4）创建相机

// 相机有几种（可查看官网），此处我创建的是是旋转相机
const camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(0, 0, 0), scene)