Forum Discussion
Interaction with 360 degree images
Although I have been aware of 360 degree images for some time, I've only just started playing around with them and I'm looking for clever ways to make them more interactive. I get hotspots - and they're great. But I want to dynamically change components in the scene. For example, this demonstration I was working on for National "Talk like a Pirate day" (which if you missed it was yesterday!)... Here's the opening scene in the deserted wardroom of the abandoned pirate ship:
Then clicking on a hotspot on the cover over the cage triggers a change of the image to this:
I mean it works, and the parrot squawks and says "pieces of eight" OK - but it is done by overlaying the entire 360 image and that means it jumps to a new initial view setting.
Is there a way to syncronise the layer overlay view with the current background layer view?? Or is there a better way to do this altogether? Any examples or ideas would be gratefully received - Arrgh!!
After a couple simple tests, Option #2 or 3 makes it fairly simple to do what you want. The 360 images are projected onto the interior of a sphere, where the viewer is at the center. Accessing the 3d scene (by hooking into the SL scene or by creating your own) lets you access and modify the texture (image) applied to the sphere. You can include additional 360 degree images (in whatever way is appropriate for you), create new/clone materials, and direct the texture source to the appropriate image. Then you can reassign the material with that texture to the sphere, switching the image. This way your scene changes instantly and does not have to reset or reposition.
Option #2 is a hassle but maintains all of the functionality SL offers. It would be nice if the 3d object was directly accessible, but I have yet to find an active reference to it.
For a suggestion to experiment, see this post:
Prevent vertical movement in 360º images | Articulate - Community
FYI-
In the example post, you would be most interested in:window.viewer360.scene.children[0].material
and
window.viewer360.scene.children[0].material.map.source.data.currentSrc
Use the browser developer panel (F12).
3 Replies
If you need the functionality SL includes within the 360 images, then what you are doing is probably about the limit. I haven't been able to find any inbuilt reference to the 360 image viewer as of yet. You can set the initial starting point for each 360 image. Maybe you could deliberately cut to focus on the bird briefly when it is uncovered and then back to the whole scene to better control the transitions. Extra 360 images, but otherwise you can't really control positions.
If you feel adventurous, you can "hack" into the published project (simple edit of one file) and gain access the the image viewer (keeping SL functionality), which opens up a lot of control for positioning and possibly switching the image (it been awhile, can't recall). With some work, you could also add extra functionality native to Three.js that could help your task. I posted something on here about that a while back, but I'd have to search for it. You would just publish to web and then make the edit before using/testing your published project.
You can also just build your own 360 image viewer from an example on the Three.js website. That way you have full control of the viewer and its function without having to hack the SL files. You won't have Storyline's inbuilt functionality however, like hotspots and easy design time editing, but you could build in whatever you needed. I have a really old simple unpolished example someplace, I think.
After a couple simple tests, Option #2 or 3 makes it fairly simple to do what you want. The 360 images are projected onto the interior of a sphere, where the viewer is at the center. Accessing the 3d scene (by hooking into the SL scene or by creating your own) lets you access and modify the texture (image) applied to the sphere. You can include additional 360 degree images (in whatever way is appropriate for you), create new/clone materials, and direct the texture source to the appropriate image. Then you can reassign the material with that texture to the sphere, switching the image. This way your scene changes instantly and does not have to reset or reposition.
Option #2 is a hassle but maintains all of the functionality SL offers. It would be nice if the 3d object was directly accessible, but I have yet to find an active reference to it.
For a suggestion to experiment, see this post:
Prevent vertical movement in 360º images | Articulate - Community
FYI-
In the example post, you would be most interested in:window.viewer360.scene.children[0].material
and
window.viewer360.scene.children[0].material.map.source.data.currentSrc
Use the browser developer panel (F12).
Many thanks Nathan. I had experimented with three.js some time ago and had meant to pick up on full 3D navigation and develop some examples - thanks to you, I now understand how 360 images are represented - so will definitely experiment some more.👏