Interaction with the 3D model

Hi again,
I would like to know if it is posible to activate a state and a timeline when the user touches a 3D object added by me. So far, I only have been able to do it with buttons, but I really want to get an interactivity without having to create png buttons next to my model.
Thank you

1 Like

Hi there!

Currently, ZapWorks does not support actions on 3D models. A workaround for this is to create an invisible plane node over the 3D object that contains the action you wish to take place. Since the plane is invisible, it will look like you’re interacting with the 3D model :slight_smile:

This same trick can be used on 2D assets to create a larger area for interacting with small objects. To illlustrate what I mean, the light blue square in the image below is the entire “active” area for a user to interact with, even though they are only directed to hit the blue baseball. This allows for some margin of error if the user happens to not tap exactly on the ball. Before publishing, I simply change the plane’s “Visible” property to false (or set the color to 0)


You can also ensure that the plane stays attached to your object/3D model by setting the plane’s “RelativeTo” property to be the original object (in my case, it’s set to the baseball).

Hope that helps!

(For more information, you can refer to the documentation on 3D models here)

1 Like

Side note to this is if your model rotates it can rotate the plane. This sometime makes it hard to click on it. I have had to set the plane as a billboard to keep it facing the user. or add a 2nd plane 90 degrees the fist one.


1 Like

Thank you, I finally got it with your advice. However, now I run into another problem. I made a timeline in which an image (the one that is behind the blue plane) appears from Color=0 to Color=1, so far so good. The problem comes when in another animation timeline I want to hide that image. As you can see, the parameters are locked and the image remains visible all the time. Is there any solution?

Thank you again

Node properties are only handled by one controller per experience. I’m guessing your two animations are handled by two separate controllers, so a workaround would be to create a new timeline for the image you want to hide in the same controller and just have to button play both timelines upon tap.
I’m actually doing something quite similar, so your setup might look something like this:

You’ll notice that my button calls for two timelines to get played. One that hides the first asset, and then another that shows the second. It may feel a bit redundant to have a lot of timelines, and it honestly may not be the most best perfect way to handle it, but it’s a relatively simple way that I’ve found works.

Hope that helps!

Sorry Adding a 2nd side note.

Seeing you have a lot of items in your time line. I sometime cheat but just placing the main item(your png) in a group by its self. Then you can hide and show that group. The only problem is if you have the group hidden and the png you have to unhide both for the png to be seen.



It works, thanks!!!


Thanks for this guide.

1 Like