17 Babylonjs入门进阶 使用场景加载器加载glTF,OBJ,STL模型

Babylon.js内置的模型格式是.babylon,Babylon.js可以不需要其它额外的插件即可加载。

注意:由于你导入的模型可以具有rotationQuaternion的设置,因此再设置rotate可能出现无法预测的问题,警告

基本用法

要加载指定的类型的文件,Babylon.js首先需要引入相应文件的插件。
目前支持的文件格式类型:

如果想要快速添加对所有的文件格式的支持,可以将以下脚本引入到页面中:

<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>

有关NPM的使用,请参阅:babylonjs-loaders
引入插件以后,可以使用SceneLoader类加载模型,它提供了一些加载方法。

SceneLoader.Append

从文件文件夹中加载所有的模型资源并添加到babylon场景中

配置项:文件夹路径,资源名称,场景对象,回调函数

BABYLON.SceneLoader.Append("./", "duck.gltf", scene, function (scene) {
    // 模型添加成功后,执行场景对象的一些方法
});

SceneLoader.Load

从文件中加载模型文件并创建一个新的场景对象

配置项:文件夹路径,资源名称,引擎对象,回调函数

BABYLON.SceneLoader.Load("/assets/", "batman.obj", engine, function (newScene) { 
   // ...
});

SceneLoader.ImportMesh

从文件中加载模型并将它们添加到场景中,这个和Append区别在于,回调返回的是模型对象而不是场景对象。我们可以在成功的回调里面对模型再进行进一步的处理。
配置项:将要添加到场景中的模型名称或为空(将所有模型或者骨骼加载),文件夹路径,资源名称,场景对象,回调函数

BABYLON.SceneLoader.ImportMesh(["myMesh1", "myMesh2"], "./", "duck.gltf", scene, function (meshes, particleSystems, skeletons) {
    //  对骨骼和模型进行进一步操作
    // 对于glTF文件,粒子系统默认为空
});

SceneLoader.LoadAssetContainer

从文件夹中添加所有的资源到babylon,但不会自动添加到场景中
配置项:文件夹路径,资源名称,场景对象,回调函数

BABYLON.SceneLoader.LoadAssetContainer("./", "duck.gltf", scene, function (container) {
    var meshes = container.meshes;
    var materials = container.materials;
    //...

    // Adds all elements to the scene
    container.addAllToScene();
});

回调函数会返回一个容器对象,里面包含所有模型加载的资源光源,模型,相机等等。如果需要将模型添加到场景,需要使用:

container.addAllToScene();

将添加的容器内容从场景中删除,则使用:

container.removeAllFromScene();

SceneLoader.AppendAsync

我们还可以通过使用Async函数来实现链式回调:

BABYLON.SceneLoader.AppendAsync("./", "duck.gltf", scene).then(function (scene) {
    // do something with the scene
});

请参阅如何使用Promises了解有关使用promises的更多信息。

高级用法

使用onPluginActivatedObservable设置属性和调用特定于特定加载器的方法。

BABYLON.SceneLoader.OnPluginActivatedObservable.add(function (loader) {
    if (loader.name === "gltf") {
        // do something with the loader
        // loader.<option1> = <...>
        // loader.<option2> = <...>
        // loader.dispose();
    }
});

或者,静态同步SceneLoader函数返回插件。

var loader = BABYLON.SceneLoader.Load("./", "duck.gltf", engine, function (scene) {
    // do something with the scene
});

// do something with the loader
// loader.<option1> = <...>
// loader.<option2> = <...>
// loader.dispose();

加载多个模型

如果加载多个模型时,可以使用AssetsManager类。请查看下一节。

  • 12
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要在 Babylon.js加载 FBX 模型,需要使用 `BABYLON.SceneLoader.ImportMesh()` 方法。以下是一个简单的示例,假设您已经将 Babylon.js 库引入到 HTML 文件中: ```html <!DOCTYPE html> <html> <head> <title>Babylon.js FBX Loading Example</title> <script src="https://cdn.babylonjs.com/babylon.js"></script> <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script> </head> <body> <canvas id="renderCanvas"></canvas> <script> var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); // 创建场景 var createScene = function () { var scene = new BABYLON.Scene(engine); // 加载 FBX 模型 BABYLON.SceneLoader.ImportMesh("", "path/to/fbx/file/", "model.fbx", scene, function (newMeshes) { // 可以在这里对模型进行一些操作 }); // 地面 var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 10, height: 10}, scene); // 灯光 var light = new BABYLON.PointLight("light", new BABYLON.Vector3(0, 1, 0), scene); return scene; } var scene = createScene(); engine.runRenderLoop(function () { scene.render(); }); </script> </body> </html> ``` 在上面的示例中,`BABYLON.SceneLoader.ImportMesh()` 方法的第一个参数是用于命名所加载模型的根节点的字符串。第二个参数是 FBX 文件所在的目录路径。第三个参数是 FBX 模型文件名。第四个参数是场景对象,用于在场景加载模型。第五个参数是回调函数,用于在 FBX 文件加载完成后执行一些操作,比如设置动画等。 注意:加载 FBX 模型需要使用 `babylonjs.loaders.min.js` 库。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值