What's it for?
Use the Flourish 3D viewer template to display 3D scenes with physically-based rendering. It's well-suited for a number of use cases displaying 3D content, including architectural visualizations, product tours and scientific applications.
By adding your 3D model to a Flourish story, you can zoom around and annotate it with different annotation styles, turning your 3D model into a story.
How to get started
- 1
Choose the 3D viewer starting point from the template chooser.
- 2
Next, you'll need to source your 3D model file for the scene. We recommend binary glTF files (.glb), but the Flourish 3D viewer template also supports multiple formats:
- glTF
- OBJ
- FBX
-
If your model has additional files for textures that you would like to include, you can compress all the relevant files in a ZIP archive and upload that.
To upload your scene/model, click on the little arrow on Scene file. Also, you can choose to a Align to center.
You can also normalise the scale, so the model fits in a 1 x 1 x 1 box. A convenient option for firing up quickly a 3D model, but you might want to disable it if you want to control the scale yourself.
The maximum size for 3D models is 25 MB. This is to avoid excessive loading times. If your model is too large to upload to Flourish, we recommend using a tool such as Blender to simplify your model and compress your textures.
TIP: Great sources for finding models include Sketchfab, Turbosquid, Poly Pizza, thingiverse and 3DMDB.
- 3
-
Your next step would be to pick an environment map from our list of presets, which will determine the lighting for the scene and is used as the default background. Turning on Ambient will blur the environment, making it more performant,
It is also possible to create your own gradient by choosing a color for the ground, the horizon and the sky. You can also adjust the brightness through the Scene exposure and Background exposure settings.
-
You can upload your own equirectangular images for custom lighting and background too, which can be found on sites such as HDRI Haven or HDRI Skies. We suggest using for an RGBE (.hdr) file as it usually produces higher quality results, but .png and .jpg files work too.
For background, you can choose between the environment, a color, or transparent.
- 4
-
In the Camera and Controls settings, an array of customization options allows you to hone how the 3D is presented and interacted with. You can disable user interaction, allow fullscreen mode if it is supported, and also require cmd/ctrl in order to zoom when scrolling.
you can change the pitch, heading and distance in the Camera and Controls settings.
To further customize the camera, you can adjust the pitch, heading and distance.
It is also possible to choose between an orbit camera and a free look camera. While the orbit camera spins around a model's focal point, the free look camera points outwards from a point in space.
Free look will grant you a bit more control, but is not as straightforward to use.
- 6
If you'd like to show different views and animate between them, you'll have to add your model to a Flourish story. This will also allow you to add annotations.
- 7
If your 3D model also includes animations, a dropdown menu will appear at the bottom of the visualization. Choose the label for the static view from the Animation settings.