3D photo feature

Hello, Is there any way of having multiple models at once and each one individually transformed by the user?

Many thanks.

1 Like

Hello,

We’ve put together a project to show you how to create a 3D Photo Feature experience that allows the user to transform two planes individually. Please, find the project’s ZPP file attached here: 3D Photo Feature - Multiple Models.zpp (2.1 MB)

In the Studio project, we needed to use a photo feature 3D node containing 2 attachment points (one per plane). Though, as we wanted the user to be able to interact with each plane separately, we needed both attachment points to have distinct behaviours. To do so, please, find below what we’ve done step by step within Studio:

Step 1: We’ve started with amending the Photo Feature 3D hierarchy.

The photofeature3D subsymbol comes with one onScreenObject by default (onScreenObject1). Though, as we wanted the user to be able to interact with two onScreenObjects separately, we’ve added a second onScreenObject (onScreenObject2) to the photofeature3D subsymbol’s hierarchy (see picture below).

For each onScreenObject, we’ve created an attachment point, below which we’ve added an object group (for more information about attachment points and object groups, please refer to the Step by Step 3D Photo Feature tutorial). Below the object group, we’ve added a selectHotspot object that will allow the user to transform the onScreenObject.

Step 2: We’ve created a controller and the associated states.

The controller (controlState) has 3 states:

  • noObjectSelected: If none of the onScreenObjects is selected, both onScreenObjects and associated selectHostpot should be enabled. We’ve also decided that both onScreenObjects would be half transparent if not selected.
  • object1Selected: the onScreenObject1 and associated selecHotspot1 should be enabled while the onScreenObject2 and selecHotspot2 should be disabled. Moreover, the enabled onScreenObject should be 100% opaque.
  • object2Selected: It’s the opposite.

Step 3: We’ve amended the buttonCode script in order to use and activate the states, depending on the user’s interactions with the onScreenObjects.

We’ve added a pointerdown script per selectHotspot object. Thus, when the user presses an onScreenObject, it activates the associated state: if user taps on onScreenObject1 (resp. onScreenObject1), object1Selected (respectively object2Selected) is activated.

If the user doesn’t press or hold any of the onScreenObject though noObjecSelected state is activated. To check if an onScreenObject is held by the user, we needed to modify the onScreenObject subsymbol’s script. That’s why within each symbol.nodes.hotspot.on() function, we’ve added a line: if an onScreenObject’s hotspot is held, and consequently on “pointerenter”, then it emits true, else, it emits false.

Step 4 - Finally, returning to the project, we’ve created two object groups within the photofeature3D node and dragged a plane below each object group, and that’s it!

Hope this is helpful. Though, if you have any questions, feel free to ask! :slight_smile:

Margaux

5 Likes

Hi Margaux,

Sorry I haven’t replied sooner.
This is exactly what I need, thanks so much - very helpful.

Cheers
Stephen

1 Like

Hi thank you for your tutorial, I downloaded the zapp you link, i olay with and had fun, im just wondering why the object attached inside photofeature3D became translucent?

thank you so much!

If I remember right it’s to help knowing which one you selected.
Look at step 2.

Steve