Embedding 3D Models with Sketchfab in Hugo Blox

The Hugo Blox template is incredibly flexible, allowing users to extend its functionality to meet specific needs. One powerful feature you can add is the ability to embed a Sketchfab 3D Model Viewer directly into a Hugo Blox page. This is especially useful for academics in fields like geology, archaeology, and engineering, where 3D models can enhance the presentation of research and educational content.

By embedding Sketchfab models, you can present complex visual data in an accessible and engaging way, making your content more impactful. Whether you’re teaching, conducting research, or sharing your work, this feature adds significant value to your digital presence.

Setting Up Sketchfab Embedding in Hugo Blox

To embed Sketchfab 3D models, you’ll need to create a custom shortcode. Follow these steps to set it up:

1. Create the Shortcode File

Add a new file named sketchfab.html in the layouts/shortcodes/ directory of your Hugo project. Paste the following code into the file:

<div class="sketchfab-embed-wrapper">
   <iframe 
      frameborder="0" 
      allowfullscreen 
      mozallowfullscreen="true" 
      webkitallowfullscreen="true" 
      allow="autoplay; fullscreen; xr-spatial-tracking" 
      execution-while-out-of-viewport 
      execution-while-not-rendered 
      web-share 
      width="{{ .Get "width" | default "640" }}" 
      height="{{ .Get "height" | default "480" }}" 
      src="https://sketchfab.com/models/{{ .Get "id" }}/embed?ui_theme={{ .Get "theme" | default "light" }}">
   </iframe>
</div>

This shortcode is simple yet flexible. It requires only the model ID from Sketchfab, while optional parameters let you customize the width, height, and theme of the embed.

2. Embed a Sketchfab Model in Markdown

Once the shortcode is in place, you can embed a Sketchfab model in any page using the following syntax:

{{< sketchfab id="YOUR_MODEL_ID" >}}

Parameters

• Required:
  • id: The unique model ID from Sketchfab. To find the model ID, go to the model on Sketchfab and click on the “Embed” button. The ID is the string of characters after https://sketchfab.com/models/.
• Optional Parameter:
  • width: The width of the iframe in pixels, defaulting to “640” if not specified.
  • height: The height of the iframe in pixels, defaulting to “480” if not specified.
  • theme: An optional parameter to set the theme, defaulting to “light” if not specified.

{{< sketchfab id="YOUR_MODEL_ID" width="800" height="600" >}}

{{< sketchfab id="YOUR_MODEL_ID" width="800" height="600" theme="light" >}}

This setup ensures that you can quickly and easily embed 3D models into your pages, maintaining control over the presentation while keeping the process simple.

3. Practical Example

Using the simplest shortcode with only id specified, allowing for default width, height, and theme settings. Here’s an example of how the viewer would look in a Hugo Blox page:

Some Notes

• Press the “Play” button to activate the 3D model.
• Hold-left or hold-right click to rotate and move the model in the virtual space.
• Scrolling the mouse wheel zooms in and out.
• Built-in features like fullscreen mode, lighting adjustments, and viewing in virtual reality (VR) are abailable in the bottom right window options.
• When you are done interacting with the model, clicking the “X” button in the top right corner “exits” the viewer.

Benefits of Embedding Sketchfab Models

Simplicity

The shortcode focuses on the essential parameters, making it straightforward to use. This simplicity is beneficial for users who may not be familiar with more complex embedding techniques.

Flexibility

While the shortcode is designed to be simple, it remains flexible. You can adjust the width and height to fit different models and presentation needs, ensuring that the embedded models look great on any page.

Enhanced Content

Embedding 3D models directly into your Hugo Blox site allows you to provide interactive, visually compelling content that can significantly enhance the educational value of your site. Whether you’re showcasing geological formations, archaeological artifacts, or engineering designs, the ability to present these models in an interactive format adds a new dimension to your content.

Professional Presentation

Incorporating 3D models into your website not only makes your content more engaging but also demonstrates a high level of professionalism and technical capability. This can be particularly advantageous for academics and researchers looking to share their work with a broader audience.