如何在Vue.js中通过Babylon.js导入外部glTF模型并实现3D视图

• 逻辑关联缺失：你自定义的delayCreateScene方法没有和vue-babylonjs的组件绑定，不会被自动执行，所以glTF模型不会加载
• 资源路径错误：Vue项目打包后相对路径会失效，glTF相关静态资源需要放到public目录下用绝对路径引用
• 纹理类型错误：你用普通的2D色彩贴图作为立方体贴图源，不符合天空盒的资源要求，该逻辑可先注释，跑通模型加载后再调整
• 缺少必要依赖：加载glTF需要额外引入babylonjs-loaders包，你当前的代码没有引入
• 画布没有设置高度：默认3D渲染画布高度为0，会导致看不见渲染内容

1. 前置准备 #

将你从Sketchfab下载的所有glTF相关资源（包含scene.gltf、关联的.bin文件、纹理图片）全部放到项目public/assets/magic_book_of_eden目录下。

2. 调整代码结构 #

入口文件（如main.js） #

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

// 全局注册vue-babylonjs组件
Vue.use(vb)

new Vue({
  render: h => h(Hello)
}).$mount('#app')

Hello.vue文件 #

<template>
  <div>
    <h1>Hello</h1>
    <!-- 绑定场景挂载后的回调方法 -->
    <Scene :onSceneMount="handleSceneMount" :antialias="true" />
  </div>
</template>

<script>
import * as BABYLON from 'babylonjs'
// 引入glTF加载器依赖
import 'babylonjs-loaders'

export default {
  methods: {
    handleSceneMount(engine, scene) {
      // 初始化默认相机和光照
      scene.createDefaultCameraOrLight(true, true, true)
      scene.activeCamera.attachControl(true)
      
      // 加载glTF模型，路径为public下的绝对路径
      BABYLON.SceneLoader.Append(
        '/assets/magic_book_of_eden/',
        'scene.gltf',
        scene,
        () => {
          // 模型加载完成后调整相机角度，对准模型
          scene.activeCamera.alpha += Math.PI
          scene.activeCamera.setTarget(BABYLON.Vector3.Zero())
        }
      )

      // 启动渲染循环
      engine.runRenderLoop(() => {
        scene.render()
      })

      // 适配窗口大小变化
      window.addEventListener('resize', () => {
        engine.resize()
      })
    }
  }
}
</script>

<style scoped>
/* 给3D画布设置固定高度，避免不显示 */
canvas {
  width: 100%;
  height: 600px;
  display: block;
}
</style>

3. 可选天空盒配置 #

如果需要添加天空盒，需准备专门的.env格式预过滤HDR资源，放到public目录后替换对应代码即可，不要直接用普通2D png图片作为立方体贴图源。

内容的提问来源于stack exchange，提问作者gohar1999