360° bubble tutorial

WebAR offers countless creative possibilities.

Today we will walk you through step by step the creation of a 360° bubble using our editor.

You can find here our video which completes this article.

1) Customize your 3D sphere with a 360° image of your choice

• Possibility to import this 3D sphere on the website threejs.org
  
  
• Change the image by the one of your choice
  material tab > click on the “Map” image > import the desired image
  
  

  You can find 360° images on many image banks, such as EnvatoElements or ShutterStock.

  You can also make your 360° pictures yourself with your cell phone via the panorama option that is proposed when you open your camera.
  
  

  Example of a 360° photo
  
  
  
• Once customized, export the 3D object
  file > export GLB

2) Create a project, upload your marker and go to 'Diffusion Settings'

You now need to customize the url of your WebAR project in 'WebAR Broadcast Settings. You can customize it with your brand name for example.

3) In the 'WebAR Design' section

In the box 'WebAR Design' and then in 'Custom Web App', select the 'Gyroscope' strategy

Make sure 'Show marker if not tracking' right below is not selected. 

4) Go to ARGO editor

You will go and get the PID of the experiment, to do so go to the editor.

There is a settings icon at the top left of the editor.

Click on it and then go at the bottom to 'Technical Information'

Then copy the Page ID 

Then go back to the manager in the 'WebAR Design' section, at the bottom in the 'Marker recognition' box and paste it.

Don't forget to save. 

5) Go back to the editor, import your 3D object into and begin your 360° bubble project

• Place the 3D object so that it covers the entire marker as below : 

Place the different assets in the desired places in your 360° bubble

To position your video, for example, you will need to check the “vertical” box, resize it so that it is smaller than the size of the bubble and place it inside the bubble.
You will now have to activate the 3D mode at the top left of the editor, and zoom in to the maximum so as to enter the bubble.
At this point, you can easily adjust the position of your video so that it is in the desired location.

If you missed it here is our tutorial on the making of a 360° bubble :