Adding advaced functionality to Elements with "Additional Components" and working with "Code Snippets"

---


<iframe src="https://player.vimeo.com/video/435211983" width="640" height="564" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>


---
-
Reference code located at web address below:
-
docs.google.com/document/d/1erVRyE6r8HTeFk7doeU8x6pMz_qyqBJYtPcSNIkp11c/edit?usp=sharing



---


    
There you go!

If you have any questions, join us on Discord: 
[Orbix360º on Discord](https://discord.com/invite/jejK5j3 "orbix360")

additional-components

 Advanced (some A-Frame coding)

This is how you can add animations and interaction with "Additional Components" and "Code Snippets"

Additional Components and Code Snippets

Let's get started by openning the editor located in the side panel.

![Tutorials organize-scenes 1](//images.ctfassets.net/jrspgrzel116/2b89OeiLsoTV4H9Kl0r1AD/80329b2cc8e1b4130905f8d45d86cb82/Tutorials_organize-scenes_1.jpg)

All the images or scenes that uploaded and created will be displayed in this panel. Let's start by giving each one of the scenes and individual name.

![scenes-order-2](//images.ctfassets.net/jrspgrzel116/700WDex5kfIQeKdvw48g8J/6b302d2b1ac1c6ce93c3133f8f4ed0c3/tutorial_images_order-2.jpg)

Once that all the scenes are properly named, you may want to put them in the order that best represents the story you want to tell. Click and drag the scene to the right position using the up and down arrows.

![scenes-order-3](//images.ctfassets.net/jrspgrzel116/5UUyXdVKl4rJ7Pc8PybR2y/3de10e6f64eadb4705cd3cf5f40a218e/tutorial_images_order-3.jpg)

Once your scenes are properly named and organized, you may want to add or delete some of your scenes. You can easily do so by clicking on the "X" at the top right or add by clciking on the add button.

![scenes-order-4](//images.ctfassets.net/jrspgrzel116/7mTWbaKsKR7z5h3EVhfKwz/a96b7e3566c84ec6ddf5374b84c1d724/tutorial_images_order-4-5.jpg)


There you go! You have succesfully organized all your scenes!

If you have any questions, join us on Discord: 
[Orbix360º on Discord](https://discord.com/invite/jejK5j3 "orbix360")

tutorial-cover Organize-scenes

Time to get your ducks in a row!

Time to give some structure to what you want to present. The "Organize Scenes" panel will allow you to edit the name, order and add hotspots as well as additional scenes to your orb.

Organize Your Scenes

Give your 360º expereinces a cinematic feel and allow your viewers to sitback while the world revolvs around them.

This can be achieved with the single click of a button.

Click on the "Editor" button in the top right pop up menu as shown below:

![Editor Select](//images.ctfassets.net/jrspgrzel116/6sZBqLFWG1ttBytdYr2HXh/1f5b8f3c02513c7615d1b362eb073d84/editor_select.jpg)

Click on the Orb Rotation item to expand the panel.

![Orb Option Select](//images.ctfassets.net/jrspgrzel116/1IJs6T9Ay5qEpb47zFdjLz/a4cf420c296252f91cd47aac703501a3/orb_rotation_option.jpg)


The expanded Auto-rotate panel allows you to select auto-rotation ON and OFF.

![Orb Rotation Panel](//images.ctfassets.net/jrspgrzel116/4D9eFgABZRuiXNR3vRcEp6/6d2f1d561b991cc218d40b3650f309e5/orb_rotation_panel.jpg)

That's it!  Your orb should now be rotating. Well DONE!

If you have any questions, just send us a note: [Click here](https://www.orbix360.com/contact)

AUTO-ROTATE

You spin me round-round baby, right round!

With a single click of a button, give your 360º experiences a cinematic feel and allow your viewers to sit back while the world revolves around them.

How to Add Autorotation

![change orb](//images.ctfassets.net/jrspgrzel116/3onRcPdGa50f9YUhZBZn14/504fa7fd81520e95a92f8226cee8e4bb/changOrbName.jpg)

Update the title of your orb by openning the editor in the editor located in the side panel.

![Tutorials Orb-Title 1](//images.ctfassets.net/jrspgrzel116/5LITfAI44mlAI7q8aVLyZn/8e07da8cda4cd946f9d6867bbe4e804e/Tutorials_Orb-Title_1.jpg)

This option will allow you to give your Orb a name representive of its unique content.

![naming-orb-2](//images.ctfassets.net/jrspgrzel116/416JMVOTfOhrKnSu9dXIb4/b906b7baf0dc5055d895fa08991e2087/tutorial_images_name-2.jpg)

Well done! Last step is to not forget to save!

![tutorial images name-3](//images.ctfassets.net/jrspgrzel116/2VjnisoNNOKpKt3u0zoL82/a7d9804bfd8fe29b7538b0686cc169ca/tutorial_images_name-3.jpg)

There you go!

If you have any questions, just send us a note: [Click here](https://www.orbix360.com/contact "click here")

tutorial-cover Orb-title

Make your orb unique!

You are unique and so should your Orb! Let's give it a name!

It's simple and easy! This option allows you to give your Orb a name that can later be searched for.

Additional Components and Code Snippets

This is how you can add animations and interaction with "Additional Components" and "Code Snippets"

Published by Orbix360º Support

on May 29, 2020

Featured Articles