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
相关产品推荐
相关产品推荐

