babylonjs 分部加载模型_babylonjs使用笔记

目录

一、介绍了解

1、游乐场：playground

2、沙盒：sanbox

1)Nodes

2)Materials

3)Textrues

3、在线例子：examples

二、模型文件

三、项目使用

1、文件包引入

2、具现实现

1)创建canvas画布

2)加载3d引擎

3)创建场景对象

4)创建相机

5)创建光源

6)导入模型

BABYLON.SceneLoader.Append

BABYLON.SceneLoader.ImportMesh

promise版本

7)循环渲染

8)基本例子

四、其他知识

1、改变场景背景颜色

2、禁止镜头缩放

3、禁止镜头移动

五、疑难点

1、灯光问题

参考资料

一、介绍了解

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也提供了很多在线例子可以查看，可以结合文档学习。