Using babylon js viewer in blazor app

what do i have to do ?

  • as i understood until now , I can define a js file in order to get a canvas from the html file and pass it to the engine ,
  • then; I need to define the scene - the camera - the object and the light
  • at the end I can pass all these to RenderLoop function

by running this file I can have the canvas with the constructed model inside .
Now , what is the scenario ?
imagine i need to define all these functions ( from the prev part ) as attributes of an object . something like this piece of code in the following :

var bInterop = bInterop || {};

bInterop.initialCanvas = function (canvasId) {
var babylonCanvas = document.getElementById(canvasId);
var babylonEngine = new BABYLON.Engine(babylonCanvas, true);
var scene = bInterop.createSceneWithSphere(babylonEngine, babylonCanvas);

babylonEngine.runRenderLoop(function () {

window.addEventListener("resize", function () {


bInterop.createSceneWithSphere = function (engine, canvas) {
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.ArcRotateCamera(“Camera”, Math.PI / 2, Math.PI / 2, 2, new
BABYLON.Vector3(0, 0, 5), scene);
camera.attachControl(canvas, true);
… }

, doing this way i can pass the bInterop.initialCanvas as an input to the .net as the following :

[Inject] IJSRuntime JsRuntime { get; set; }
protected async override Task OnAfterRenderAsync(bool firstRender)
await base.OnAfterRenderAsync(firstRender);

    if (firstRender)
        await JsRuntime.InvokeVoidAsync("bInterop.initialCanvas", "babylon-canvas");

“babylon-canvas” is the id of element in the razor page .
In the following this razor component will be passed into the view inside the blazor app


First question :

can i pass babylon tag into .razor page ? ( it seems not possible )

Second question :

How can i do the same procedure in order to use the babylon js Viewer ? which means defining a js script , extract the viewer functionality from the lib , passing it
to an empty object , and at the end passing the object to .Net .

Hope i have defined my question good

I guess this is more a question for a Blazor forum :frowning:


It would be .
but beside that, is there any way to use the babylon js viewer , without the tag ?

maybe by asing this way , it would help

yes, you can use the babylon viewer on any other html tag. You can manually trigger the viewer with a selector. It’s all documented here -