Forum Discussion
Customizable 3D Model Viewer in Storyline 360 Using Three.js
This is really cool and thanks for sharing, this opens up a whole other world of possibilities. Question, everything I do has to be 508 compliant, I downloaded the examples, and focus doesn't seem to ever leave buttons, I can only control the 3d model via mouse click. Am I doing something wrong or is that the way it is coded?
Sorry, I didn't really focus on accessibility when I worked on this. Nonetheless, basic keyboard functionality is addable as follows.
https://360.articulate.com/review/content/9a64e7ec-83c9-49a0-addc-ef055c6781ac/review
- Use the attached updated project file
- OR, Modify the previously published project file yourself
- Locate the JavaScript trigger under 'triggerModelLoad'
- Open the script
- Add the following at line 872
controls.listenToKeyEvents(window) //listens for keypresses anywhere in the browser window- Save the updated script
- Publish the project to test
- OR, (just for immediate testing)
- Open the published previously posted project in a browser window
- F-12 to open developer panel
- Select the Console tab
- Select story.html (instead of top) from the context dropdown in the menu bar
- In the console window, type the following
vv.controls.listenToKeyEvents(window)- If you don't get an error, try moving the object with the keyboard
This activates the default keyboard keys for the Orbit Controls in Three.js. The keys are:
- Arrows = Panning left, right, up down
- Shift or CTRL Arrows = Rotate around vertical or horizontal axis
The movement may seem the opposite of what you expect. There may be other settings you can apply, I don't know off-hand. You would need to look it up under Orbit Controls on the Three.js site.
Make sure to test functionality, as I have not.