3D Viewer

  1. Home
  2. Docs
  3. 3D Viewer
  4. Guides
  5. Gutenberg- Configure

Gutenberg- Configure

First, go to your Gutenberg Editor and insert the 3D Viewer block like before.


Select the block, you will see the settings option in the right sidebar. You can see there are 2 tabs for the settings: Settings, and Style.

3D Viewer- Gutenberg Sidebar Settings
3D Viewer- Gutenberg Sidebar Settings


There are two panels for the settings, Model(Source) and Options


From here insert the URL or upload the model and model poster. And you can use a decoder if you have a decoder file.

Also, if you want to use multiple models enable the Use Multiple Model.

3D Viewer- Gutenberg Model Settings
3D Viewer- Gutenberg Model Settings

In options you can change several things for the model:

  • Fullscreen: show or hide the fullscreen button for the viewer
  • Mouse Control: by enabling, control the model using mouse interaction.
  • Lazy Load: enable or disable lazy loading.
  • Loading Percentage: show or hide the loading percentage.
  • Progressbar: show or hide progressbar.
  • Shadow: enable/disable the shadow of the model.
  • Autoplay: enable/disable autoplay for the (only work model has animated feature).
  • Variant Selector: select the variant of the model (if the model has variants).
  • Animation Selector: enable the animation selector to choose different animations.
  • Set Animation: select different animation (if has different animation in the model).
  • Auto Rotate: by enabling the model will auto-rotate.
  • Rotate Direction: set rotates direction for auto-rotate.
  • Exposure: set exposure for the model.
3D Viewer- Gutenberg Options Settings
3D Viewer- Gutenberg Options Settings


Switch to Style Tab and you will see the options for changing the 3D Viewer style.

From here you can change the width, height, background color, or background image of the 3D Viewer.

Additional: you can set class and ID for the 3D Viewer. Also, can add custom CSS.

3D Viewer- Gutenberg Style
3D Viewer- Gutenberg Style
Was this article helpful to you? 1

How can we help?