skills.rest
cfonseca23
cfonseca23COMMUNITY
Explore all skills by this author →
WebsiteGitHub

blazor-threejs-migration

Migrates Three.js integrations into Blazor WebAssembly projects with local vendoring and GitHub Pages deployment.

Updated Feb 19, 2026
Search Tags:#migration#webassembly#three.js#github pages#blazor#javascript interop#vendoring
One-click install
npx skills add https://github.com/cfonseca23/profile --skill blazor-threejs-migration-cfonseca23
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: blazor-threejs-migration
Source: https://github.com/cfonseca23/profile/tree/main/.github/skills/blazor-threejs-migration
Command: npx skills add https://github.com/cfonseca23/profile --skill blazor-threejs-migration-cfonseca23

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Moving a Three.js 3D integration into a new or empty Blazor WebAssembly project is error-prone: CDN dependencies break offline requirements, JS interop cleanup is often skipped, and GitHub Pages deployment fails without base href and SPA routing fixes. This Skill provides a proven workflow to rebuild or migrate that integration even when the original source code is unavailable. ## Core Features & Use Cases - Automated Three.js Vendoring: Adds an MSBuild target to the .csproj that installs Three.js via npm and copies the module and addons into wwwroot/lib/three during Build and Publish. - JS Bridge and Razor Page Generation: Creates a three-bridge.js ESM module with initThree, updateConfig, and disposeThree lifecycle functions, plus Razor pages that import it via Navigation.BaseUri and dispose resources with IAsyncDisposable. - GitHub Pages Deployment: Replicates a workflow with Node setup, dotnet publish, base href rewriting, 404.html for SPA routing, and .nojekyll. - Use Case: You want to reproduce a 3D text page from an old Blazor repo in a fresh .NET 10 project with fully offline assets. The Skill generates the csproj target, bridge module, Razor page, and workflow from scratch, then validates the build and vendored files. ## Quick Start Ask the AI to migrate the Three.js 3D page into a new Blazor WebAssembly project with offline vendoring and GitHub Pages deployment.

Frequently Asked Questions about blazor-threejs-migration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use Three.js in Blazor WebAssembly without a CDN?▼

Add an MSBuild target to the .csproj that runs npm install for a fixed Three.js version and copies three.module.js, three.core.js, and the examples/jsm addons into wwwroot/lib/three during Build and Publish. Your JS module then imports from those local paths.

How to call JavaScript modules from a Blazor Razor page?▼

Use IJSRuntime.InvokeAsync with the import function, resolving the module URL through Navigation.BaseUri so it works under subpaths. Store the returned IJSObjectReference and invoke exported functions like initThree on it.

Can I migrate a Three.js integration without the original source code?▼

Yes. The Skill supports a standalone reconstruction mode that generates the csproj vendoring target, the three-bridge.js module, and a minimal Razor page from built-in templates, without referencing any files from the original repository.

Why does my Blazor app break when deployed to GitHub Pages?▼

GitHub Pages serves the site under a repository subpath, so the base href in index.html must be rewritten to match. You also need a 404.html copy for SPA routing and a .nojekyll file so files are served correctly.

How do I clean up Three.js resources when leaving a Blazor page?▼

Implement IAsyncDisposable on the Razor page and call a disposeThree function that cancels requestAnimationFrame, removes window listeners, disposes controls, geometries, materials, and the WebGL renderer, then disposes the JS module reference.

Is a vendored Three.js setup fully offline by default?▼

Not necessarily. Vendoring removes the CDN dependency for the library itself, but assets like the default 3D text font may still load from threejs.org. For strict offline mode, move font JSON files into wwwroot and use local URLs.

Related Skills

Explore More Software Engineering Skills→
syncfusionsyncfusion
4

syncfusion-blazor-common

Configure Syncfusion Blazor projects with NuGet packages, services, and localization.

Official
Intermediate
matthewharwoodmatthewharwood
1

nitro

Enforce GitHub Pages deployment contracts for Nitro v3 static builds.

Community
Intermediate
encounterplusencounterplus
16

pixijs-assets

Load and cache PixiJS v8 assets into GPU-ready runtime with format detection.

Official
Advanced
hii-saikrishnahii-saikrishna

babylonjs-engine

Create 3D scenes and browser-based games with Babylon.js.

Community
Advanced