Rotating and Exploring 3D Objects in E-Learning #446

Rotating 3D Objects in E-Learning #446: Challenge | Recap

If you build any type of product training, giving learners the option to rotate objects can be a game-changer for their learning and comprehension.

When learners can rotate an object, whether it's a car, medical equipment, or even a model of a molecule, they're not just observing it; they're experiencing it. It's like the difference between looking at a photo of a beautiful landscape and actually standing there.

Now, whether you actually need 3D rotating objects for your e-learning courses or not, knowing how to create them is a valuable skill to have in your e-learning toolbox. And that's what this week's challenge is all about! 

Click. Drag. Turn.

Here’s a simple project I like to use in workshops to demonstrate three different ways to rotate objects in Storyline. This type of interaction is typically done with 3D models, but guess what? You can achieve the same effect using a series of images.

On the first slide, I’m keeping things simple by using basic click events – something that new users will already be familiar with. Using the same graphics, I then rebuilt the activity using sliders and dials to create a more interactive way to explore the car.

3 Ways to Rotate ObjectsView the example | Download source

3D Laptop Rotation

Here's a simple example that demonstrates a real-world use for object rotation. And here's the best part – it's all done using a series of images, a slider, and some creativity.

3D Laptop Rotation

View & download the example

3D Rotation (Advanced)

Here’s a slightly more advanced approach to rotating objects in Storyline. The example features options to automatically rotate the object and drag events that let the user control the rotation. Be sure to check out Nejc's video tutorials to learn more about his approach.

3D Rotation (Advanced)

View the example | Video Tutorial

🏆 Challenge of the Week

This week, your challenge is to share an example that shows how course designers can use 3D rotation in e-learning. You can use Storyline 360 or any other app to build your demo. 

For example, if you’re a Rise 360 user, you can use the tabs blocks, image galleries, or process blocks. For PowerPoint users, you can use the built-in 3D models combined with morph animations.

🧰 Resources

Free 3D Modeling Applications

The easiest way to get started working with 3D would be to use PowerPoint’s 3D models if you have an Office 365 subscription. Since the models are already built, you can easily insert, rotate, and export the models from within PowerPoint.

Here are a few sites that offer free and popular modeling programs:

Know of some other free 3D modeling programs? Let me know in the comments and I’ll update the list.

✨ Share Your E-Learning Work

  • Comments: Use the comments section below to link your published example and blog post.
  • Forums: Start a new thread and share a link to your published example.
  • Personal blog: If you have a blog, please consider writing about your challenges. We'll link to your posts so your great work gets even more exposure.
  • Social media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can follow your e-learning coolness.

🙌 Last Week’s Challenge:

Before you spin your creative gears on this week’s challenge, check out the ways designers use motion paths to reset objects:

21 Ways to Reset Objects Using 0px Motion Path Animations #445

Examples of the 0px Motion Path Trick RECAP #445: Challenge | Recap

👋 New to the E-Learning Challenges?

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

Learn more about the challenges in this Q&A post and why and how to participate in this helpful article.

📅 Next Week’s Challenge

  • Next week's challenge #447 (01/26): Magnifying Glass and Spotlight Masking Effects. I've always been a fan of drag-and-drop magnifying effects and after seeing this recent example from Paul, I thought it would make a fun challenge. 
  • Challenge #448 (02.02): Tabs Interactions. It's back to basics week and tabs are a great place to start.

Got an idea for a challenge? Are you interested in doing a webinar showcasing how you made one or more challenge demos? Or do you have some comments for your humble challenge host? Use this anonymous form to share your feedback:  https://bit.ly/ElearningChallengeForm.

60 Comments
Kelley Durdella
Thaddaeus Smith
Thaddaeus Smith
Thierry EMMANUEL

Hello Thaddaeus. Obviously, your layer named "Accessible Layer" is still visible but is no longer accessible through the tab interaction when you return to your "Earth Explorer" slide after exploring another slide ("Africa" for example) and I DON'T UNDERSTAND WHY. Maybe someone smarter than me can figure it out and correct it. On the other hand, I've found two possible ways of solving the problem. It's simple, but quite difficult to explain in a few words. In short: put the "Africa" content on a layer, not on a separate slide (you have to set some details so that you don't see the tab interactions on the base layer) OR don't put the buttons (left, right and pause arrows) on an "Accessible layer" but on the base layer with hidden/normal states if you've clicked on "click-only options" or ... Expand

Ron Katz

Here is my project. The bones of the human body written as a 2nd grade teacher. Demo: https://360.articulate.com/review/content/d0f57600-deb9-4560-b51d-f47846db2e51/review Project file is available for download for review. Hardest part of the project was coming up with the assets. I used 3D objects from PowerPoint and created a video. Then I selected frames from the video to save as JPG which were uploaded as States. I also created a GIF using the same video which was used several times in the project. The audio track was a TTS. The new voices sould real good. If you don't hear the audio track, download the project file and run it from there. For some reason Storyline audio is not working consistently when I upload a file to Review 360. Must be a glitch as it has ne... Expand

Jodi M. Sansone

Desert Dream by Bill Worrell Demo: https://jodisdemos.s3.amazonaws.com/446+Bill+Worrell/story.html I saw the challenge topic and I looked around my house to see if there was any inspiration for a 3D demo. I didn't have internet for 2 days so I couldn't access my usuaI graphic libraries. I used a piece of art I have in my office by artist Bill Worrell. If you have ever been to Sedona AZ or Santa Fe NM you have probably seen his shaman sculptures--they are hard to miss. Sadly he passed away in 2021. I photographed his sculpture with my phone and wish I had a turntable to rotate the piece--it would have been smoother. The 3D demo is on slide 3. I used a number variable to rotate it left and right. If you like the sculpture, check out the video in the player. He was a very beloved ... Expand

Jayashree Ravi
Andreas Fischer

This challenge was a lot of fun. I learnt a lot. The theme of my entry is our "Earth". - The intro slide shows an animated, rotating earth. It's just a 3D image from PowerPoint that is exported in a video format and triggered automatically when timeline starts. - The rotating earth contains 45 states which are 45 images with a different angle --> PowerPoint. - The UFO slider button is an image that is changing states depending on the button position on the slider. - The UFO is taking off the slider with a 'curve' animation. The 'hidden' slider is back to 'normal' state when the UFO returns. - A counter has been added to show different layers (text boxes with facts) when the slider is moved back. https://360.articulate.com/review/content/18c3d54b-4bf1-4b84-af55-6bbcf7db8b93/revie... Expand

Ralf Hartmann
LinguaGraphics Articulate-Team
Garrett Berry
Karma Tshering

Here is my little experiment on Human Heart. Tried various methods like incorporating GIF, video(MP4) and then finally landed with jpeg. Here are my find-outs for working with above formats: 1. Could have done easily with GIF but the resolution wasn't that great 2. Inserting video was easy but transition wasn't smooth for each clip and due to some reason, it flickers in between (not sure if this is the articulate issue or a bug thing) 3. Then finally, used the image frame sequence which was time consuming but was worth with the smooth animation. Downside was, I couldn't work with more than 3 parts of organ because it would have been so laggy to work on with lot of images (even though I compressed the jpeg to lowest resolution) Here is my final result. https://360.articulate.c... Expand