Blazor.ThreeJs 25.9.3.1312

.NET 8.0 This package targets .NET 8.0. The package is compatible with this framework or higher. 
dotnet add package Blazor.ThreeJs --version 25.9.3.1312
                    


                    

                
NuGet\Install-Package Blazor.ThreeJs -Version 25.9.3.1312
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="Blazor.ThreeJs" Version="25.9.3.1312" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="Blazor.ThreeJs" Version="25.9.3.1312" />
                    


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="Blazor.ThreeJs" />
                    


                            Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package. 
paket add Blazor.ThreeJs --version 25.9.3.1312
                    


                    

                
#r "nuget: Blazor.ThreeJs, 25.9.3.1312"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
#:package Blazor.ThreeJs@25.9.3.1312
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package. 
#addin nuget:?package=Blazor.ThreeJs&version=25.9.3.1312
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=Blazor.ThreeJs&version=25.9.3.1312
                    


                            Install as a Cake Tool

Blazor.ThreeJs

ThreeJs C# Bindings for Blazor

The package releases are available at: NuGet

This package is a work-in-progress porting of all the ThreeJs extensive API, We welcome helping PRs!

Instalation

First add the references your index.html file in the header section:

<head>
    
    
    <script type="module" src="./_content/Blazor.ThreeJs/js/interop.js"></script>
    
    <script type="module" src="./_content/Blazor.ThreeJs/js/interop-webgpu.js"></script>
</head>

Second you have to setup your project with the proper dependant services.

// Program.cs

using SpawnDev.BlazorJS;
using Blazor.ThreeJs;

// Register the following services
builder.Services.AddBlazorJSRuntime();
builder.Services.AddThreeJs();

// Replace RunAsync with BlazorJSRunAsync
await builder.Build().BlazorJSRunAsync();

Usage

This example creates a canvas and shows a rotating cube.

// Page.razor
@using SpawnDev.BlazorJS
@using Blazor.ThreeJs

@inject THREE THREE
@inject BlazorJSRuntime JS



@code {
    private WebGLRenderer.WebGLRenderer? _renderer;
    private Scene.Scene? _scene;
    private Camera.Camera? _camera;
    private Mesh.Mesh? _cube;

    protected override void OnAfterRender(bool firstRender)
    {

        if (firstRender)
        {
            var window = JS.GetWindow();
            var document = JS.GetDocument();

            if (window is null || document is null) return;

            _scene = THREE.Scene();

            _camera = THREE.PerspectiveCamera(75, window.InnerWidth / window.InnerHeight, 0.1, 1000);

            _renderer = THREE.WebGLRenderer();
            _renderer.SetClearColor(0x333333);
            _renderer.SetSize(window.InnerWidth, window.InnerHeight);
            _renderer.SetAnimationLoop(Animate);

            document.Body?.AppendChild(_renderer.DomElement);

            var geometry = THREE.BoxGeometry(1, 1, 1);
            var material = THREE.MeshBasicMaterial( new Material.MeshBasicMaterialParameters { Color = 0x00ff00 } );
            _cube = THREE.Mesh(geometry, material);
            _scene.Add(_cube);

            _camera.Position.Z = 3;
        }
    }

    private void Animate()
    {
        if (_scene is null || _camera is null || _cube is null) return;

        _cube.Rotation.X += 0.01f;
        _cube.Rotation.Y += 0.01f;
        _renderer?.Render(_scene, _camera);
    }
}

Development

The package contains 3 Projects

  • Blazor.ThreeJs: Our Package with the API and bindings to JavaScript.
  • Blazor.ThreeJs.Tests: Our Unit Tests Definitions.
  • Blazor.ThreeJs.Tests.Runtime: Run this project and will you be able to run all the tests in the blazor page.

The project relies on SpawnDev.BlazorJS for interop operations, all the bindings are built on top of this library, this library also supports bindings for all the browser apis.

Roadmap

Aside from the binding API completion. We aim to develop a Component based scene description. The idea is to make it simpler and more intuitive for Blazor developers to build their rendering pipelines.

Here is an example how it is planning to look like:

<BzRenderer>
    <Cameras>
        <BzPerspectiveCamera Aspect="1" Far="1000" Fov="100" Near="10"/>
    </Cameras>
    <Materials>
        <BzMeshBasicMaterial Color="0x00FF00" Name="MeshBasicGreen" />
    </Materials>
    <Scenes>
        <BzScene IsActive="true">
        
        </BzScene>
    </Scenes>
    <Views>
        <BzCanvas Height="500" Width="500"/>
    </Views>
</BzRenderer>

The renderer should support complex scenarios like multiple viewports with multiple cameras, multiple scenes, complex shaders.

Governance

This package is mainained by Vinicius Miguel

We welcome PR's with API Improvements, Bug Fixes and Documentation.

License

This source code is licensed under the MIT License

Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  net9.0 is compatible.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 was computed.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
25.9.3.1312 113 9/3/2025
25.9.3.718 114 9/3/2025
25.8.27.2222 176 8/27/2025
25.8.27.1329 176 8/27/2025
25.8.27.937 174 8/27/2025
25.8.26.2119 176 8/26/2025
25.8.26.2109 175 8/26/2025
25.8.26.1125 195 8/26/2025
25.8.26.841 186 8/26/2025
25.8.25.1912 145 8/25/2025
25.8.25.1341 267 8/25/2025