目录
一、介绍了解
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也提供了很多在线例子可以查看,可以结合文档学习。