I want to ask how to load the model that is on the server. That is, the model returned from the back end to the front end is a URL without a model name, so I don’t know how to load it

Questions
1

I write like this

BABYLON.SceneLoader.ImportMesh('', 'path of model (This path is sent back from the backEnd)', 'name of model (No name)', scene)

But there is an error. The model cannot be displayed.

 Unable to load from https://xxx.com/u/xx/xxxxx/0: importMesh of undefined from undefined version: undefined, exporter version: undefinedimportMesh has failed JSON parse

Who can tell me the solution? Thank you.

2

I think it will be difficult to help without showing code.

It seems some Babylon packages are not loaded correctly in your project(?) Have you added the babylonjs-loaders package?

2 Likes
3

Because it’s the first time I’ve met Babylon, I may not understand or know how to make it clear, because I really don’t understand.
The code like that:

<template>
    <canvas></canvas>
</template>

<script setup lang="ts">
import * as BABYLON from 'babylonjs'
import 'babylonjs-loaders'

onMounted(() => {
    const canvas = document.querySelector('canvas') as HTMLCanvasElement
    canvas.style.width = '100%'
    canvas.style.height = '350px'

    // 生成 BABYLON 3D 引擎
    var engine = new BABYLON.Engine(canvas, true)

    const createScene = function () {
        engine.enableOfflineSupport = false

        BABYLON.Animation.AllowMatricesInterpolation = true

        var scene = new BABYLON.Scene(engine)
        scene.clearColor = new BABYLON.Color4(0, 0, 0, 0) //设置画布背景透明

        var camera = new BABYLON.ArcRotateCamera(
            'camera1',
            Math.PI / 2,
            Math.PI / 2,
            4,
            new BABYLON.Vector3(0, 0, 0),
            scene
        )
        camera.attachControl(canvas, true)
        camera.lowerRadiusLimit = 2
        camera.upperRadiusLimit = 10
        camera.wheelDeltaPercentage = 0.01

        var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene)
        light.intensity = 0.6
        light.specular = BABYLON.Color3.White()

        var light2 = new BABYLON.DirectionalLight(
            'dir01',
            new BABYLON.Vector3(0, -0.5, -1.0),
            scene
        )
        light2.position = new BABYLON.Vector3(0, 5, 5)

        // 阴影
        var shadowGenerator = new BABYLON.ShadowGenerator(1024, light2)
        shadowGenerator.useBlurExponentialShadowMap = true
        shadowGenerator.blurKernel = 32

        // The model(That is, the following: props.image) is passed from the backEnd to the frontEnd
        watch(
            () => props.image,
            (newVal) => {},
            { immediate: true }
        )
        BABYLON.SceneLoader.ImportMesh('', '', props.image, scene, function (meshes) {
            console.log(meshes)
        })
        return scene
    }

    // 调用 createScene 函数
    const scene = createScene()

    // 注册渲染循环以重复渲染场景
    engine.runRenderLoop(function () {
        scene.render()
    })

    // 监视浏览器/画布调整尺寸事件
    window.addEventListener('resize', function () {
        engine.resize()
    })
})
</script>
4

Would you have a link to the repo where you created your project, if it’s not private?

I think people with better knowledge of packaging than me will be able to locate the problem quickly with it.

5

I’m sorry, this is not private. I dare not post it, but it is really the source code. Thank you for answering me.

6

@MG-ROY could you create a public repo with a repro with a different asset maybe so that the community can try to help ?

7 
https://github.com/MG-ROY/demo-project

This is my new public project demo. Thank you very much.

8 
https://github.com/MG-ROY/demo-project

This is my new public project demo. Thank you for your hard work.

9

Your glb file has no extension, so Babylon can’t know which loader plugin to use to load it. You need to pass the extension to SceneLoader.ImportMesh:

    BABYLON.SceneLoader.ImportMesh(
      "",
      "",
      "https://shuquan-static.oss-cn-hangzhou.aliyuncs.com/u/pi/AYBlkLZDR4eHdiJHKI5SLQ/SZuRYxYWx7IR/0",
      scene,
      function (meshes: any) {
        console.log(meshes);
      },
      undefined,
      undefined,
      ".glb"
    );
    return scene;
  };
1 Like
10

wow!!! It is really solved. You are my god!!! Thank you from the bottom of my heart.