Blazor.ThreeJs 25.8.25.1341

.NET 8.0 This package targets .NET 8.0. The package is compatible with this framework or higher.
There is a newer version of this package available.
See the version list below for details. 
dotnet add package Blazor.ThreeJs --version 25.8.25.1341
                    


                    

                
NuGet\Install-Package Blazor.ThreeJs -Version 25.8.25.1341
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.8.25.1341" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
<PackageVersion Include="Blazor.ThreeJs" Version="25.8.25.1341" />
                    


                            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.8.25.1341
                    


                    

                
#r "nuget: Blazor.ThreeJs, 25.8.25.1341"
#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.8.25.1341
#: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.8.25.1341
                    


                            Install as a Cake Addin
                        

                    

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


                            Install as a Cake Tool

Blazor.ThreeJs

Package in development, not ready for production!

ThreeJs C# Bindings for Blazor

The package releases are available at: NuGet

Instalation

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

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

Second you have to setup your project to use SpawnDev.BlazorJS

// Program.cs

using SpawnDev.BlazorJS;
using Blazor.ThreeJs;

builder.Services.AddBlazorJSRuntime();
builder.Services.AddThreeJs();

// build and Init using BlazorJSRunAsync (instead of RunAsync)
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 bindinds are built on top of this library, this library also supports bindings for all the browser apis.

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 181 9/3/2025
25.9.3.718 173 9/3/2025
25.8.27.2222 211 8/27/2025
25.8.27.1329 210 8/27/2025
25.8.27.937 208 8/27/2025
25.8.26.2119 200 8/26/2025
25.8.26.2109 210 8/26/2025
25.8.26.1125 230 8/26/2025
25.8.26.841 201 8/26/2025
25.8.25.1912 181 8/25/2025
25.8.25.1341 303 8/25/2025