Need suggestion for learning path to build a 3D photo gallery

Hi, I’m trying to create a 3D photo gallery with sitemap. I’m absolutely new to babylon.js. Can you help me suggesting the right track to learn babylon.js to accomplish my task? Thanks in advance.

Hi and welcome to the Community,
This question is a bit too open to give a proper answer. You are new to babylon but what about your knowledge for creating a 3D realtime env, and then with VR? What I can suggest is that you would start by taking a look at some similar projects that have been done by this community members. Simply type ‘gallery’ in this forum and you will already find a number of projects. You can also look at ‘VR shop’ and ‘Dealer’ experiences.

One thing is sure is that you’re gonna need a roadmap and you will also have to study all of the different aspects, learning about the BJS code and specificities… For creating and importing meshes, materials, lighting, cameras, GUI and more… Thankfully, the docs are comprehensive and pretty straight forward, so what I can suggest is that you pick a topic at the time and use the PG to test and enhance your skills before moving to your own scene.

In terms of project handling, as I said, I would start by laying down all of the requirements. Split them into ‘must have’ and ‘nice to have’. Most importantly I believe is to make a clear choice for what has to be dynamic from the start and what can be static at first, eventually turned into dynamic later on.
This design thinking requires a bit (preferably a strong) knowledge of how to scope and design an app.
If your method is wrong and you start building on it, it can easily turn into a nightmare once you realize (too late) that you have to change it. So if I had just one advise to give you is to take your time on this first step and do it with rigour. Else, may be before diving into your ‘project of a lifetime’, see if you can just sharpen your skills by participating to a similar existing project (and as I said, there are number of those). Of course, my opinion only.
Again, welcome to the community and I hope you’re enjoying your time with BJS :smiley: :smiley:
Meanwhile, have a great day :sunglasses:


cc @PirateJC

Thank you for your detailed answer.
The idea is:

  1. Create a room for a photo gallery.
  2. Inside the room there will be different sites (wall) to show the photos.
  3. User can move next/previous wall by interacting with keyboard keys.
  4. User can also move among the walls by drag and drop
  5. There will be a site-map of the walls at bottom of the scene which will help user to understand the current position of the user.
  6. User can toggle the site-map appearance on the scene

Can you suggest me which topics I need to know to achieve these? Any workable resources will be much appreciated.


First and foremost, welcome to the Babylon.js family!!! It’s sincerely great to have you here!

@mawa gave some great suggestions for places to get started.

Your project sounds VERY similar to another project made with Babylon.js called “Galeryst

I bet the creator @Michael_Scherotter1 would be willing to offer you some advice and wisdom for how he approached things. :slight_smile:

1 Like

Please feel free to give Galeryst a try:

Here is the video from launch a little over a year ago.

What questions do you have?



There a few approaches that you can take:

  • Create your own 3d room model specifically for your artwork
  • Create a model that can be used for multiple collections
  • Generate a model based on the collection

I took the third approach, but you can find many examples of the first two. The first two approaches give you the opportunity to make a much better model by doing things like baking in shadows but it isn’t as customizable.