search

canhorn / EventHorizon.Blazor.BabylonJS-poc

1 stars 0 forks source link

Create or convert to HTMLCanvasElement #3

Open LostBeard opened 3 years ago

LostBeard commented 3 years ago

Awesome interop generator! I cannot express how excited I am to try this out, as a big Blazor and Babylon.js fan. To the problem...

I am using ehz-generate and a slightly modified command from the example page (linked below) to generate a Bablyon.js interop. That is working well.

https://github.com/canhorn/EventHorizon.Blazor.BabylonJS-poc

I had to remove the BoundingBoxGizmo due to an error about Map and generic types but I do not believe I need it anyways. (unrelated to Issue).

I had to modify some of the example CreateScene method code to work with recent changes in the interop generator. The problem I am having is that I cannot create the HTMLCanvasElement required for a new Engine instance. I have an ElementReference to a canvas. Is there a way to convert it into an HTMLCanvasElement or create a new HTMLCanvasElement?

My ehz-generate command to generate BabylonJS interop project: ehz-generate -f -a Blazor.BabylonJS.WASM -s https://raw.githubusercontent.com/BabylonJS/Babylon.js/master/dist/babylon.d.ts -s https://raw.githubusercontent.com/BabylonJS/Babylon.js/master/dist/gui/babylon.gui.d.ts -c Button -c MeshBuilder -c PointLight -c StandardMaterial -c HemisphericLight -c UniversalCamera -c Grid -c StackPanel -c SceneLoader -c ArcFollowCamera -c ScrollViewer -c ArcRotateCamera

My updated CreateScene: public async ValueTask CreateScene() { var engine = new Engine(canvas, true); var scene = new Scene(engine); var light0 = new PointLight("Omni", new Vector3(0, 2, 8), scene); var box1 = Mesh.CreateBox("b1", 1.0m, scene); var box2 = Mesh.CreateBox("b1", 1.0m, scene); box2.setAbsolutePosition(new Vector3(2m, 0, 0)); var camera = new ArcRotateCamera("ArcRotateCamera", (decimal)(System.Math.PI / 2), (decimal)(System.Math.PI / 4), 6, new Vector3(1, 0, 0), scene); camera.lowerRadiusLimit = 2; camera.upperRadiusLimit = 10; camera.wheelDeltaPercentage = 0.01m; scene.setActiveCameraByName("ArcRotateCamera"); camera.attachControl(false); engine.runRenderLoop(new ActionCallback(() => Task.Run(() => { scene.render(true, false); }))); _engine = engine; }

canhorn commented 3 years ago

Thanks for checking out this project!

The HTMLCanvasElement is a JavaScript API provided class, and is not auto generated. I have an example of creating a model class that creates the proxy to the Canvas element in the DOM: https://github.com/canhorn/EventHorizon.Blazor.TypeScript.Interop.Generator/blob/main/Sample/EventHorizon.Blazor.BabylonJS/Model/Canvas.cs This can then be passed into the new Engine(canvas, true) to create the scene.

I would also checkout the Sample project here: https://github.com/canhorn/EventHorizon.Blazor.TypeScript.Interop.Generator

That is the main repository/project for the Generator tool, and has some examples that are kept current with the tool version. I am pretty sure the cli tool is just generating more up-to-date classes, and they are not backwards compatible with the old CreateScene in this project.