Hi ZapWorks Community,
Our next technical demo will demonstrate one of our most popular features: 3D models and animations. This guide will provide a run-down of how to prepare your 3D assets, import them into studio, and play animations with user interaction.
In addition to this tech demo, we have plenty of documentation on using 3D models in studio which can be found here.
Adding your Models to Studio
Please note that ZapWorks Studio only supports 3D models that are formatted as GLTF, GLB, FBX, OBJ, and POD. Find out more on our supported formats here.
-
Source your Assets. We have a library of 3D assets in our library, as well as an integration with Sketchfab, which allows you to import models into studio directly from their library. If you wish to use your own 3D model, please check out this guide on exporting your 3D models for Studio. This guide focuses on Maya, 3DS Max, and Blender, but you can use similar settings in your software of choice.
-
Import your model into Studio. If you are using your own GLTF, GLB, FBX, POD, or OBJ model, then you will need to drag your 3D model files into the media library. If you are importing a 3D model from SketchFab, then you can do this by pressing the plus (+) symbol in the top right of the media library.
- Apply your textures and materials. This can be done by dragging your textures into their respective boxes in the pop-up. If you have multiple textures to apply to your model, you can select them all in your file explorer and drag them onto the âDrop All Texturesâ box.
- Once imported, your model will appear as a subymbol in the Symbol Definitions panel. Drag your 3D model subsymbol into the root node of your hierarchy. If you are using a lighting material, you will also need to add a light into your Hierarchy.
Editing your 3D model in Studio
- You can edit the properties of your model by heading into the 3D model subsymbol. You can do this by double clicking on your 3D model in the Symbol definitions panel.
- To edit the properties of your model, select itâs node in the hierarchy. This will bring up the properties for the model in the properties panel. If you scroll through this, you will find settings such as appearance, transforms, and the modelâs materials. Any changes you make to this sub symbol will be reflected in any instance of your model within the project.
Adding animations
- Create a new Controller and within that create a new Timeline.
- Select your Timeline from the Controller, and add your animation by pressing plus (+) on the 3D modelâs animation property. You will now need to change the length of the timeline to match the animation - your 3D model animation length can be found in the subsymbol. Once the length has been changed, press the skip to end button on both the timeline and animation property.
- Click and drag to select the last two keyframes in the timeline, then right click and select Make Link > With left value.
Creating interaction on your 3D model
3D models themselves donât fire events, so you cannot tap on them directly to activate an Action or a PointerDown event. Instead, you must use an invisible plane overlaying the model, to âfakeâ the interaction. The following steps show how to play the 3D model animation when the model is âtappedâ.
- To play the animation you just added, you can add some user interaction to your experience using an invisible plane. First, you must drag a plane into the hierarchy, and change the visible property to make the plane invisible.
- Right click on your plane, and select New > Script > pointerdown.
- Drag the animation timeline into the pointerdown script from the controllers tab.
- In the animation
playfunction, you can set the speed of the animation (as an integer) and if you want the animation to loop (as a boolean). In this instance, we have made the animation loop at normal speed by addingplay(1, true)
I hope this helps!
Please let us know on this thread if you have any issues using 3D models in ZapWorks Studio, weâll be more than happy to help.
Adam
