Embedding 3D Models with Sketchfab in Hugo Blox

One of the most powerful features of the Hugo Blox template is its flexibility, allowing users to extend its functionality to meet specific needs. A feature I developed and frequently use is the ability to embed a Sketchfab 3D Model Viewer directly into a Hugo Blox page. This capability is particularly useful for academics, especially those in fields like geology, archaeology, and engineering, where 3D models can significantly enhance the presentation of research and educational content. By developing and implementing this custom Sketchfab embedding feature, you can leverage the full potential of 3D models in your Hugo Blox website. This functionality makes it easier than ever to present complex visual data in a way that is both accessible and engaging, enhancing the overall impact of your content. Whether you’re teaching, conducting research, or simply sharing your work with the world, embedding 3D models with Sketchfab adds significant value to your digital presence.

How to Embed Sketchfab 3D Models

To enable this functionality in Hugo Blox, you’ll need to implement a custom shortcode that allows you to embed Sketchfab models with just a few parameters. This section will guide you through setting up and using this feature.

1. Update the Shortcode File: Create or update the sketchfab.html file in your layouts/shortcodes/ directory with the following code:

   <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 designed to be simple yet flexible, requiring only the essential parameters needed to embed the model. The id parameter specifies the Sketchfab model, while the width and height parameters allow you to customize the size of the embed.

2. Use the Shortcode in Markdown: Once the shortcode is in place, embedding a Sketchfab model is straightforward. You can include it in any page by using the following syntax:

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

   Explanation:

   • Required Parameters:
     • 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: Here’s an example of how the viewer would look in a Hugo Blox page:

   This shortcode embeds a Sketchfab model with the default width, height, and theme settings, allowing visitors to interact with the 3D model directly on your site.

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.