Interactive 3D Model Embed

I coded this interactive 3D model embed to help my fellow instructional designers add some extra pop to their e-learning projects. Since Articulate Storyline doesn’t support 3D models natively, this workaround lets us drop a fully interactive 3D object right into our course as a web object. It’s simple to use. Just upload your model and code, and your learners can zoom, spin, and explore the model directly in the slide. No complicated setups or extra tools. Just copy, embed, and watch your content come to life!

Progress Tracker Demo

DESCRIPTION

Adding this interactive 3D model embed to your e-learning project opens up possibilities that go way beyond what Articulate Storyline can do on its own. Since Storyline doesn’t support 3D models natively, this gives learners a hands-on experience they wouldn’t get otherwise. This Embed essentially acts as a 3D model player.

The embed allows learners to explore a 3D object whether it’s a tool, piece of equipment, or product from every angle. They can rotate, zoom in and out, and interact with the 3D model directly. It makes learning more engaging, supports different learning styles, and is easy to embed right into your slide without extra apps or complicated setups.

SEE IT WORKING IN A COURSE

Want to see the interactive 3D Model Embed in action? Check out this LIVE DEMO I created in an Articulate Storyline course. It gives you a quick feel for how it works and how sleek it looks in a real project. Go ahead, take it for a spin!

HOW TO USE

  1. Download the Zip File: Click the download button below to get the 3D Model Embed zip file. This file contains all necessary code and assets.
  2. Unzip the File:
    • On Windows: Right-click the downloaded .zip file and select "Extract All...".
    • On macOS: Double-click the .zip file to automatically unzip it.
    After unzipping, you'll get a folder named 3D-Model-Embed. This folder contains an HTML file and a 3D model named Object1.glb.
  3. Open Your E-Learning Authoring Tool: Open your project in tools like Articulate Storyline or Adobe Captivate.
  4. Insert a Web Object:
    • In Articulate Storyline:
      1. Go to the Insert tab and select Web Object.
      2. In the Web Object dialog, click Browse.
      3. Select the unzipped 3D Model Embed folder.
      4. Click OK to insert the web object.
    • In Adobe Captivate:
      1. Go to the Media menu and select Web Object.
      2. Enter or browse to the unzipped 3D Model Embed folder.
      3. Click OK to insert the web object.
    This will insert an interactive 3D model that learners can explore.
  5. Position the 3D Model Embed: Move and resize the web object on your slide to fit your design.
  6. Preview and Test:
    • Preview your course to ensure the 3D model works as expected.
    • Learners can rotate, zoom, and explore the model interactively.

To replace the default 3D model with your own, follow these steps:

  1. Prepare Your 3D Model File:
    • Ensure your 3D model is in .glb or .gltf format.
    • Name your file Object1.glb.
  2. Replace the Model File:
    • Locate the existing Object1.glb file in the unzipped folder.
    • Replace it with your new model file (ensure the name remains Object1.glb).
  3. Edit the HTML Code:

    Open the HTML file in a text editor and update the src attribute:

            <model-viewer
          src="new-model.glb"
          alt="Description of Your Model"
          auto-rotate
          camera-controls
          ar
          ar-modes="webxr scene-viewer quick-look">
        </model-viewer>

    Tip: Update the alt attribute to improve accessibility.

DOWNLOAD THE 3D MODEL EMBED

Click the button below to download the 3D Model source code and start using it in your E-learning courses!

CONSIDER SUPPORTING MY WORK

If you’ve found the Interactive 3D model embed helpful, consider supporting my work! Your support helps me keep creating tools and resources for the instructional design community. A shout-out, a coffee, or a small donation, every bit helps me continue developing tools that make our e-learning projects better.

I truly appreciate any kind of support. It keeps me motivated to build and share even more useful resources.