Forum Discussion
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:
- https://modelviewer.dev/
- It's open source (https://github.com/google/model-viewer)
- It's fast and powerful
- Can be embedded without JavaScript triggers ('normal' web embed)
- Works in AR, including iOS!
- Transparent embed
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:
- Insert > Video > Video from Website...
- Add your
model-viewerembed code - To allow embedding, include a 'dummy' <iframe> at the end (I tend to use
widthandheightto 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
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!
Thanks PJ have bookmarked, even scales nicely
No worries, hope it's helpful! I just also attached the demo project in the post.
Hi PJ. Thanks for sharing this tool! Always cool to find inexpensive options for bringing useful content into a course.
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.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.
What do i need to change so that the glb animation is shown?
I'm using a file with animations but it stays static.
This is incredible. I have been thinking about doing this very thing with medical equipment as a flipped learning pre-session activity / refresher / reference model. Thanks so much, because now I can do it and show people what I mean.
Is it possible to set up triggers and layers depending on where the user clicks or how they move the model?
