Explaining the UI One Menu At a Time

Create Object Menu:

Create Object UI

The “Create Object” menu allows you to add an object to you scene. On the bottom left sidebar you will see a list of categories with different 3d elements e.g minecraft characters, gltf models, geometric shapes, magic windows (portals) and holograms. You can click on any of these. Then you will go into a list of more detailed options to choose from.

Create Object UI

As you see on the screenshot above, you can add a Minecraft “Batman”, “Superman” or “Mario”. They will appear on top of your AR markers. You also have a “Back” button to come back to the previous level of menu.

The 3d object you choose will be added to your scene. And voilà you have created some AR in just a few clicks!

2. Area Menu

Area UI

The “Area” menu is located to the right of the “Create Object” menu. It handles all the area learning for the markers. The list has something very interesting called the “Marker Helpers” checkbox. This provides a visual feedback of what AR.js is seeing on the screen. For example, it can help you determine if the lighting on the markers is okay and not interfering with the tracking. It is useful to know if you have learned the proper positions.

There is also a “Reset Area” button which resets all the area to the default Hiro single marker. Finally, there is “Learn Area” which takes you to the area learning UI.

3. Options Menu

Options UI

Right next to the “Area” menu you have the “Options” menu. It contains various elements like “Toggle Fullscreen” (self-explanatory). Another element is “Reset AR” to delete all the AR content that you have previously added on your scene, and come back to the basic rotating cube example.

Most importantly, there is “Export Share URL” and sharing on social networks (Twitter, Facebook). One essential point to WebAR Playground is that it allows you, not only to create, but also to easily share AR content on the Internet!

4. Current Object Menu

Current Objects UI

Last but not least is the “Current Objects” menu. This is the list of all the objects that you have created on your scene. In this case, we have added 3 Minecraft characters (Batman, Superman and Mario). You can select them, and you will see a feedback highlighting the one that you selected on the screen. You can also delete them with the little x on the side.

Position, Rotation and Scale

Positioning the object

Once you have chosen your 3d object in “Create Object” menu, you need to add it to you scene. To position it on your scene you just click where you want it to be displayed, and it will appear — just like Minecraft Batman in the example above.

2. Scaling the object

You can scale the object by holding the left click and dragging your mouse up (to make the object bigger) and down (to make the object smaller)

3. Rotating the object

You can rotate the object by holding the left click and dragging your mouse left or right. Move your mouse depending on which direction you want the object to rotate.

And there you have it! A simple way to edit your 3d objects and create an AR scene!

You can also take a look at this detailed video explaining how get started with WebAR Playground:

What’s Next?

We’ve seen how easy it is to build your own AR content in just a few clicks. Now what? Well, WebAR Playground was made for experimentations. So go ahead, build something awesome and share it with everybody! Don’t let your doubts stop you, you can be as creative as anyone!

WebAR Playground is a fast-moving project. It’s constantly evolving! Don’t be surprise if some things change in the future. We are improving it every day. For example, we are working on building AR.js on Tango through WebAR Playground (meaning without markers!)

If you liked this post, you might want to subscribe to our newsletter and check out this augmented website project, also part of webxr.io

Until next time!