在vue中使用babylonjs引入3d模型，打印mesh数据正常且无报错，但未在场景中显示，请问是什么环节出现了问题？

Question

在vue中使用babylonjs引入obj格式3d模型，成功引入但并未成功在场景中加载，使用多种引入方式都是如此

相关代码

主体dom

<div id="app">
    <canvas id="renderCanvas"></canvas>
</div>

js部分

methods: {
  scene() {
    window.addEventListener('DOMContentLoaded', () => {
      let canvas = document.getElementById('renderCanvas')
      let engine = new this.BABYLON.Engine(canvas, true)
      let scene = this.createScene(canvas, engine)
      engine.runRenderLoop(() => {
        scene.render()
      })
    })
  },
  createScene(canvas, engine) {
    let scene = new this.BABYLON.Scene(engine)
    
    let camera = new this.BABYLON.ArcRotateCamera('camera1', new this.BABYLON.Vector3(0, 5,-10), scene);
    
    camera.setPosition(new this.BABYLON.Vector3(0, 15, 20));
    
    camera.attachControl(canvas, true);
    
    let light = new this.BABYLON.HemisphericLight('light1', new this.BABYLON.Vector3(0,1,0), scene);
    light.intensity = 0.5

    this.BABYLON.SceneLoader.ImportMesh("", "/public/obj/channel.serva.3199/", "channel.serva.3199.obj", scene, (meshes, particleSystems, skeletons) => {
      console.log('打印', meshes, meshes[0], particleSystems, skeletons)
    })

    return scene
  }
},
created() {
  this.scene()
}

实际生成只有一个空白场景

控制台打印如下

请问如何才能让obj模型正常加载并显示出来？

Answer 1

已解决，由于项目是由vue-cli3搭建的，将obj模型放入public后需要用es6语法引入。
首先在return中定义publicPath: process.env.BASE_URL
然后在引用路径时写入${this.publicPath}即可引用
完整引用代码如
`<template>

<div id="app">
    <canvas id="renderCanvas"></canvas>
</div>

</template>

<script>
export default {

name: 'app',
data() {
  return {
    publicPath: process.env.BASE_URL
  }
},
methods: {
  scene() {
    window.addEventListener('DOMContentLoaded', () => {
      let canvas = document.getElementById('renderCanvas');
      let engine = new this.BABYLON.Engine(canvas, true);
      let scene = this.createScene(canvas, engine);
      engine.runRenderLoop(() => {
        scene.render()
      })
    })
  },
  createScene(canvas, engine) {
    let _this = this

    let scene = new this.BABYLON.Scene(engine)

    let camera = new this.BABYLON.ArcRotateCamera('camera1', new this.BABYLON.Vector3(0, 10,-10), scene);

    camera.setPosition(new this.BABYLON.Vector3.Zero());

    camera.attachControl(canvas, true);

    let light = new this.BABYLON.HemisphericLight('light1', new this.BABYLON.Vector3(0,5,0), scene);
    light.intensity = 1

    let assets = new this.BABYLON.AssetsManager(scene)
    let meshTask = assets.addMeshTask("", "", `${this.publicPath}obj/channel.serva.3199/`, "channel.serva.3199.obj")
    meshTask.onSuccess = function (task) {
      console.log('success', task)
      task.loadedMeshes[0].position = _this.BABYLON.Vector3.Zero();
    }
    meshTask.onError = function (task, message, exception) {
      console.log('error', message, exception);
    }
    assets.load()

    return scene
  }
},
created() {
  this.scene()
}

}
</script>

<style>

#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}

#renderCanvas {
    width: 100%;
    height: 100%;
}

</style>`

Answer 2

我的模型的引入是参考你的，不能显示，是其他问题吗