I want to change the Size of a box by User Input with Babylon and Blazor

Questions
1

I have to Create a Blazor Website with my Var on C# and the rest with Java Skript (Babylon). But I have no Clue how to resize it bc i alway get a very long error Code.

Java Script

var babylonInterop = babylonInterop || {}

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

const engine = new BABYLON.Engine(canvas, true);

var counter = 1;

babylonInterop.createScene = function () {

    var scene = new BABYLON.Scene(engine);

    // This creates and positions a free camera (non-mesh)
    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 5, new BABYLON.Vector3(0, 0, 0), scene);

    // Positions the camera overwriting alpha, beta, radius
    camera.setPosition(new BABYLON.Vector3(0, 0, 10));

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

    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    var 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 'box' shape.
    if (counter <= 1) {
        var box = BABYLON.MeshBuilder.CreateBox("Box", {}, scene);
        // Move the Box upward 1/2 its height
    }

    if (counter >= 2) {
        var kanteA = document.getElementById('KanteA').value
        var kanteB = document.getElementById('KanteB').value
        // Height Input
        var box = BABYLON.MeshBuilder.CreateBox("Box", { kanteA, kanteB, kanteA }, scene);
        scene.render();
    }
    counter += 1;

    return scene;
};

const mainscene = babylonInterop.createScene();

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

C# Code (razor Page)

@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" name="Kante1" size="8" @bind="kanteB" /></label>
</form>
<form>
    <button id="btn Change" @onclick="click => ChangeSize(kanteA,kanteB)">Ändern</button>
</form>

@code
{
    public double kanteA { get; set; } = 10;
    public double kanteB { get; set; } = 10;

    public async Task ChangeSize(double kanteA, double kanteB)
    {
        await m_jSRuntime.InvokeAsync<JsRuntimeObjectRef>("babylonInterop.createScene", kanteA, kanteB);
    }

}
2

Hello and welcome to the Babylon community!

Unfortunately, I have never heard of Blazor, so I won’t be able to help in this aspect. As you haven’t actually shown your error code, I can’t even say if the error is on Babylon’s side or not. If you do check the “First App on the Web” example: Getting Started - Chapter 1 - Setup Your First Web App | Babylon.js Documentation (babylonjs.com), you’ll see you need to call the “resize” function.

3

I’m sorry for the late response i have got cleard the error but now the page is refreshing if i create a new scene normaly it should only refresh the Canvas right?

4

you should not call create scene again on resize but only call engine.resize() maybe you could expose a second interop for resizing