Three.js and storyline
Mar 07, 2023
I am trying to get a 3d model to move on the z axis. I know Articulate is limited when it comes to what it can do with 3d rotation. I have looked into the work arounds with using a slider which works for one rotation but I would like to rotate more then once. Also I would like the rotation to be on drag and not have to be in specific area on the screen. An I am not able to host the model or interface else where and make it a weboject pointing to the web. Basically I am trying to replicate 360 product rotation you see on the web.
I have tried using GSAP but not getting it to really do what I want it to do. I have seen a lot about Three.js. Wondering if anyone has had experience in three.js and or knows what files or script libraries need to be loaded to run it possible on articulate
3 Replies
Hi Michael,
you got an answer to your question? Maybe the following is helpful for you.
I am playing and testing a little bit with 3D and Javascript (Three.js and glb files) and found a nice way to work without a webserver:
1. Include a web object on a slide
2. Choose the directory where your files are located on your computer
3. If there is only one html file in this directory, SL will use this. If there is more than one, the html file has to be named index.html (or .htm)
4. When publishing your SL project, all your files from this directory will be transferred into ../WebObjects/[unique_dir]/
5. Every single web object will be transferred to an own directory.
6. After publishing to Review 360 the full content is stored there. It should work withon a LMS as well.
In my tests I created a glb file (the 3D object) with tinkercad (tinkercad.com) and called it via Three.js in a html file. That worked fine as integrated web object on my slide in the SL object. I can turn my 3D object with the mouse in all three axes, mouse & ctrl will move it over the screen and the mouse wheel will change the size of it.
Hope that helps.
Have fun.
Ralf
Hello Ralf,
this is exactly the function I would like to use. However, I am not able to display my 3D object in Storyline. Could you show the necessary steps in more detail? Or would you mind sharing your files with me?
Many thanks and best regards Sascha
Hello Sascha,
the 3D object is visible after publishing. Within storyline it can not be displayed (same as JavaScript, YouTube embed, ...). Can you place your 3D object her as attachment? It will be the fastest way, that I implement it in a story file and place the story file her as well. The steps are described above and I will put some hints into the story file.
Best regards.
Ralf