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

这篇具有很好参考价值的文章主要介绍了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，复制下载链接

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

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

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

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

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();
        }
    );

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

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

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

方法二：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();
        }
    );

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

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

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

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

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();
        }
    );

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

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

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

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

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

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

dropbox外链使用方法：

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

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

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

图中三个分享链接如下 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 拼接方式，是无法获取直链下载的；

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

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

④在playground中加载dropbox外链模型

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

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

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

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

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

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

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

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

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