Adding Interactive Elements to Photospheres

General Discussion
#1

I’ve created a VR tour in Zapworks Studio and want to add interactive elements to some of the photospheres, namely 2-dimensional images of some of the points of interest within the 3-dimensional scenes with voice-over descriptions to accompany them. Ideally, I would prefer to have buttons in the locations where the images will be, and have the images pop-up on the screen when the raycaster hovers over the button for an extended amount of time, similarly to how to use the raycaster to transition between photospheres when viewing a tour in a VR headset.

Thus, can anyone give any suggestions for how to get started with this (i.e. how to create custom buttons from scratch, how to add 2D photos to a 3D photosphere, how to add audio files to a photosphere, how to get the image and audio synced with one another, and how to get them to remain open for as long as the raycaster is hovered over the corresponding button)?

Additionally, how can I move a button around within a photosphere without having the button disappear after dragging it past a certain point?

I know these are all probably really basic commands, but I’m really new to using Zapworks Studio, so if anyone has any suggestions to offer I would really appreciate it.

1 Like
#2

Any suggestions? Anybody?

#3

Hi @mbusnello,

Thanks for the questions, I’ll try to answer all in as much detail as possible! :slight_smile:

How to create custom buttons from scratch -

Mostly all buttons you see in a ZapWorks Studio project are just planes re-skinned with a new material image. You can do this by simply dragging in a plane from the Media Library into the Hierarchy and changing its material property to any PNG/JPEG image. Buttons can then become interactive by using Actions or Pointer events.

How to add 2D photos to a 3D photosphere -

You can follow a great tutorial on setting up photospheres here - Interactive 360 Panorama.

How to add audio files to a photosphere -

You can drag audio clips that adhere to our supported formats directly into a Studio project. Using a slight bit of scripting you can then reference this audio clip and start/stop/restart it at anytime using Z.Audio.

how to get the image and audio synced with one another -

Would need to know a little more information on what is trying to be achieved for this question. You can start an audio clip as soon as an image is touched by utilizing what was explained previously in the button question.

How to get them to remain open for as long as the raycaster is hovered over the corresponding button -

We have another great tutorial which goes through setting up a raycaster and creating a trigger event when the raycaster enters a button. The tutorial can be found here - Transitioning Photospheres and chapter 17 is where raycasters are explained.

how can I move a button around within a photosphere without having the button disappear after dragging it past a certain point -

Dragging any object into the attitude orient node, within the Hierarchy will allow the object to be manipulated in the same way as the photosphere.

Hope this helps!

George

#4

Hi George,

This isn’t as helpful as I was hoping it would be. I’ve checked out most, if not all, of the tutorials you mentioned in your response prior to posting my question(s) to the forum, and wasn’t really able to find the answers I was hoping to find there, hence my question(s).

In the Interactive 360 Panorama the button triggers a link to the ZapWorks website. However, I’m not trying to have my button redirect to a website; what I am trying to do is have the button trigger an image file to appear within the photosphere. Would I go about doing it the same way as shown in the tutorial, or would I be able to import the image files into the Media Library and add them to the hierarchy?

Also, I’m not having any difficulty manipulating the buttons, my problem is that I can only manipulate them within a small area within the entire photosphere and when I attempt to drag the buttons past a certain point they become invisible. I’m trying to move the button that I have set to transition from one photosphere to the next from one side of the photosphere to its opposite side. I’m assuming that because of the way that the photospheres are aligned within the larger sphere group (0, 0, 0; 2, 0, 0; 4, 0, 0; etc.) the buttons are disappearing from the view of the current photosphere, and are being moved to either the previous or following photosphere? I’m probably totally wrong with this, but it looks like all of my transition buttons are within the attitude orient node.

So if you could maybe explain these two points in a little bit greater detail, it would be really helpful.

#5

Hi @mbusnello,

Instead of having a website open when the pointer down event is called, you can activate a state. Within this state you can change the properties of one or multiple objects in the scene.

First you would set up a controller with 2 states → Image not shown (default) and image shown. With an image added to the Hierarchy, position it and then set it’s visibility property to false (un-check).

Next, select on the image in the Hierarchy and add it’s visibility property to the image shown state (click on the + icon next to the property) and set it to true (check).

When the button is touched, a pointer down event is run. Within the pointer down event activate the show image state (drag it directly from the controllers panel and select activate).

You will end up with something like this -

Parent.on(“pointerdown”, (e) => {

symbol.controllers.CONTROLLERNAME.elements.Image_Shown.activate();

});

Previewing the experience will now show an image when the button is pressed.

You correct in thinking that the buttons are disappearing outside of the photosphere, so become ‘invisible’. I find this image explains it quite well -

photospheres_ar_vr-note_step8_5

Photospheres have a radius of 1,1,1. Moving anything outside of this radius will not be inside the radius and will therefor disappear.

Hope this helps.

George

#6

George,

This is great! Just have one more question about transitioning between the button and the image. After activating the pointer down event to have the image become visible when clicking on the button, how would I go about having the button become visible when clicking on the image? Would it maybe be more effective to have the image appear in a timeline rather than a state, so that when coupled with an audio file the image would only be visible for the length of time it would take for the audio file to play?

#7

George,

Also, how would I go about using a raycaster to transition from a button to an image so that this can be done by focusing the crosshair over the button in a VR headset? I’ve tried to follow the same logic as for transitioning between photospheres while in a VR headset, however, the only thing that I can seem to accomplish here is to make the crosshair turn green.

#8

Hi @mbusnello,

You could add the image visibility property to a timeline, but it’s neither more or less effective. Timelines are usually used when you want more customization on how the transition acts. More information on this can be found here - Timelines, Interpolation and Transitions

If you wanted to have an image only visible for while an audio clip is playing, you can use an ‘on finish event’ linked to the audio. Something like this -

MyAudioReference.on(“finish”, () =>{
// Image not visible state activate
});

To answer your question on raycasters - this technique uses intersection events to work out when the raycaster is intersecting with the button which then in turn, activates a state.

If you are having a project-specific problem, please feel free to export the ZPP and send it to support@zappar.com where we will look into it and get back to you with a solution.

Hope this helps.
George