Using BabylonJS for a uno-library control

[VRage]

Hey,
i try to get BabylonJS working in an Uno Platform library to build a multiplatform 3D viewer for WASM and WinUI3 (via WebView2)

So, I added an Uno library project to the solution, downloaded the BabylonJS file, and included it as an embedded resource over the csproj file (btw: if i added the file as an embeeded resource via the properties window in VS2022, i get following error):

An error has occurred while saving the edited properties listed below:
Build Action
One or more values are invalid. Cannot add 'Platforms\Webassembly\WasmScripts\babylon.max.js' to the project, because the path is explicitly excluded from the project (C:\Users\Jakob.nuget\packages\uno.sdk\6.2.29\targets\Uno.Sdk.After.targets (12,3))..

I used BrowserHTMLElement to execute the sample JS code from the BabylonJS homepage:

var js = @"const canvas = document.getElementById(""renderCanvas""); // Get the canvas element
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        const createScene = function () {
            // This creates a basic Babylon Scene object (non-mesh)
            const scene = new BABYLON.Scene(engine);

            // This creates and positions a free camera (non-mesh)
            const camera = new BABYLON.FreeCamera(""camera1"", new BABYLON.Vector3(0, 5, -10), scene);

            // This targets the camera to scene origin
            camera.setTarget(BABYLON.Vector3.Zero());

            // This attaches the camera to the canvas
            camera.attachControl(canvas, true);

            // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
            const light = new BABYLON.HemisphericLight(""light"", new BABYLON.Vector3(0, 1, 0), scene);

            // Default intensity is 1. Let's dim the light a small amount
            light.intensity = 0.7;

            // Our built-in 'sphere' shape.
            const sphere = BABYLON.MeshBuilder.CreateSphere(""sphere"", {diameter: 2, segments: 32}, scene);

            // Move the sphere upward 1/2 its height
            sphere.position.y = 1;

            // Our built-in 'ground' shape.
            const ground = BABYLON.MeshBuilder.CreateGround(""ground"", {width: 6, height: 6}, scene);

            return scene;
        };

        const scene = createScene(); //Call the createScene function

        // Register a render loop to repeatedly render the scene
        engine.runRenderLoop(function () {
                scene.render();
        });

        // Watch for browser/canvas resize events
        window.addEventListener(""resize"", function () {
                engine.resize();
        });

I was able to include this control into a single-page Uno project for WebAssembly and Windows. However, no matter what I tried, BABYLON was always undefined.

So I checked the Source tab in the developer tools, and it seems like the BabylonJS file was loaded:

Also, the JavaScript file was referenced on the page:

When I run everything locally in an HTML file, it works. I also tried loading BabylonJS via CDN, without success.

One might think it’s just not possible to do it—but I’ve already managed to display the BabylonViewer, just not with a library in between BJS Viewer

Does anyone have tips, hints, or even a solution for this?
Here’s the source:
BJSIntegration.zip

[jeromelaban]

Thanks for the report. Your repro does not have all the required files for us to help (it's missing a project).

Have checked this how-to as well: https://platform.uno/docs/articles/interop/wasm-javascript-1.html ?