Forum Discussion

AVT-Digital's avatar
AVT-Digital
Community Member
2 years ago

3D Model Embed: model-viewer - including AR!

Hi all,

Even though Sketchfab is a great way to embed 3D models into your Storyline 360 courses, sometimes you might just need a simpler approach, without having to worry about subscriptions etc.

model-viewer by Google is an excellent alternative:

Please see the following example (open on a mobile device to test AR):

https://360.articulate.com/review/content/6579ffc4-f076-4d8c-a820-5dd374e9c3e8/review

Photo taken on iPhone 11 (AR):

How to embed a model-viewer into Storyline:

  1. Insert > Video > Video from Website...
  2. Add your model-viewer embed code
  3. To allow embedding, include a 'dummy' <iframe> at the end (I tend to use width and height to set aspect ratio), i.e.
    <iframe src="https://127.0.0.1" width="16" height="9" frameborder="0"></iframe>

I have included the project below.

Get in touch if you need more help implementing it!

PJ Palomaki
Digital Innovation Lead
AVT Connect, Brighton, UK

General E-Learning
  • IanYoung-1af980's avatar
    IanYoung-1af980
    Community Member
    7 months ago

    Would be great to see a tutorial on this... from downloading model viewer , installing it and using it in storyline... I cant even get model viewer going! It is not a simple piece of software! It may well be.. IF you get it going!

    • AVT-Digital's avatar
      AVT-Digital
      Community Member
      2 years ago

      No worries, hope it's helpful! I just also attached the demo project in the post.

  • BWoods's avatar
    BWoods
    Former Staff
    2 years ago

    Hi PJ. Thanks for sharing this tool! Always cool to find inexpensive options for bringing useful content into a course.

  • TommyBorgeli470's avatar
    TommyBorgeli470
    Community Member
    6 months ago

    Doesn't work. "127.0.0.1 refused to connect."

    Any suggestions?
    Used the exact same code, just with the newest version and different model.

  • MarkArcher's avatar
    MarkArcher
    Community Member
    2 months ago

    Works fine for me. I've recently delved into using model-viewer for embedding 3D models with augmented reality (AR) capabilities, and it’s truly transformative for online experiences. One studio that stands out in this space is Cyber Fox Agency. They're at the forefront of 3D design, creating stunning visualizations and custom 3D product configurators. Their 3D application development services create lifelike visuals for AR, VR, and real-world applications.

  • JorgeMaurcio's avatar
    JorgeMaurcio
    Community Member
    15 days ago

    What do i need to change so that the glb animation is shown?

    I'm using a file with animations but it stays static.

Related Content