#blazor #csharp #threejs #3d A proof of concept I made in my free time for my work at Husqvarna Robotics R&D. It is a set of [Blazor](https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor) components instead of rendering HTML, it renders a 3D environment. This is a variation of another POC I made internally at Husqvarna, that version was coupled to our internal tooling and had Unity WebGL as a backend instead of [ThreeJS](https://threejs.org/). The goal with this was to simplify working with 3D in Blazor projects and to save money on Unity licensing. It works by using the lifecycle methods of Blazor components to create, update, and destroy ThreeJs objects. This let's you build 3D scenes much in the same way React Three Fiber works. The idea sprung after I built my own React renderer in [[react-aesprite]] and reading up on React Three Fiber. ## Example Simple example showing a reactive scene. The _light control_ input to the right is done in HTML. A more proper rendered snippet can be found in [the repository](https://github.com/tifye/blazor-three-js). ![[blazor-three-js-code.png]] Making use of the ThreeJS [OrbitControls](https://threejs.org/docs/#examples/en/controls/OrbitControls). ```xml <Camera Z="60" Y="25" Context="Cam"> <OrbitControls Camera="Cam" AutoRotate="true" /> </Camera> ``` ![[blazor-three-orbit.gif]] In the same way regular components react to input, these 3D components react but instead of updating the DOM they update the 3D environment. ![[blazor-three-interaction.gif]] ---- ## Continuation After leaving Husqvarna I've lost interest in going further with this idea. This project was one of many that sparked the beginning of [[FlameInGo]].