3D Photo Feature Symbol

Studio

3D Photo Feature Symbol

There's an example project in ZapWorks Studio that uses this component called "3D Photo Feature".

The 3D Photo Feature component provides a template for building photo features and works with 3D models.

A photo feature is an interactive experience where the user can position, scale and rotate an object on screen, and have it appear in the real world ready for a shareable picture or selfie.

Photo features are a great way of rewarding users for scanning and engaging with your AR content.

Creating a 3D Photo Feature Symbol

Creating a 3D Photo Feature Symbol

A 3D Photo Feature symbol can be created by clicking on the plus icon from the Symbol Definitions panel, and selecting the 'Photo feature 3D' component. Selecting 'Create' will add the subsymbol to the list of Symbol Definitions.

Using the 3D Photo Feature Symbol

Exposing the Attachment Point

Instantiating and Exposing the Attachment Point

First, drag the 3D Photo Feature symbol into your Hierarchy to create an instance of it. Then, right click on the instance and select 'New > AttachmentPoint > objectGroup'.

This will expose a special group from within the subsymbol for use in your current symbol. This exposed group is where you will place your 3D model.

Adding a 3D Model

Adding a 3D Model

Start by importing a 3D model into the project as outlined in the 3D Objects article.

Next, drag your 3D model subsymbol from the symbol definitions panel (you may need to scroll down to access it) to the exposed Attachment Point group.

The 3D model will appear within the 3D view and can be rotated, scaled and positioned to the desired starting position.

At this stage the experience can be previewed on a device.

This is the minimum work needed to create your very own 3D photo feature. Next we'll discuss some further customization.

The following changes require you to enter the 3D Photo Feature symbol by double clicking on it in the Symbol Definitions panel.

Optional - Changing Theme Color

Changing the Theme Color

Upon previewing the experience you'll notice the button backgrounds become a different color to the red seen in the 3D view of ZapWorks Studio. This is because the color of these objects are set to be the same as the themeColor which is defined in the 'device' node, the first entry in the Hierarchy.

To change the themeColor select the 'device' node in the Hierarchy and click on the color bar, select a color, and then select 'OK'. This change will not have a visible effect within the Studio but will be visible when scanning a preview or published code.

The themeColor is also used to customise a number of other assets within the symbol, such as the rotation widget and the instructions screen.

Optional - Changing Button Icons and Backgrounds

The symbol comes with 3 buttons;

  • one to switch the camera between front and back facing,
  • one to take the picture,
  • and one to show the instructions.
Changing the Button Icons

The icons and backgrounds for these buttons can be replaced with images of your own.

To change the icon of one of the buttons ('flip', 'help' and 'takePicture') simply select the node in the Hierarchy and change it's NormalIcon property to an image of your own. If your selected image is not uniformly scaled then you can use the 'iconAspectRatio' to edit the scale of the icon.

Additionally you can set a DepressedIcon for when the users presses down on the button if you had a seperate image for that.

To change the icon backgrounds select the 'circlebg' nodes under the 'bgGroup' group node and change their materials to the desired images.

Hiding the Instructions

Optional - Hiding Instructions Screen at Startup

If you do not wish for the instructions to appear the first time when the photo feature symbol is shown, you can comment out the final function from the 'buttonCode' script node at the bottom of the Hierarchy.

This will not affect the instructions subsequently appearing when the user clicks on the help icon.

Open in new window