如何使用 babylon js 在 vue.js 中导入外部模型答案

【问题标题】：How to import an external model in vue.js using babylon js如何使用 babylon js 在 vue.js 中导入外部模型
【发布时间】：2022-11-09 05:19:21
【问题描述】：

我正在尝试使用 babylon.js 在 vue.js 中导入 gltf 文件并将 3 维视图添加到网页。我无法弄清楚如何做到这一点，并且在线文档也很模糊。这是我尝试过的：这就是我放入 Hello.vue 文件的内容

<div>
<h1> Hello </h1>
<Scene>
  <Box :position="[0, 0, 5]"></Box>
</Scene>
</div>
</template>

<script src = "./Hello.js">
</script>

这就是我放入 Hello.js 文件中的内容

import vb from 'vue-babylonjs';
import Hello from './Hello.vue';

Vue.use(vb);

new Vue({
  components: { Hello },
  render: c => c('Hello'),
}).$mount('#app');


var delayCreateScene = function () {
    // Create a scene.
    var scene = new BABYLON.Scene(engine);

    // Create a default skybox with an environment.
    var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("../assets/magic_book_of_eden/textures/material_0_baseColor.png", scene);
    var currentSkybox = scene.createDefaultSkybox(hdrTexture, true);

    // Append glTF model to scene.
    BABYLON.SceneLoader.Append("../assets/magic_book_of_eden/", "scene.gltf", scene, function (scene) {
        // Create a default arc rotate camera and light.
        scene.createDefaultCameraOrLight(true, true, true);

        // The default camera looks at the back of the asset.
        // Rotate the camera by 180 degrees to the front of the asset.
        scene.activeCamera.alpha += Math.PI;
    });

    return scene;
};

如果可能的话，有人可以用一个例子来解释如何做到这一点吗？我从sketchfab 得到gltf 模型。谢谢！

输出：

【问题讨论】：

嗨，您可以编辑此问题以包含浏览器控制台中显示的任何错误吗？
@emackey 代码编译成功。但是，输出并不像预期的那样。我附上了输出的截图。盒子是在场景中创建的。但是，加载的 gltf 模型没有显示在屏幕上
在您的 Web 浏览器中，按 F12（或使用菜单打开 DevTools）。转到Console 选项卡，查找运行时错误。例如，模型文件本身可能会从您在此处看不到的服务器获取404 Not Found。

标签： javascript vue.js gltf babylonjs

【解决方案1】：

我会尝试导入文件，然后在 SceneLoader 中使用该变量。

【讨论】：