Hello,

I want to create a rezisebal 3D object with Babylon js (based on WebGL) in blazor and i want to youse the variables in C# .

The problem is if I'm recreating the Scene the the full page is going back to the default settings and not refreshing the Canvas.

Blazor Code:

@page "/"

@inject IJSRuntime m_jSRuntime

<h1>Rotating Cube</h1>
<form>
    <label>Kante A <input id="KanteA" type="text" size="8" @bind="kanteA" /></label>
</form>
<form>
    <label>Kante B <input id="KanteB" type="text" size="8" @bind="kanteB" /></label>
</form>
<form>
    <button id="btn Change" @onclick="click => ChangeSize()">Ändern</button>
</form>

@code
{
    /* public*/
    double kanteA; /*{ get; set; }*/
    /* public*/
    double kanteB; /*{ get; set; } */

    public async Task ChangeSize()
    {
        try
        {
          await m_jSRuntime.InvokeAsync<Size>("babylonInterop.createScene");
        }
        catch
        {
            Console.Write("Error");
        }

JS Code

var babylonInterop = babylonInterop || {}

const canvas = document.getElementById('babylon-canvas');

const engine = new BABYLON.Engine(canvas, true);
Heilbronn
babylonInterop.createScene = function () {
    var scene = new BABYLON.Scene(engine);

    var kanteA = document.getElementById('KanteA').value
    var kanteB = document.getElementById('KanteB').value

    //Erstellen der Kamera
    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 0, new BABYLON.Vector3(0, 0, 0), scene);
    //Festlegen der Position
    camera.setPosition(new BABYLON.Vector3(0, 0, 10));
    //Anheften an das Canvas
    camera.attachControl(canvas, true);
    //Licht erstllen 
    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
    //Einstellen der Leuchtkraft
    light.intensity = 0.7;
    //Erstellen der Box beim ersten Durchlauf
    var box = BABYLON.MeshBuilder.CreateBox("Box", { kanteA, kanteB, kanteA }, scene);

    return scene;
};

const mainscene = babylonInterop.createScene();

engine.runRenderLoop(function () {
    mainscene.render();
});