BabylonLearningLab

Babylon Learning Lab

A small ASP.NET Core, PostgreSQL, and Babylon.js project for learning how a 2D-to-3D furniture-fitting application moves catalog data into a browser 3D scene.

New to .NET or C#? Start with the structured beginner learning guide. It explains the files, C# concepts, API, database flow, frontend communication, and Babylon.js model loading in this project.

Run it

dotnet run

Open the HTTPS or HTTP URL printed by the app. Enter room width and length in the 2D panel, update the room, choose a bookshelf, choose a wall, and place the GLB model in the 3D room. The page calls GET /api/scene and GET /api/furniture; the returned modelUrl is then passed to Babylon.js SceneLoader.ImportMeshAsync.

Add PostgreSQL

The app uses the in-memory catalog by default. To run PostgreSQL locally:

docker compose up -d
export ConnectionStrings__FurnitureDb='Host=localhost;Port=5432;Database=furniture_lab;Username=furniture_app;Password=furniture_dev'
dotnet run

The database schema lives in database/001-furniture.sql. In a production furniture fitter, model_url would point to a GLB asset in object storage or a model service. The API would authorize the user, query the catalog, and return metadata plus the asset URL; Babylon.js would then load that GLB with SceneLoader.ImportMeshAsync.

Deploy to GitHub Pages

The interactive frontend is also deployable as a static site. The Pages workflow publishes wwwroot/ on every push to main, including the static scene.json, catalog.json, and GLB assets. The custom domain is declared in wwwroot/CNAME.

In the repository settings, open Pages, choose GitHub Actions as the source, and make sure the workflow has completed. At the DNS provider, replace the domain’s nameservers with the four nameservers supplied by the registrar:

tech-domains.venus.orderbox-dns.com
tech-domains.mercury.orderbox-dns.com
tech-domains.mars.orderbox-dns.com
tech-domains.earth.orderbox-dns.com

The static frontend reads scene.json and catalog.json, while the ASP.NET Core API remains available when running the project locally with dotnet run.

Architecture

PostgreSQL furniture_items
	-> C# IFurnitureCatalog / SQL repository
	-> GET /api/furniture
	-> browser fetch()
	-> Babylon.js SceneLoader -> GLB model in the 3D room

Suggested exercises

  1. Change the values returned by SceneSettings in Program.cs.
  2. Change the default room dimensions in wwwroot/app.js.
  3. Add a third furniture record and model to the catalog.
  4. Set a breakpoint inside the /api/furniture handler and inspect the request.
  5. Add a clear-models button to the planner.

How the frontend communicates

  1. The browser calls GET /api/furniture with fetch.
  2. C# chooses PostgreSQL when ConnectionStrings__FurnitureDb exists, otherwise it uses the in-memory catalog.
  3. The API returns JSON metadata, including dimensions and a static model URL.
  4. The browser calls SceneLoader.ImportMeshAsync with that URL.
  5. The imported meshes are grouped, scaled to the database dimensions, rotated, and positioned against the selected wall.