Interactive 360 Panorama

Difficulty Level: Easy/Medium

Coding Knowledge Required: Beginner

Time to Complete: 30 minutes

In this tutorial, we show you how to easily add a 360 panorama image to your AR experience. 360 panoramas are really immersive experiences created using ZapWorks Studio, make sure to check out the zapcode above for a sneak peak into what you are about to build.

To make the scene a little more interesting, we will add some audio as well as a link to the ZapWorks website. Both these interactions require a little scripting, which will nicely demonstrate the things that can be done with some basic code in Studio.

By the end of the tutorial, you should feel inspired to explore the script library and see what further interactions are possible.

If you get stuck, please refer to our extensive Documentation or check out the Forum, a handy way to ask questions of other ZapWorks users. You can also take a look at the completed project.

Download the completed project.

This experience will work best on devices that have a built-in gyroscope sensor.

Step by Step

1. Create a new Studio Zapcode

Enter your my.zap.works account and click the ‘Make a New Zapcode’ button in the top left. Give your code a name, and choose between either a circle or lozenge style and select ‘Studio’ as your tool. Widgets and Designer codes will not work for this tutorial as they don't support 360 panoramas at this time.

2. Create a new project in ZapWorks Studio

Open ZapWorks Studio (download here) and create a ‘New Project’.

Choose to start with a ‘Blank’ template and give your project a name, e.g. “360 Panorama” and click ‘Create’.

The reason we're not using the '360 Degree Panorama' template is because we're learning how to build this project from scratch.

3. Download asset pack

Click here to download a zip file containing all the assets we'll need for this experience.

4. Import assets

Unzip the downloaded folder, select all of the files in the resulting folder and drag them into your Media Library by dropping them into the import box at the top right of the screen.

5. Add Photo Sphere

Click on the plus icon (+) of the Media Library and select the Photo Sphere, this will add a Photo Sphere to your Media Library.

The photo sphere object has been specifically designed for 360 Panoramas - the surface of the sphere points inwards so that it's visible from a camera inside the sphere, and the UV coordinates are set to match panorama photos.

6. Create Attitude Orient

In the Hierarchy, right click on the root node. Select New > Transforms and click AttitudeOrient. This will add an Attitude Orient node to your Hierarchy.

AttitudeOrient nodes act in a similar way to standard group nodes. The difference is AttitudeOrient nodes are continually rotated so that the content appears stationary in the world around the user as they rotate the phone.

7. Add Photo Sphere to Attitude Orient

Drag a new Photo Sphere from the Media Library into the attitudeOrient node in the Hierarchy on the left. Since the Photo Sphere is inside the attitudeOrient node, it will be rotated automatically as the user moves their phone.

8. Set Photo Sphere Material

In the Hierarchy, select the Photo Sphere node. In the Properties panel head to the Object section and set the Material of the Photo Sphere to “chiswick-park.jpg”.

You will now be able to rotate the image by clicking and dragging the swivel icon in the bottom left of the 3D View. This button simulates the user rotating their phone but does not make any actual changes to the content.

9. Create CameraTransform

In the Hierarchy, right click on the root node. Select New > Transforms and click CameraTransform. This will add a CameraTransform node to your Hierarchy.

We are going to use the camera transform to alter the focal length of the environment. This will allow us to give a less zoomed in appearance.

10. Change Attitude Orient relativeTo value

In the Hierarchy, select the attitudeOrient node. Head to the Properties panel, within the Transform section, change the first relativeTo value field from Z.camera to ‘cameraTransform’.

Switching the relativeTo value means the attitudeOrient node will become parented to the cameraTransform allowing us to edit the focalLength in the next step. For more information on relativeTo please see the Coordinate Systems article.

11. Adjust the CameraTransform focalLength

In the Hierarchy select the cameraTransform node. Within the Properties panel, set the CameraTransform focalLength to 1.3. This will make the environment less zoomed in.

12. Add audio

Drag the audio file from the Media Library onto the root node in the Hierarchy. This will place it below the root in the Hierarchy.

Because this is not a visual file, it doesn't matter where the audio node sits in the Hierarchy.

13. Open show script

Click on the 'show' node in the Hierarchy to open up your script editor.

14. Create audio node variable

Click and drag the Audio node (atmosphere.ogg) from the Hierarchy panel into the script editor. Place the node as follows :

const display_hidden = symbol.controllers.display.elements.hidden;

*DRAG FILE HERE*

parent.on("show", () => {

When you let go, a box will appear, select Insert Local Variable.

This will insert a new line of script into the editor giving you future access to the audio node that you just dragged in.

15. Play the audio

A function sits within two curly braces { … }. Before the closing curly brace “}” of the parent_show function, begin to type out the audio node variable name (atmosphere_ogg0).

This will trigger an autocomplete pop-up where you can select the audio variable by hitting enter.

Write .start(); at the end of this to call the start function on the node.

The start function of the audio node tells it to start playing the sound.

16. Set the audio file to loop

16.1) Add finish event handler function

Once again, drag the audio node from the Hierarchy into the script editor . Place the node after the closing curly brace “}” of the parent_show function. Select Add an event handler > Finish.

This will generate a function that runs whenever the audio file has finished playing.

16.2) Reset the audio file

Within the function you just created, start to type “atmosphere_ogg0”. After a few characters, you should have the option to autocomplete.

Write .restart(); at the end of this to call the restart function on the node. This will give the effect of looped audio to the end user.

17. Add button to AttitudeOrient

Return to your scene by clicking on the root node within the Hierarchy.

In the Hierarchy, place the Button (button.png) below the Photo Sphere but still within the Attitude Orient group node.

You may find that you cannot see the button at this stage. This is because the position of the button is the same as the camera.

The reason we are positioning our button here is because we want it to appear in front of our 360 panorama image but still sit within the attitudeOrient node.

18. Position the button

In the Hierarchy, select the button node. Head to the Properties panel, within the Transform section, set the button to the following:

Position (-3.3, -0.2, -12)
Scale (2, 2, 2)
Rotation (0, 15, 0)

The button should now be visible on your screen, although you may need to rotate the scene using the swivel icon to find it.

19. Make the button interactive

Right click on the button node within the Hierarchy. Click > New > Script > pointerdown. This will create a new script node with a pre-populated pointerdown event handler function.

Code placed within this function will execute when the user taps on the button on their screen.

20. Link to the ZapWorks website

Open the pointerdown script node that you just created. Within the function add the code below, which will turn your button into a link to the ZapWorks website. Make sure you have placed the code within the curly braces “{}”

Z.device.launchUrl(“https://zap.works");

21. Previewing your experience

At this stage the experience can be previewed using the Zappar app on a phone or tablet. Download the Zappar app on Android or iOS if you don't already have it.

Click the ‘Preview’ button in the top left of ZapWorks Studio, and scan the code it gives you. You may need to sign in to ZapWorks first. Once loaded you can move your phone around to explore the 360 degrees world.

22. Publishing your experience to your ZapCode

The preview code we've just scanned is temporary and for testing purposes only. Once you're happy with your content hit ‘Publish’ in the top left corner to publish it to your previously created zapcode so that others can enjoy your experience.

Choose the ZapCode that you created in Step 1.

The code must be a Studio Code in order to be published to.

Congratulations!

That’s it. You have completed all the steps in this tutorial and created your own interactive 360 panorama. You are well on your way to learning ZapWorks Studio. Nice!

Suggested Next Steps

Add your own panorama picture as the material for the Photo Sphere.
Link to a website of your own or use the button for other functionality.
Place your zapcode on a tracking image.

Interactive 360 Panorama

Step by Step

Suggested Next Steps

Further Reading