2d towards camera


recently I had seen this zap image. And I got two questions.

  1. how all the titles are flying towards the camera. if I rotate the image are the camera. 2D information is flying towards Camera. How is it possible

  2. and what is the script we should write to rotate 3d OBJ with slide function.


Gyroscope sensor

for the question #1, I think the answer is to create a billboard:


sorry can you explain me more

i cant find anything about billboard in zap DOC


A billboarded object is something that is always facing towards the camera.

In Zapworks there is a transform group called billboard you can create by right clicking root to open the menu and following the path jvouillon provided.

The billboard group node will always rotate to face the direction of the camera regardless of where it is in relation to anything else, and anything within that group or orientated with it will move with that rotation.

There is also a transform group called gravity billboard which does not face the camera, but always rotates so that the Z axis remains vertical with real world up and down based on the devices instruments.


Sorry for the double post, but I think I can answer your second question as well.

To rotate with sliding, you just need to change a nodes rotation based on how much someone moves their finger across the screen. So for instance create an object to use as the sliding surface. Make the surface cover the whole area of the screen you want touchable, it does not have to be visible.
Then give it a pointermove script that looks something like this.

var mObj = symbol.nodes(the node or object you want to rotate)
var lastX : number // This is needed for storing distance between frames.

parent.on(“pointermove”, (_e)=> {
let _dist = _e.screenposition[0] - lastX; // how much we’ve moved between frames.
let _rot = mObj.rotation(); // Get current rotation so we can alter one axis.
_rot[2] += _dist; // change the rotation based on distance, you can multiply a constant to alter how much it rotates.
mObj.rotation(_rot); // Set the nodes rotation to the new rotation.
lastX = e.screenposition[0] // record where the user is touching the screen this frame for next time they move.

// This is also necessary to get the initial position of the users touch.
parent.on(“pointerdown”, (_e)=> {
lastX = e.screenposition[0];

Hope this helps.


Thanks for your concern, unfortunately, I am not from the Coding side so i don’t understand well.

if it is possible can you send me? .ZPT zappar project file with basic example and code so i can understand easily


Gyroscope sensor
Dragging a 360 Video / Image to see all sides

RotationSlider.zpp (92.9 KB)

Sorry, I don’t know how to save a project as a .ZPT. But here is an example of that code in action as a .ZPP that you can drag into an empty project (or use in a not empty one) and explore.

The functional code is in “RotateByTouchScript” attached to the invisible “TouchSurface” plane object.

I did make a few mistakes in my original example though. First there is no .screenposition on a pointermove event, you use .localposition.

Second if you want an object to spin like a ballerina you need to rotate the Y axis or _rot[1] in this case. Rotating _rot[2] is the Z axis and makes it look like a steering wheel.

And there were a few other typos, but they are all fixed in the .ZPP file. Go ahead and ask if anything needs clarifying.


Thank you very very very much for your help