3D Photo Feature
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.
There's also a 2D version of the photofeature subsymbol, which you can add to your project from the Symbol Definitions panel.
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
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
Start by importing a 3D model into the project as outlined in the 3D Models 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
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
themeColoris 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.
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.
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.