Creating Buttons
Studio is being deprecated, please head over to the documentation page for Mattercraft, our most advanced 3D tool for the web, where you can find the most recent information and tutorials.
Buttons are a fundamental part of experiences built with ZapWorks Studio. They’re a key mechanism for introducing interactivity - enabling your users to navigate your zap, or influence its execution.
Buttons
Section titled “Buttons”pointerdown Event
The easiest way to create a button in ZapWorks Studio is to use the pointerdown event emitted by plane nodes.
The ‘pointerdown’ event is emitted when a pointer (typically a finger or, on Zappar Desktop, a mouse cursor) is depressed and intersects with the object’s geometry.
Attaching code to the ‘pointerdown’ event for a plane node is a great way to build a button that the user can press.
Creating a Simple Button
Section titled “Creating a Simple Button”We can turn a plane into a button by right-clicking on the plane node in the Hierarchy and selecting ‘New > Script > pointerdown’.
This will create and open a new script node below the plane, populated with a pointerdown handler function. Any code placed within this function will run when the plane is pressed.
We can choose, for example, to launch the Zappar website using the launchURL(…) function.
Example:
parent.on("pointerdown", (e) => { // Runs when pointerdown occurs on the parent node // The argument e contains useful info about this event: // https://docs.zap.works/studio/scripting/reference/object/events/pointerdown/
Z.device.launchUrl("http://www.zappar.com");});