ApprenticeFoundryBlazorThreeJS 23.1.0

.NET 9.0 This package targets .NET 9.0. The package is compatible with this framework or higher. 
dotnet add package ApprenticeFoundryBlazorThreeJS --version 23.1.0
                    


                    

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


                            Directory.Packages.props
                        

                    

                
<PackageReference Include="ApprenticeFoundryBlazorThreeJS" />
                    


                            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 ApprenticeFoundryBlazorThreeJS --version 23.1.0
                    


                    

                
#r "nuget: ApprenticeFoundryBlazorThreeJS, 23.1.0"
#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 ApprenticeFoundryBlazorThreeJS@23.1.0
#: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=ApprenticeFoundryBlazorThreeJS&version=23.1.0
                    


                            Install as a Cake Addin
                        

                    

                
#tool nuget:?package=ApprenticeFoundryBlazorThreeJS&version=23.1.0
                    


                            Install as a Cake Tool

BlazorThreeJS

BlazorThreeJS is a NuGet package that provides seamless integration of the Three.js library with Blazor applications. This package allows developers to create rich 3D graphics and animations using the power of Three.js within a Blazor project.

Features

  • Easy integration of Three.js with Blazor
  • Create and manipulate 3D objects and scenes
  • 🆕 Custom Pivot Points: Rotate objects around any point (e.g., bottom face on floor)
  • Full C# API with strong typing and intellisense
  • Advanced transform system with position, rotation, scale, and pivot support
  • Support for animations with customizable update callbacks
  • Hierarchical scene management with parent-child relationships
  • Performance optimized with matrix caching and dirty-flag system
  • Comprehensive documentation and examples

Installation

To install BlazorThreeJS, run the following command in the NuGet Package Manager Console:

Install-Package ApprenticeFoundryBlazorThreeJS

Alternatively, you can add the package reference directly to your .csproj file:

<PackageReference Include="ApprenticeFoundryBlazorThreeJS" Version="23.1.0" />

🌟 Key Feature: Custom Pivot Points

Unlike standard Three.js, BlazorThreeJS allows you to rotate objects around any point:

  • Floor Placement: Rotate objects around their bottom edge (perfect for architecture)
  • Corner Rotation: Spin around corners or edges
  • Custom Centers: Define any rotation point in 3D space
  • Backward Compatible: Existing code works unchanged
// Rotate a building around its base (bottom center)
Transform = new Transform3("Building") {
    Position = new Vector3(0, 0, 0),     // Ground position
    Pivot = new Vector3(0, -1, 0),       // Rotate around bottom
    Rotation = new Euler(0, 45°, 0)      // 45° turn on foundation
}

Getting Started

1. Install the Package

Add the BlazorThreeJS package to your Blazor project using the installation instructions above.

2. Add Static Assets to Your App

In your Blazor app's _Host.cshtml, _Layout.cshtml, or App.razor, add the required JavaScript reference:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>My Blazor App</title>
    <base href="~/" />
    
    
    <link href="_content/ApprenticeFoundryBlazorThreeJS/css/blazor-threejs.css" rel="stylesheet" />
</head>
<body>
    
    
    
    <script src="_content/ApprenticeFoundryBlazorThreeJS/dist/app-lib.js"></script>
    
    
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

3. Use in Your Components

@page "/3d-scene"
@using BlazorThreeJS.Viewers
@using BlazorThreeJS.Core
@using BlazorThreeJS.Maths

<ViewerThreeD @ref="viewer" 
              Width="800" 
              Height="600" 
              SceneName="MyScene" />

@code {
    private ViewerThreeD? viewer;
    
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && viewer != null)
        {
            await CreateScene();
        }
    }
    
    private async Task CreateScene()
    {
        // Create a box that rotates around its bottom face
        var box = new Mesh3D("FloorBox")
        {
            Transform = new Transform3("FloorBox")
            {
                Position = new Vector3(0, 0, 0),      // Position on floor
                Pivot = new Vector3(0, -1, 0),        // Rotate around bottom
                Rotation = new Euler(0, 45 * Math.PI/180, 0), // 45° rotation
                Scale = Vector3.One
            },
            // Add geometry and material...
        };
        
        await viewer.AddObjectToScene(box);
    }
}

Custom Pivot Points (New Feature!)

One of the most powerful new features is the ability to set custom pivot points for object rotation:

Bottom Face on Floor

// Perfect for placing objects on the ground
var box = new Mesh3D("FloorBox")
{
    Transform = new Transform3("FloorBox")
    {
        Position = new Vector3(0, 0, 0),     // Floor position  
        Pivot = new Vector3(0, -1, 0),       // Rotate around bottom face
        // Now rotations happen around the bottom edge, not center
    }
};

Rotate Around Corner

// Rotate around bottom-left-front corner
var box = new Mesh3D("CornerBox")
{
    Transform = new Transform3("CornerBox")
    {
        Position = new Vector3(0, 0, 0),
        Pivot = new Vector3(-1, -2, -3),     // Corner offset
        Rotation = new Euler(0, 90 * Math.PI/180, 0)  // 90° Y rotation
    }
};

Custom Rotation Center

// Rotate around a point above the object
var mesh = new Mesh3D("HighPivot")
{
    Transform = new Transform3("HighPivot")
    {
        Position = new Vector3(0, 5, 0),     // Pivot point location
        Pivot = new Vector3(0, -5, 0),       // Object offset from pivot
        // Object appears at (0,0,0) but rotates around (0,5,0)
    }
};

Backward Compatibility

Objects with pivot (0,0,0) work exactly as before - no changes needed to existing code!

Architecture & Performance

BlazorThreeJS features a sophisticated architecture:

  • C# Layer: Strongly-typed object model with Object3D, Transform3, Mesh3D, etc.
  • TypeScript Layer: Efficient Three.js integration with automatic object lifecycle management
  • Smart Caching: Transformation matrices are cached and only recalculated when needed
  • Automatic Interop: Changes in C# automatically sync to the Three.js scene

Transform System

The Transform3 class provides robust transformation capabilities:

public class Transform3
{
    public Vector3 Position { get; set; }     // World position
    public Vector3 Pivot { get; set; }        // Custom rotation center (NEW!)
    public Euler Rotation { get; set; }       // Euler angle rotation  
    public Quaternion QuaternionRotation { get; set; } // Alternative rotation
    public Vector3 Scale { get; set; }        // Scale factors
    
    // Automatic matrix caching with dirty flag optimization
    public Matrix3 ToMatrix3() { /* Cached calculation */ }
}

Package Information

Current Version: 23.1.0
Target Framework: .NET 9.0
License: MIT
Repository: https://github.com/ApprenticeFoundry/BlazorThreeJS

What's Included

This NuGet package includes:

  • ✅ Core Library: Complete C# API for Three.js integration
  • ✅ 🆕 Custom Pivot System: Rotate objects around any point (floor, corners, custom positions)
  • ✅ JavaScript Bundle: Compiled Three.js bundle (app-lib.js - 751KB)
  • ✅ Component Styles: Ready-to-use CSS for 3D viewers
  • ✅ 3D Assets: Sample models and fonts for quick start
  • ✅ Build Integration: Automatic static asset deployment
  • ✅ Advanced Transforms: Position, rotation, scale, and pivot with matrix caching

Troubleshooting

Assets Not Loading (404 Errors)

Make sure you've added the JavaScript reference to your app:

<script src="_content/ApprenticeFoundryBlazorThreeJS/dist/app-lib.js"></script>

Components Not Found

Add the using statement to your component or _Imports.razor:

@using BlazorThreeJS.Viewers
@using BlazorThreeJS.Core

Documentation

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Support

Release Notes

Version 23.1.0

  • ✅ Blazor Component Library: Properly configured for NuGet consumption
  • ✅ 🆕 Custom Pivot Points: Revolutionary feature for rotating objects around any point
  • ✅ Static Web Assets: Automatic deployment of JS/CSS/assets to consuming apps
  • ✅ Build Integration: MSBuild targets for seamless project integration
  • ✅ Performance Optimizations: Matrix caching and dirty-flag system
  • ✅ Updated Dependencies: Compatible with .NET 9.0 and latest Three.js
  • ✅ Backward Compatibility: Existing code works unchanged (pivot defaults to 0,0,0)
  • ✅ Improved Documentation: Enhanced setup and usage instructions
Product Compatible and additional computed target framework versions.
.NET 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 (1)

Showing the top 1 NuGet packages that depend on ApprenticeFoundryBlazorThreeJS:

Package Downloads
ApprenticeFoundryBlazor

A comprehensive C# / Blazor diagramming library that combines 2D and 3D visualization capabilities. Supports .NET 9, includes advanced layout algorithms, glued connections, multi-page diagrams, and seamless 2D/3D integration.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
23.1.0 236 9/24/2025
23.0.0 172 9/23/2025
22.0.0 228 9/22/2025
21.0.0 225 9/10/2025
20.3.0 202 8/11/2025
20.2.0 123 8/10/2025
20.0.1 136 8/9/2025
20.0.0 158 8/9/2025
19.0.0 169 7/28/2025
18.3.0 236 4/6/2025
18.2.0 395 3/2/2025
18.1.0 183 3/2/2025
18.0.0 215 2/23/2025
17.4.1 189 2/11/2025
17.4.0 171 2/9/2025
17.3.0 178 1/30/2025
17.2.2 177 1/28/2025
17.1.2 228 1/28/2025
17.1.1 156 1/27/2025
17.1.0 144 1/27/2025
16.2.0 170 11/17/2024
16.1.0 287 11/16/2024
16.0.0 190 11/10/2024
15.4.0 172 11/4/2024
15.3.0 180 10/30/2024
15.2.0 396 9/12/2024
15.1.0 157 9/12/2024
15.0.0 167 9/12/2024
14.2.0 306 8/28/2024
14.1.0 288 8/21/2024
14.0.0 195 8/21/2024
4.4.0 184 8/20/2024
4.3.0 197 8/10/2024
4.2.0 687 7/19/2024
4.1.0 330 5/6/2024
4.0.0 325 3/12/2024
3.1.0 296 2/14/2024
3.0.1 511 12/11/2023
3.0.0 269 11/26/2023
2.2.3 305 11/18/2023
2.2.2 218 11/16/2023
2.2.1 202 11/14/2023
2.2.0 189 11/14/2023
2.1.5 1,215 10/2/2023
2.0.5 244 10/1/2023