ApprenticeFoundryBlazorThreeJS 23.1.0
dotnet add package ApprenticeFoundryBlazorThreeJS --version 23.1.0
NuGet\Install-Package ApprenticeFoundryBlazorThreeJS -Version 23.1.0
<PackageReference Include="ApprenticeFoundryBlazorThreeJS" Version="23.1.0" />
<PackageVersion Include="ApprenticeFoundryBlazorThreeJS" Version="23.1.0" />
<PackageReference Include="ApprenticeFoundryBlazorThreeJS" />
paket add ApprenticeFoundryBlazorThreeJS --version 23.1.0
#r "nuget: ApprenticeFoundryBlazorThreeJS, 23.1.0"
#:package ApprenticeFoundryBlazorThreeJS@23.1.0
#addin nuget:?package=ApprenticeFoundryBlazorThreeJS&version=23.1.0
#tool nuget:?package=ApprenticeFoundryBlazorThreeJS&version=23.1.0
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
- Pivot Implementation Analysis: Technical details of the pivot system
- Pivot Usage Examples: Comprehensive examples and use cases
- Sample Scene: Complete scene example with various objects
- GitHub Repository: Full source code and examples
License
This project is licensed under the MIT License. See the LICENSE file for more details.
Support
- Issues: Report bugs or request features on GitHub Issues
- Discussions: Ask questions on GitHub Discussions
- Website: Visit ApprenticeFoundry.github.io for more resources
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 | Versions 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. |
-
net9.0
- ApprenticeFoundryRulesAndUnits (>= 9.0.0)
- Blazor.Extensions.Canvas (>= 1.1.1)
- BlazorComponentBus (>= 2.2.0)
- Microsoft.AspNetCore.Components.Web (>= 9.0.7)
- System.Text.Json (>= 9.0.0)
NuGet packages (2)
Showing the top 2 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. |
|
ApprenticeFoundryMentorModeler
Package Description |
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last Updated |
---|---|---|
23.1.0 | 0 | 9/24/2025 |
23.0.0 | 17 | 9/23/2025 |
22.0.0 | 44 | 9/22/2025 |
21.0.0 | 152 | 9/10/2025 |
20.3.0 | 167 | 8/11/2025 |
20.2.0 | 87 | 8/10/2025 |
20.0.1 | 105 | 8/9/2025 |
20.0.0 | 112 | 8/9/2025 |
19.0.0 | 104 | 7/28/2025 |
18.3.0 | 209 | 4/6/2025 |
18.2.0 | 301 | 3/2/2025 |
18.1.0 | 150 | 3/2/2025 |
18.0.0 | 170 | 2/23/2025 |
17.4.1 | 154 | 2/11/2025 |
17.4.0 | 140 | 2/9/2025 |
17.3.0 | 147 | 1/30/2025 |
17.2.2 | 136 | 1/28/2025 |
17.1.2 | 175 | 1/28/2025 |
17.1.1 | 127 | 1/27/2025 |
17.1.0 | 123 | 1/27/2025 |
16.2.0 | 141 | 11/17/2024 |
16.1.0 | 218 | 11/16/2024 |
16.0.0 | 158 | 11/10/2024 |
15.4.0 | 135 | 11/4/2024 |
15.3.0 | 144 | 10/30/2024 |
15.2.0 | 307 | 9/12/2024 |
15.1.0 | 139 | 9/12/2024 |
15.0.0 | 139 | 9/12/2024 |
14.2.0 | 224 | 8/28/2024 |
14.1.0 | 238 | 8/21/2024 |
14.0.0 | 167 | 8/21/2024 |
4.4.0 | 157 | 8/20/2024 |
4.3.0 | 170 | 8/10/2024 |
4.2.0 | 448 | 7/19/2024 |
4.1.0 | 262 | 5/6/2024 |
4.0.0 | 261 | 3/12/2024 |
3.1.0 | 230 | 2/14/2024 |
3.0.1 | 414 | 12/11/2023 |
3.0.0 | 221 | 11/26/2023 |
2.2.3 | 256 | 11/18/2023 |
2.2.2 | 190 | 11/16/2023 |
2.2.1 | 169 | 11/14/2023 |
2.2.0 | 161 | 11/14/2023 |
2.1.5 | 1,093 | 10/2/2023 |
2.0.5 | 221 | 10/1/2023 |