### Install Babylon.Blazor via .NET CLI Source: https://github.com/alexnek/babylonblazor/blob/master/readme.md Installs the Babylon.Blazor NuGet package using the .NET Command Line Interface. This command adds the library to your Blazor project's dependencies. ```bash dotnet add package Babylon.Blazor ``` -------------------------------- ### Install Babylon.Blazor via Package Manager Source: https://github.com/alexnek/babylonblazor/blob/master/readme.md Installs the Babylon.Blazor NuGet package using the Package Manager Console in Visual Studio. This command adds the library to your Blazor project's dependencies. ```powershell Install-Package Babylon.Blazor ``` -------------------------------- ### Custom Scene Creator in C# Source: https://github.com/alexnek/babylonblazor/blob/master/readme.md Provides an example of creating a custom scene creator class in C# by inheriting from `SceneCreator`. This class is responsible for defining and initializing the 3D scene. ```C# public class MySceneCreator : SceneCreator { public override async Task CreateAsync(BabylonCanvasBase canvas) { ... } } ``` -------------------------------- ### Custom Razor Component for Canvas Source: https://github.com/alexnek/babylonblazor/blob/master/readme.md An example of a Razor component that inherits from a custom `BabylonCanvasBase` class. It renders a canvas element, enabling the display of custom 3D scenes within a Blazor application. ```HTML @inherits MyCustomCanvas ``` -------------------------------- ### Callback Function Sample JS to .NET Source: https://github.com/alexnek/babylonblazor/blob/master/readme.md Illustrates setting up a callback function from JavaScript to .NET. This enables asynchronous communication where JavaScript can trigger C# methods, often used for event handling or data updates. ```C# // Example C# setup for JS callback (details not provided in source text) // await _jSInstance.InvokeAsync("registerCallback", DotNetObjectReference.Create(this)); ``` -------------------------------- ### Configure Dependency Injection for InstanceCreator (Server) Source: https://github.com/alexnek/babylonblazor/blob/master/readme.md Configures the `InstanceCreator` service for server-side rendering in Blazor. It registers `InstanceCreatorAsyncMode` which requires an `IJSRuntime` dependency. ```csharp public class Program { public static async Task Main(string[] args) { ... builder.Services.AddTransient(sp => new InstanceCreatorAsyncMode(sp.GetService())); var app = builder.Build(); } } ``` -------------------------------- ### Configure Dependency Injection for InstanceCreator (Client) Source: https://github.com/alexnek/babylonblazor/blob/master/readme.md Configures the `InstanceCreator` service for client-side rendering in Blazor. It registers the client-side `InstanceCreator` which also requires an `IJSRuntime` dependency. ```csharp builder.Services.AddTransient(sp => new InstanceCreator(sp.GetService())); await builder.Build().RunAsync(); ``` -------------------------------- ### Custom Loading Template in Blazor Canvas Source: https://github.com/alexnek/babylonblazor/blob/master/readme.md Demonstrates how to provide a custom loading template for the `BabylonCanvas` component. This allows displaying custom content while the Babylon engine initializes and renders the scene. ```HTML
Loading Custom Demo...
``` -------------------------------- ### Use SVG Sprite for Open Iconic Icons Source: https://github.com/alexnek/babylonblazor/blob/master/Babylon.Blazor.App/Babylon.Blazor.App/wwwroot/css/open-iconic/README.md Demonstrates embedding icons from an SVG sprite using the `` tag. This approach allows loading all icons with a single request. It suggests adding a general class to the `` tag and a unique class to the `` tag for styling. ```html ``` -------------------------------- ### Use SVG Sprite for Open Iconic Icons Source: https://github.com/alexnek/babylonblazor/blob/master/Babylon.Blazor.AppWasm/wwwroot/css/open-iconic/README.md Demonstrates embedding icons from an SVG sprite using the `` tag. This approach allows loading all icons with a single request. It suggests adding a general class to the `` tag and a unique class to the `` tag for styling. ```html ``` -------------------------------- ### Basic BabylonCanvas Usage in a Blazor Component Source: https://github.com/alexnek/babylonblazor/blob/master/readme.md Demonstrates how to use the `BabylonCanvas` component in a Blazor Razor page to render a 3D scene. It includes defining `ChemicalData` with atoms and bonds and initializing them in `OnInitializedAsync`. ```csharp @page "/test" @using Babylon.Blazor.Chemical @rendermode InteractiveAuto

Water

Chemical formula of water is H2O

@code { ChemicalData PanelData { get; } = new ChemicalData(); async Task InitDataAsync() { // Fake await line await Task.FromResult(1); PanelData.Atoms.Add(new AtomDescription() { Name = "O", X = 2.5369, Y = -0.1550, Z = 0.0000 }); PanelData.Atoms.Add(new AtomDescription() { Name = "H", X = 3.0739, Y = 0.1550, Z = 0.0000 }); PanelData.Atoms.Add(new AtomDescription() { Name = "H", X = 2.0000, Y = 0.1550, Z = 0.0000 }); PanelData.Bonds.Add(new BondDescription(1, 2, BondDescription.BondType.Single)); PanelData.Bonds.Add(new BondDescription(1, 3, BondDescription.BondType.Single)); } protected override async Task OnInitializedAsync() { await InitDataAsync(); } } ``` -------------------------------- ### Include Babylon.js Libraries in HTML Source: https://github.com/alexnek/babylonblazor/blob/master/readme.md Adds the necessary Babylon.js core and loader scripts, along with the custom babylonInterop.js, to the main HTML file (e.g., index.html or _Host.cshtml) to enable 3D rendering in Blazor. ```html ``` -------------------------------- ### Use Open Iconic Font with Foundation Class Source: https://github.com/alexnek/babylonblazor/blob/master/Babylon.Blazor.App/Babylon.Blazor.App/wwwroot/css/open-iconic/README.md Shows the HTML structure for using Open Iconic fonts with the Foundation framework. Icons are applied using the `fi-` class prefix followed by the specific icon name, including `title` and `aria-hidden` attributes. ```html ``` -------------------------------- ### Custom Babylon Canvas Implementation Source: https://github.com/alexnek/babylonblazor/blob/master/readme.md Shows how to create a custom `BabylonCanvasBase` component in Blazor. This custom canvas can be configured with specific data and scene creators to render unique 3D environments. ```C# public class MyCustomCanvas : BabylonCanvasBase { protected virtual async Task InitializeSzene(LibraryWrapper LibraryWrapper, string canvasId) { MyCustomData panelData; if (ChemicalData is MyCustomData) { panelData = (MyCustomData)SceneData; MySceneCreator creator = new MySceneCreator(LibraryWrapper, canvasId, panelData); await creator.CreateAsync(this); } } } ``` -------------------------------- ### C# Wrapper for JS Function Source: https://github.com/alexnek/babylonblazor/blob/master/readme.md Illustrates creating a C# wrapper method to call a JavaScript function exposed from a library. This method handles invoking the JS function and returning its result as a C# object. ```C# public async Task CsFunctionName(int parameter) { var jsObjRef = await _libraryWrapper.InvokeAsync("jsFunctionName", parameter); return new CsharpObj(jsObjRef); } ``` -------------------------------- ### Use Default Open Iconic Font with Data Glyph Source: https://github.com/alexnek/babylonblazor/blob/master/Babylon.Blazor.App/Babylon.Blazor.App/wwwroot/css/open-iconic/README.md Demonstrates using Open Iconic fonts with the default stylesheet. Icons are applied using the `oi` class and the `data-glyph` attribute to specify the icon name, along with `title` and `aria-hidden` attributes. ```html ``` -------------------------------- ### Use Open Iconic Font with Foundation Class Source: https://github.com/alexnek/babylonblazor/blob/master/Babylon.Blazor.AppWasm/wwwroot/css/open-iconic/README.md Shows the HTML structure for using Open Iconic fonts with the Foundation framework. Icons are applied using the `fi-` class prefix followed by the specific icon name, including `title` and `aria-hidden` attributes. ```html ``` -------------------------------- ### Include Open Iconic Font with Foundation CSS Source: https://github.com/alexnek/babylonblazor/blob/master/Babylon.Blazor.App/Babylon.Blazor.App/wwwroot/css/open-iconic/README.md Links the Foundation-specific stylesheet for Open Iconic. This allows icons to be used with the `fi-` class prefix when integrating with Foundation projects. ```html ``` -------------------------------- ### Importing JS Library in Blazor Source: https://github.com/alexnek/babylonblazor/blob/master/readme.md Demonstrates how to import a JavaScript library file into a Blazor Web Assembly application using C#. This allows C# code to interact with JavaScript functions. ```C# IJSInProcessObjectReference libraryWrapper = await _jSInstance.InvokeAsync("import", "./_content/LibraryName/LibraryJSExport.js"); ``` -------------------------------- ### Use Open Iconic Font with Bootstrap Class Source: https://github.com/alexnek/babylonblazor/blob/master/Babylon.Blazor.App/Babylon.Blazor.App/wwwroot/css/open-iconic/README.md Illustrates the HTML structure for using Open Iconic fonts within a Bootstrap framework. Icons are applied using the `oi` class followed by the specific icon name, along with a `title` and `aria-hidden` attribute. ```html ``` -------------------------------- ### Include Open Iconic Font with Foundation CSS Source: https://github.com/alexnek/babylonblazor/blob/master/Babylon.Blazor.AppWasm/wwwroot/css/open-iconic/README.md Links the Foundation-specific stylesheet for Open Iconic. This allows icons to be used with the `fi-` class prefix when integrating with Foundation projects. ```html ``` -------------------------------- ### Include Default Open Iconic Font CSS Source: https://github.com/alexnek/babylonblazor/blob/master/Babylon.Blazor.App/Babylon.Blazor.App/wwwroot/css/open-iconic/README.md Links the default stylesheet for Open Iconic fonts. This enables using icons with the `oi` class and a `data-glyph` attribute for specifying the icon name. ```html ``` -------------------------------- ### Include Open Iconic Font with Bootstrap CSS Source: https://github.com/alexnek/babylonblazor/blob/master/Babylon.Blazor.App/Babylon.Blazor.App/wwwroot/css/open-iconic/README.md Links the Bootstrap-specific stylesheet for Open Iconic. This enables the use of the `oi` class prefix for icons when integrating with Bootstrap projects. ```html ``` -------------------------------- ### Add Babylon.Blazor Namespace to _Imports.razor Source: https://github.com/alexnek/babylonblazor/blob/master/readme.md Adds the Babylon.Blazor namespace to the `_Imports.razor` file. This makes the library's components and types available throughout the Blazor application without needing explicit `@using` directives in every file. ```csharp @using Babylon.Blazor ``` -------------------------------- ### Custom Data Class for Scene Source: https://github.com/alexnek/babylonblazor/blob/master/readme.md Defines a custom data class that implements the `IData` interface. This class holds specific data required for a custom 3D scene, allowing for tailored scene configurations. ```C# public class MyCustomData:IData { } ``` -------------------------------- ### Include Default Open Iconic Font CSS Source: https://github.com/alexnek/babylonblazor/blob/master/Babylon.Blazor.AppWasm/wwwroot/css/open-iconic/README.md Links the default stylesheet for Open Iconic fonts. This enables using icons with the `oi` class and a `data-glyph` attribute for specifying the icon name. ```html ``` -------------------------------- ### Use Default Open Iconic Font with Data Glyph Source: https://github.com/alexnek/babylonblazor/blob/master/Babylon.Blazor.AppWasm/wwwroot/css/open-iconic/README.md Demonstrates using Open Iconic fonts with the default stylesheet. Icons are applied using the `oi` class and the `data-glyph` attribute to specify the icon name, along with `title` and `aria-hidden` attributes. ```html ``` -------------------------------- ### Include Open Iconic Font with Bootstrap CSS Source: https://github.com/alexnek/babylonblazor/blob/master/Babylon.Blazor.AppWasm/wwwroot/css/open-iconic/README.md Links the Bootstrap-specific stylesheet for Open Iconic. This enables the use of the `oi` class prefix for icons when integrating with Bootstrap projects. ```html ``` -------------------------------- ### Use Open Iconic Font with Bootstrap Class Source: https://github.com/alexnek/babylonblazor/blob/master/Babylon.Blazor.AppWasm/wwwroot/css/open-iconic/README.md Illustrates the HTML structure for using Open Iconic fonts within a Bootstrap framework. Icons are applied using the `oi` class followed by the specific icon name, along with a `title` and `aria-hidden` attribute. ```html ``` -------------------------------- ### Calling Wrapped JS Function from C# Source: https://github.com/alexnek/babylonblazor/blob/master/readme.md Shows the usage of a C# wrapper method to execute a JavaScript function. This is the final step in the JS interop process, allowing Blazor components to leverage JS library functionality. ```C# var CsharpObj = await LibraryWrapper.CsFunctionName(2); ``` -------------------------------- ### Use SVG Image for Open Iconic Source: https://github.com/alexnek/babylonblazor/blob/master/Babylon.Blazor.App/Babylon.Blazor.App/wwwroot/css/open-iconic/README.md Embeds an Open Iconic SVG icon directly as an image. This method uses a standard `` tag, requiring the `src` attribute to point to the SVG file and an `alt` attribute for accessibility. ```html icon name ``` -------------------------------- ### JavaScript Library Export Structure Source: https://github.com/alexnek/babylonblazor/blob/master/readme.md Defines the structure for exporting JavaScript functions from a library to be used in Blazor WASM applications. Functions are exported using the 'export' keyword. ```JavaScript export function functionName(parameters) { ... return javaObject; } ``` -------------------------------- ### Use SVG Image for Open Iconic Source: https://github.com/alexnek/babylonblazor/blob/master/Babylon.Blazor.AppWasm/wwwroot/css/open-iconic/README.md Embeds an Open Iconic SVG icon directly as an image. This method uses a standard `` tag, requiring the `src` attribute to point to the SVG file and an `alt` attribute for accessibility. ```html icon name ``` -------------------------------- ### Color SVG Sprite Icons with CSS Source: https://github.com/alexnek/babylonblazor/blob/master/Babylon.Blazor.App/Babylon.Blazor.App/wwwroot/css/open-iconic/README.md Shows how to change the color of icons loaded from an SVG sprite. This is achieved by applying the `fill` CSS property to the specific icon's class within the `` tag. ```css .icon-account-login { fill: #f00; } ``` -------------------------------- ### Color SVG Sprite Icons with CSS Source: https://github.com/alexnek/babylonblazor/blob/master/Babylon.Blazor.AppWasm/wwwroot/css/open-iconic/README.md Shows how to change the color of icons loaded from an SVG sprite. This is achieved by applying the `fill` CSS property to the specific icon's class within the `` tag. ```css .icon-account-login { fill: #f00; } ``` -------------------------------- ### Style SVG Sprite Icons with CSS Source: https://github.com/alexnek/babylonblazor/blob/master/Babylon.Blazor.App/Babylon.Blazor.App/wwwroot/css/open-iconic/README.md Provides CSS to control the size of icons embedded from an SVG sprite. By setting equal `width` and `height` on the SVG element, icons maintain their square aspect ratio. ```css .icon { width: 16px; height: 16px; } ``` -------------------------------- ### Style SVG Sprite Icons with CSS Source: https://github.com/alexnek/babylonblazor/blob/master/Babylon.Blazor.AppWasm/wwwroot/css/open-iconic/README.md Provides CSS to control the size of icons embedded from an SVG sprite. By setting equal `width` and `height` on the SVG element, icons maintain their square aspect ratio. ```css .icon { width: 16px; height: 16px; } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.