VOOZH about

URL: https://www.nuget.org/packages/ApprenticeFoundryBlazorThreeJS/

⇱ NuGet Gallery | ApprenticeFoundryBlazorThreeJS 23.1.0



ApprenticeFoundryBlazorThreeJS 23.1.0 

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
The NuGet Team does not provide support for this client. Please contact its maintainers for support. 
#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
The NuGet Team does not provide support for this client. Please contact its maintainers for support.

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

  • : Technical details of the pivot system
  • : Comprehensive examples and use cases
  • : 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

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 net9.0 is compatible.  net9.0-android net9.0-android was computed.  net9.0-browser net9.0-browser was computed.  net9.0-ios net9.0-ios was computed.  net9.0-maccatalyst net9.0-maccatalyst was computed.  net9.0-macos net9.0-macos was computed.  net9.0-tvos net9.0-tvos was computed.  net9.0-windows net9.0-windows was computed.  net10.0 net10.0 was computed.  net10.0-android net10.0-android was computed.  net10.0-browser net10.0-browser was computed.  net10.0-ios net10.0-ios was computed.  net10.0-maccatalyst net10.0-maccatalyst was computed.  net10.0-macos net10.0-macos was computed.  net10.0-tvos net10.0-tvos was computed.  net10.0-windows 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 357 9/24/2025
23.0.0 244 9/23/2025
22.0.0 304 9/22/2025
21.0.0 298 9/10/2025
20.3.0 288 8/11/2025
20.2.0 205 8/10/2025
20.0.1 212 8/9/2025
20.0.0 230 8/9/2025
19.0.0 246 7/28/2025
18.3.0 310 4/6/2025
18.2.0 501 3/2/2025
18.1.0 251 3/2/2025
18.0.0 319 2/23/2025
17.4.1 262 2/11/2025
17.4.0 254 2/9/2025
17.3.0 253 1/30/2025
17.2.2 254 1/28/2025
17.1.2 312 1/28/2025
17.1.1 225 1/27/2025
17.1.0 214 1/27/2025
Loading failed