3D Model Embed: model-viewer - including AR!
Jun 09, 2023
By
AVT Connect
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
6 Replies
Thanks PJ have bookmarked, even scales nicely
This post was removed by the author
This post was removed by the author
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.
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!
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.