You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Blazor WASM中Babylon.js加载OBJ模型失败问题求助

Blazor WASM加载Babylon.js OBJ模型无显示问题

我有一个Blazor WASM项目,用于加载Babylon场景。加载简单场景(如平面上绘制球体)时一切正常,但尝试加载Azure存储中的*.obj文件并在Babylon场景中显示时,页面加载无错误但模型未显示。

相关代码

Babylon初始化代码

var createMeshScene = async function () {
    var scene = new BABYLON.Scene(engine);
    // 添加光源
    var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);
    // 添加弧旋转相机
    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 1, 0, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, false);        
    fetch("https://myapp.myorg.appserviceenvironment.us/myFile.obj",
        {
            mode: "no-cors",
            headers: {
                'Content-Type': 'application/octet-stream'
            },
        }
    ).then((val) => {
        val.blob().then(blob => {
            const file = new File([blob], "myFile.obj");
            BABYLON.SceneLoader.ImportMesh("", "", file, scene, function (newMeshes) {
                // 将相机目标设置为第一个导入的网格
                camera.target = newMeshes[0];
                newMeshes[0].scaling.scaleInPlace(50);
            });
        });
    })
    scene.registerBeforeRender(function () {
        light.position = camera.position;
    });
   
    return scene;
}

_Host.cshtml中加载的Babylon库

<script src="https://assets.babylonjs.com/generated/Assets.js"></script>
<script src="https://cdn.babylonjs.com/recast.js"></script>
<script src="https://cdn.babylonjs.com/ammo.js"></script>
<script src="https://cdn.babylonjs.com/havok/HavokPhysics_umd.js"></script>
<script src="https://cdn.babylonjs.com/cannon.js"></script>
<script src="https://cdn.babylonjs.com/Oimo.js"></script>
<script src="https://cdn.babylonjs.com/earcut.min.js"></script>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
<script src="https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
<script src="https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.js"></script>
<script src="https://cdn.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
<script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
<script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>

控制台信息

加载场景时无错误,但有以下提示:

Babylon.js v6.22.1 - WebGL2 [.WebGL-0000505C0711AA00]GL Driver Message
(OpenGL, Performance, GL_CLOSE_PATH_NV, High): GPU stall due to
ReadPixels

调试BABYLON.SceneLoader.ImportMesh后确认文件已正常加载,但模型仍未显示。

补充信息

完整的JavaScript初始化代码:

window.initializeBabylon = () => {
    var canvas = document.getElementById("renderCanvas");

    var startRenderLoop = function (engine, canvas) {
        engine.runRenderLoop(function () {
            if (sceneToRender && sceneToRender.activeCamera) {
                sceneToRender.render();
            }
        });
    }

    var engine = null;
    var scene = null;
    var sceneToRender = null;
    var createDefaultEngine = function () { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true, disableWebGL2Support: false }); };

    var createMeshScene = async function () {
        var scene = new BABYLON.Scene(engine);
        // 添加光源
        var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);
        // 添加弧旋转相机
        var camera = new BABYLON.ArcRotateCamera("Camera", 0, 1, 0, BABYLON.Vector3.Zero(), scene);
        camera.position = new BABYLON.Vector3(500, 500, 500); 

        camera.attachControl(canvas, false);       
        var response = await fetch("assets/MyObj.obj");

        if (!response.ok) throw new Error("Failed to load: MyObj.obj " + response);
        var blob = await response.blob();
        var file = new File([blob], "MyObj.obj");

        BABYLON.SceneLoader.ImportMesh("", "", file, scene, function (newMeshes) {
                    // 将相机目标设置为第一个导入的网格
                    camera.target = newMeshes[0];
                    newMeshes.forEach(m => m.scaling.scaleInPlace(0.5));
        });

        scene.registerBeforeRender(function () {
            light.position = camera.position;
            light.intensity = 0.7;
        });
       
        return scene;
    }


    engine = createDefaultEngine();
    if (!engine) throw 'engine should not be null.';
    startRenderLoop(engine, canvas);
    scene = createMeshScene();
    sceneToRender = scene;
};

Razor页面中的调用代码:

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JSRuntime.InvokeVoidAsync("initializeBabylon");
    }
}

内容的提问来源于stack exchange,提问作者jason

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.09 10:37:15