返回列表 发新帖

babylonjs教程(22)-加载一个用Blender创建的场景

  [复制链接]

138

主题

171

帖子

2564

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2564
发表于 2016-6-21 15:12:32 | 显示全部楼层 | 阅读模式
Babylon.js:怎么加载用Blender产生的.babylon文件

在前面的文章中,我描述了Babylon.js,一个WebGl和JavaScript的3D引擎品牌。除了其他特性,Babylon.js能够通过.babylon文件格式加载JSON文件。

在这个文章中,我将会展示如何用Babylon.js加载一个用Blender创建的场景。

0447.image_thumb_3E9F1AE4.png

一个重要的事情记得Blender使用Blender Render如果你想导出你的场景到Babylon.js。

创建一个场景并用Blender导出.babylon

在我们前面的文章,我们已经描述了怎么在Blender里面安装.babylon exporter(导出器),但是为了理解,我复制/粘帖这个过程到这里。


为了安装到Blender,请更随下面的指导:

  • 解压这个文件到你的Blender的插件文件夹(应该是C:Program FilesBlender FoundationBlender2.67scriptsaddons for Blender 2.67 x64)。当然这一步可以省略。
  • 启动Blender到File/User Préférences/Addon和select Import-Export目录。如果省略了第一步,在这里你要在下面的从文件安装导入你下载的文件,然后你可以激活Babylon.js exporter。
2744.image_thumb_3FDD1CC0.png

  • 创建你的场景
  • 到File/Export选择Babylon.js格式。设置文件名,完成。

3716.image_thumb_4406F485.png

一旦你安装了exporter,你可以发挥你艺术的一面,创建你想象中最美丽的场景。就我而言,它是相当的简单:

  • 一个点光源
  • 一个地面
  • 一个球体
  • 一个摄像机
2072.image_thumb_702D192A.png

对于这些东西有一点朴素,我会给地面和球体添加一些颜色:

8863.image_thumb_4F3C3734.png

我也会给球体添加一些纹理。这个纹理会使用材料的diffuse(漫射)通道。

请注意:

  • Use Alpha复选框表明Babylon.j使用纹理的alpha值。
  • Color复选框表面纹理必须用于漫射颜色。

1731.image_thumb_65283A35.png

一旦你满意了(当然你也可以创建更复杂的场景),现在就去File/Export/Babylon.js创建你的.babylon文件吧。

3733.image_thumb_195C637C.png

使用Babylon.js Sandbox

这是十分好,且简单的方式测试你的场景:Babylon.js Sandbox。你可以拖拽.babylon文件到这个单独的页面,不需要更多的步骤就可以测试你的场景。


加载你的.babylon在你的页面或者app里面

首先,你应该创建一个简单的html页面:
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>Using babylon.js - How to load a scene</title>
  5.     <script src="babylon.js"></script>
  6.     <style>
  7.         html, body {
  8.             width: 100%;
  9.             height: 100%;
  10.             padding: 0;
  11.             margin: 0;
  12.             overflow: hidden;
  13.         }

  14.         #renderCanvas {
  15.             width: 100%;
  16.             height: 100%;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <canvas id="renderCanvas"></canvas>
  22. </body>
  23. </html>
复制代码

这个页面十分的简单,因为你需要的仅仅是一个canvas和一个babylon.js的引用。

然后你就可以使用 BABYLON.SceneLoader 对象来加载你的场景。要做到这一点,只需要添加脚本块在canvas后面:
  1. <script>
  2.     if (BABYLON.Engine.isSupported()) {
  3.         var canvas = document.getElementById("renderCanvas");
  4.         var engine = new BABYLON.Engine(canvas, true);

  5.         BABYLON.SceneLoader.Load("", "scene.babylon", engine, function (newScene) {
  6.             // Wait for textures and shaders to be ready
  7.             newScene.executeWhenReady(function () {
  8.                 // Attach camera to canvas inputs
  9.                 newScene.activeCamera.attachControl(canvas);

  10.                 // Once the scene is loaded, just register a render loop to render it
  11.                 engine.runRenderLoop(function() {
  12.                     newScene.render();
  13.                 });
  14.             });
  15.         }, function (progress) {
  16.             // To do: give progress feedback to user
  17.         });
  18.     }
  19. </script>
复制代码

这个Load方法需要下面的参数:

  • 场景文件目录(可以是空的如果和你的页面在同一个目录)
  • 场景的文件名
  • 引擎的引用
  • 场景加载好的回调(对于这个例子而言,我用这个回调绑定摄像机到canvas上面并运行了渲染循环)
  • 进度报告回调

一旦这个场景加载完成,只需要等待纹理和着色器准备好,连接摄像机到canvas,让我们看是。

如此的简单,不是吗?

请注意纹理和.babylon文件必须在一起并排。

另外一个方法也可以与.babylon文件交互:BABYLON.SceneLoader.importMesh:
  1. BABYLON.SceneLoader.ImportMesh("spaceship", "Scenes/SpaceDek/", "SpaceDek.babylon", scene, function (newMeshes, particleSystems) {
  2. });
复制代码

这个方法的目的是导入网格从一个场景到另外一个。它需要下面这些参数:

  • 对象名字(如果你省略了,那么所有对象都会被导入)
  • 场景文件目录(可以是空的如果和你的页面在同一个目录)
  • 场景的文件名
  • 目标场景的引用
  • 导入完成目标和粒子系统后的回调

在你的服务器上添加MIME types

你需要预授权 .babylon MIME type在你的服务器上(此外如果你需要增量加载,你需要授权.babylonmeshdata MIME type)

对于IIS,你需要用这段来更新你的web.config

回复

使用道具 举报

0

主题

1

帖子

14

积分

新手上路

Rank: 1

积分
14
发表于 2016-12-19 09:43:32 | 显示全部楼层
光看不回复是不行的,好帖
回复 支持 反对

使用道具 举报

138

主题

171

帖子

2564

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2564
发表于 2016-12-19 17:42:37 | 显示全部楼层
小哥 发表于 2016-12-19 09:43
光看不回复是不行的,好帖

谢谢,小哥
回复 支持 反对

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表