How to create an online 3D gallery.
Learn to create an online 3D gallery with your own photos, like this one:
To open the gallery directly in your browser click this link.
No matter if you are a professional photographer showcasing or selling photos or an enthusiast sharing photos with friends and family, an online gallery is a great way to make your work stand out and to engage your audience.
You need about 30 minutes and a computer with Windows to complete the tutorial. At the end you will have an own online gallery that can be shared with anyone via a link or embedded in websites.
The tutorial uses Shapespark, a tool that our company develops. Shapespark is used by 3D artists to create interactive 3D spaces that work in web browsers or desktop, mobile and VR devices.
1. Sign-up for Shapespark free 30-day trial and install Shapespark application for Windows. The trial version includes all the features needed to create the gallery.
2. Download the gallery-template.zip and extract it into Documents\Shapespark\gallery-template\ folder on your computer. Shapespark allows you to create virtual spaces from any 3D model, but in this tutorial we will use the template to completely skip the 3D modeling work.
3. Open the Shapespark application or, if you have the application already running, reload the list of scenes with Ctrl+R to see the gallery-template.
4. Click the Edit button to open the editor for the gallery template:
The imported template has placeholders for pictures. The frames are prepared for the 3:2 aspect ratio. If your pictures have a different aspect you can use a program like Photoshop or Gimp or one of many free online tools to either crop your pictures or add margins around them and achieve the 3:2 aspect.
5. To learn how to navigate in the 3D preview click the ? button (See the red 🠄 1 mark on the screenshot below).
6. In the editor go to the Materials tab (🠄2). Select a picture placeholder by left clicking inside an empty picture frame in the 3D preview (🠄3).
7. On the right side you will see the picture material properties. You will need to modify the Base color. Click the file icon (🠄4).
8. Select a picture from your disk.
9. Click the Save button to save your changes (🠄5).
Repeat the steps 6–8 to set more pictures in your gallery in the remaining empty frames.
The basic version of the gallery is ready and you can already upload it.
10. In the Shapespark application main window click the Upload button:
After the upload is finished you will see a link to the gallery. You can share this link with others and open it in any web browser on desktop and mobile. You can also embed the gallery in a web site with the following embed code.
Extra improvements
Next steps are optional improvements that you can make to your gallery.
A 3D video meeting within the gallery.
A 3D video meeting allows several participants to simultaneously explore a 3D gallery as avatars while video-chatting:
To get a shareable link to such a meeting go to your Shapespark account, locate a thumbnail with your uploaded gallery and use the Create meeting menu item:
When participants open the link they will be able to enter the gallery, turn-on their microphone and camera and talk with others while exploring the 3D space.
Popups with information about the pictures.
Shapespark allows you to place clickable objects in the 3D space called triggers. When clicked, a trigger can display additional information of any kind, for example, a detailed photo description, a price, a link to a high resolution version of the photo. Follow the steps below to add such a trigger:
1. Open the Shapespark editor Viewer tab (🠄1).
2. At the bottom use + button to add an extension (🠄2).
3. Make sure that the extension type is set to HTML Label (🠄3).
4. Click the + button (🠄4) to place the trigger within the 3D scene. Click any place (🠄5) in the 3D preview until you’re satisfied with the placement,
5. In the Content area (🠄6) enter the content that you would like to show when the trigger is clicked. You can use plain text, but also format it using HTML tags or add HTML links to external sites or images.
6. Save the scene with the Save button and Upload it again from the main Shapespark window.
The tutorial showed how to make a 3D photo gallery based on an existing template. With Shapespark you can create such a gallery from any 3D model created with design programs like Sketchup, 3ds Max, Revit or Blender. This requires 3D modeling skills, so it is more demanding than working with a template, but gives you complete freedom to shape the gallery in any way you imagine. See example galleries, showrooms or interiors for inspirations how such virtual spaces can look.
