Adding a 3D Model Viewer to Your Ghost Website

Riccardo Orion Feingold -

Creating a visually engaging website is a crucial part of keeping visitors' attention. While Ghost is a powerful blogging platform, known for its focus on simplicity and great user experience, you might want to step up the game by adding more interactive features. If you're running a Ghost-based website and want to incorporate a 3D model viewer, then you're in the right place.

Why Add a 3D Model Viewer?

Here are some reasons you might consider adding a 3D model viewer to your Ghost website:

  • Interactive Content: 3D models allow users to interact, zoom, and rotate objects. This is great for product showcases, architectural models, or any interactive tutorials.
  • Engagement: Highly interactive content can significantly boost user engagement on your website.
  • Professionalism: Showcasing your product or work in 3D format adds a touch of professionalism.

Pre-Requisites

  • Basic understanding of HTML, CSS, and JavaScript.
  • A functioning website.
  • 3D model files (typically in .gltf, .obj, .stl formats).

Using Model Viewer

What is Model Viewer?

Model Viewer is a customizable web component that allows you to easily add a 3D model viewer to your website. It's simple to use and doesn't require extensive programming knowledge.

Steps to Add Model Viewer

1. Install Model Viewer

Include the Model Viewer script in your HTML file. For that, you need to go to settings/code injection and then paste the following into the header tag.

<script type="module" src="https://unpkg.com/@google/model-viewer"></script>

2. Embed the 3D Model

Add the model-viewer tag and specify your 3D model file. 

<model-viewer src="path/to/your/model.glb" alt="Description of model"></model-viewer>

3. Style with CSS

model-viewer { 
    width: 100%;
    height: 500px;
}

Using Spline Viewer

What is Spline?

Spline is an elegant 3D design tool that also provides an easy-to-integrate viewer for your website.

Steps to Add Spline Viewer

1. Design or Import Model in Spline

You can design your model using Spline's tool or import a pre-existing 3D model.

2. Get the Embed Code

Once your model is ready, Spline provides an HTML snippet for embedding, which looks like this:

<!-- Put this into the header tag -->
<script type="module" src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script>

<!-- use this in the body part -->
<spline-viewer url="https://prod.spline.design/UWoeqiir20o49Dah/scene.splinecode"></spline-viewer>

Be aware though, that yours might have a different URL.

To insert HTML into your post use the HTML card.

3. Insert into HTML

Place the code snippet where you want the 3D model to appear on your site.

4. Style with CSS

spline-viewer { 
    width: 100%;
    height: 400px;
}

Conclusion

Both Model Viewer and Spline Viewer offer excellent solutions for adding 3D models to your website. Your choice between the two will depend on your specific needs, such as the level of customization and interactivity you require.

With a few lines of code, you can elevate your website's visual appeal and user engagement by adding interactive 3D models. Whether you choose Model Viewer for its simplicity or Spline Viewer for its extensive features, you're making a significant step towards creating a more immersive web experience. Also, these are not the only ways to add 3D models to your website. With Babylon.js or Three.js you can do the same and even more since it gives you more customization possibilities. But this is something for another post. Happy designing!