Forum Discussion
Customizable 3D Model Viewer in Storyline 360 Using Three.js
Updated (2025-03-21):
- Added simple model explosion with adjustable distance
- Added simple visibility editing of child meshes
- Added support for Draco compression in GLB models
- Fixed camera startup positioning from options (e.g., distance and scene panning)
- Other minor fixes
Try these versions (limited testing, post if you experience issues):
3D Model Player update (v4.0):
https://360.articulate.com/review/content/065d624f-e9b7-472b-9229-93bee802e4f2/review
Also see attached project file update.
3D Model Customizer update (v11.0):
https://360.articulate.com/review/content/3308d5d5-faab-410c-ad6f-1eca2a0ac75c/review
Notes:
Simple explosion shifts model components outward away from the origin proportional to their radius. Works only if models have component meshes and they have individual position values. Child meshes positioned directly through their geometry will not move as expected, if at all. Many models will not explode in any useful manner.
Visibility editing allows you to isolate and toggle the visibility of child meshes. Useful if the model has many components. Not so much if model is just one or a few meshes with complex geometry or skins. Visibility settings will carry over into the options export so player will show only visible meshes.
GLTF/GLB models can be compressed by the Draco utility to reduce model download sizes. Support for loading these compressed models added (typically an embedded GLB model).
Camera distance and scene panning position data should now export (in options) for proper display by the model player.
Edit: Oops, forgot the updated web object folder with the Draco loader. Please use this link:
This is great! Thank you for putting this together.
I'm trying to follow your steps to add different models, but I'm running into some trouble.
Here's what I tried:
1. I used the model viewer to get the settings for my new model I want to add
2. Downloaded your WO folder
3. Placed the model glb file in a folder in the WO folder
4. Created a new blank index.html file
5. Followed the steps to replace the web object in the story file/published to get the dataFolder variable string
6. Swapped the javaScript on the first button to use the settings I got earlier from the model viewer
7. Published
...but I keep getting an error stating:
actionator::exeJavaScript - DRACOLoader is not defined
Did the WO folder change when you added Draco compression? Am I missing something else?
Any help would be appreciated!You're correct, I forgot to link the updated web object. I added a link to the post. It is also here:
https://paedagogus.org/3DModelViewer/WO+Draco.zip
The web object could also be extracted from the 4.0 project file by publishing to Web and copying the contents of the WebObjects folder.
Thank you so much! It works!
