My wife and I made a website for our company with Babylon JS. We wanted to say thank you for all the amazing work and a special thanks for the dedication towards the documentation.
How we did it: we built the models in Blender, baked the procedural textures into smaller sized tileable ones and baked a separate, combined light map. The navigation is custom-coded in Typescript and uses the history API. The content is layered on top by getting the bounding box of the meshes representing the content area. The HTML files are built using a custom Webpack plugin and include the “fallback” HTML for search engines and devices without WebGL support.
Tutorial topic: Make a 3D content website
Tutorials we found helpful:
- Ryan Kings channel (https://www.youtube.com/c/ryankingart) for procedural materials, especially his tutorial on texture baking (Texture Baking for Beginners (Blender Tutorial) - YouTube).
- Erindale (https://www.youtube.com/@Erindale) for more procedural materials, especially this tutorial (How to make Seamless Procedural Textures in Blender! - YouTube) that got us started on seamless procedural textures.
- This tutorial (06. Baked Lighting with Blender in BabylonJS - YouTube) and this tutorial (From Blender to BabylonJS - Nothing-is-3D) on baked lighting with Blender and Babylon JS.
- This post (Get mesh bounding box position and size in 2d screen coordinates) for calculating the visible 2D position of a mesh for layering content.
(Sorry for the broken links, can a mod please fix them? This is a new account and we can only paste 2 links.)