Babylonjs Playground中动态加载自己的glb gltf模型（github、dropbox）

目录

以下提供两种常用的方法 （使用科学梯子）

先说总结：对比 github和dropbox

github外链使用方法

方法一：rootUrl添加链接路径。sceneFilename必须置空

方法二：rootUrl填写文件夹路径，sceneFileName填写对应的文件名字

方法三：gltf+bin文件 见案例：

额外补充：群友盲猜大佬整理的pg加载原神模型+卡通渲染，已被官方添加到首页demo案例墙上

dropbox外链使用方法：

①https://www.dropbox.com/   注册账号

②新建文件夹、上传文件、点击分享、复制分享链接

③把域名  www.dropbox.com 替换为  dl.dropboxusercontent.com 变成直链下载地址

额外补充：把dropBox的上级文件夹babylon进行分享外链+boxY.glb 拼接方式，是无法获取直链下载的；

④在playground中加载dropbox外链模型

写法一：按官网文档 把dropbox路径写在ImportMesh的两个参数里rootUrl 和 sceneFilename

写法二，把外链链接直接复制到rootUrl参数中，这样scenefileName可以随意命名，甚至为空也可

额外补充： dropbox分享的gltf文件直链，基本无法在playground使用

---

目前在babylon论坛Babylon.jshttps://forum.babylonjs.com/

或者qq群里，大家分享测试用demo时，

已经习惯使用playground，简称pg

如果不需要代码测试，直接可以把glb放到官方的sandbox进行查看inspector调试，

如果需要进行代码调试，那么就需要在playground中动态加载外部模型资源，

详情可参考官方文档

Using External Assets In the Playground | Babylon.js Documentationhttps://doc.babylonjs.com/toolsAndResources/tools/playground/externalPGAssets

以下提供两种常用的方法 （使用科学梯子）

1.github资源外链加载

2.dropbox云库外链加载

先说总结：对比 github和dropbox

如果资源很大，比如上百兆，就用dropbox，但要注意加载的是glb文件格式

dropbox只支持单一文件路径，所以只支持glb格式在playground的应用

github可以支持gltf+bin的多文件，或glb文件，不在意网络因素的情况下，挺好用的

github外链使用方法

把文件上传到github，查看raw，复制下载链接

https://raw.githubusercontent.com/maki077/BabylonAssets/master/glb/boxY.glb

https://raw.githubusercontent.com/maki077/BabylonAssets/master/glb/boxNaked.glb

 

playground中加载模型下载链接，例子见 Babylon.js Playgroundhttps://www.babylonjs-playground.com/#8LFTCH#1099

方法一：rootUrl添加链接路径。sceneFilename必须置空

BABYLON.SceneLoader.ImportMesh(
        "",
        "https://raw.githubusercontent.com/maki077/BabylonAssets/master/glb/boxNaked.glb",
        "",//这里必须为空，如果填写aaa.glb否则找不到对应文件，见下图
        scene,
        function (meshes) {          
            scene.createDefaultCameraOrLight(true, true, true);
            scene.createDefaultEnvironment();
        }
    );

//sceneFilename这里必须为空，如果填写aaa.glb否则找不到对应文件，见下图

 

 

方法二：rootUrl填写文件夹路径，sceneFileName填写对应的文件名字

BABYLON.SceneLoader.ImportMesh(
        "",
        "https://raw.githubusercontent.com/maki077/BabylonAssets/master/glb/",
        "boxY.glb",
        scene,
        function (meshes) {          
            scene.createDefaultCameraOrLight(true, true, true);
            scene.createDefaultEnvironment();
        }
    );

 

方法三：gltf+bin文件 见案例：

Babylon.js Playgroundhttps://www.babylonjs-playground.com/#8LFTCH#1100

 

https://raw.githubusercontent.com/maki077/BabylonAssets/master/glb/DoubleSidedMaterial/DoubleSidedMaterial.gltf

获取文件夹内的gltf文件的raw直链路径，babylon会按相对路径找到文件夹中的对应图片和bin文件

（dropbox不支持gltf）

BABYLON.SceneLoader.ImportMesh(
        "",
        "https://raw.githubusercontent.com/maki077/BabylonAssets/master/glb/DoubleSidedMaterial/DoubleSidedMaterial.gltf",
        "",
        scene,
        function (meshes) {          
            scene.createDefaultCameraOrLight(true, true, true);
            scene.createDefaultEnvironment();
        }
    );

 

额外补充：群友盲猜大佬整理的pg加载原神模型+卡通渲染，已被官方添加到首页demo案例墙上

Babylon.js Playgroundhttps://www.babylonjs-playground.com/#SH5DVI#1

欢迎大佬们加群分享pg代码1127206245

他加载方式使用github.io资源

 

dropbox外链使用方法：

①https://www.dropbox.com/   注册账号

②新建文件夹、上传文件、点击分享、复制分享链接

 

图中三个分享链接如下 2个glb文件 一个png

https://www.dropbox.com/s/kyiawbdocp87uks/boxNaked.glb?dl=0

https://www.dropbox.com/s/p77mauwr9bwaetp/boxY.glb?dl=0

https://www.dropbox.com/s/eb1qy4r1gy5js28/yup.png?dl=0

③把域名  www.dropbox.com 替换为  dl.dropboxusercontent.com 变成直链下载地址

https://dl.dropboxusercontent.com/s/kyiawbdocp87uks/boxNaked.glb?dl=0

https://dl.dropboxusercontent.com/s/p77mauwr9bwaetp/boxY.glb?dl=0

https://dl.dropboxusercontent.com/s/eb1qy4r1gy5js28/yup.png?dl=0

额外补充：把dropBox的上级文件夹babylon进行分享外链+boxY.glb 拼接方式，是无法获取直链下载的；

浏览器访问直链链接，会提示下载窗口

 

④在playground中加载dropbox外链模型

写法一：按官网文档 把dropbox路径写在ImportMesh的两个参数里rootUrl 和 sceneFilename

【注意】分开写时rootUrl末尾要有斜杠/，sceneFilename命名随意，但是后缀必须为.glb

 

Babylon.js Playgroundhttps://www.babylonjs-playground.com/#8LFTCH#1098

 

BABYLON.SceneLoader.ImportMesh(
        "",
        "https://dl.dropboxusercontent.com/s/p77mauwr9bwaetp/",//斜杠注意
        "boxNaked.glb",//这里文件名字不影响，但是后缀必须为.glb文件，否则无法解析
        scene,
        function (meshes) {          
            scene.createDefaultCameraOrLight(true, true, true);
            scene.createDefaultEnvironment();
        }
    );

写法二，把外链链接直接复制到rootUrl参数中，这样scenefileName可以随意命名，甚至为空也可

 

BABYLON.SceneLoader.ImportMesh(
        "",
        "https://dl.dropboxusercontent.com/s/p77mauwr9bwaetp/boxY.glb?dl=0",
        "asd12",//""为空也可
        scene,
        function (meshes) {          
            scene.createDefaultCameraOrLight(true, true, true);
            scene.createDefaultEnvironment();
        }
    );

额外补充： dropbox分享的gltf文件直链，基本无法在playground使用

在dropbox，gltf+bin+img是有多个文件，

playground只能加载一个文件的rootUrl，所以导致加载bin文件会失败，

也无法加载文件夹路径，所以在dropbox分享时推荐使用单一的glb文件

以上参考论坛回复

Playground dropbox glb import failing - Questions - Babylon.js

生成dropbox分享外链的说明

How to generate a Dropox direct download link | Zapier