Hi Sophie,
I’ve created an example zpp file, to show how you can go about doing this.
I figured it could benefit others so I’ve posted it on here instead, if you don’t mind.
Firstly, there’s a couple of things to note:
- I’ve used a pod file, rather than an obj or fbx, but it should work with either.
- The shading effect on the model was done manually by using a photo editor on the object’s UV map. It is not a result of dynamic lighting within Studio.
Now, for the actual steps.
- Import your 3D model to your scene, and double click on the resulting symbol in the 'Symbol Definitions’ panel.
- Import the texture files you’ll be using by dragging them into the 3D symbol’s 'Media Library’ panel.
- In the hierarchy, right click the 3D model’s node and select ‘New > Script > blank’.
-
At the top of the script, create references for the texture files you want the object to switch between.
Do this by creating a new ‘Z.ImageTexture’ object, and passing in the texture file’s name as the argument. E.g. ‘var newImageTexture = Z.ImageTexture (“myTextureFile”);’
-
Below the variables, create a new function and use the parent object’s ‘.skin’ function to change the object’s texture, passing in a previously created ‘Z.ImageTexture’ as the argument.
E.g. ‘export function myTextureChangeFunction() {
parent.skin (newImageTexture)}’
Create a new function for each texture file you’d like to apply to the model.
- Remember to use the ‘export’ keyword before the function’s declaration so that we can call them from the parent symbol (more on this later).
- That’s all within the 3D model’s subsymbol, so head back to the parent symbol. Create an instance of the 3D object by dragging it into the ‘Hierarchy’ from the ‘Symbol Definitions’ panel.
- For purposes of this demo, I’ve created a simple button by dragging in a ‘Plane’ from the ‘Media Library’ and adding a ‘pointerdown’ script to it, but feel free to add the following code to your own button.
- At the top of the script, create a new variable that references the 3D object’s instance by dragging the instance’s node in the hierarchy to the script, and selecting ‘Insert local variable’.
- Finally, we can use the variable we’ve just created to access and call the function that we coded within the 3D model’s symbol. E.g. ‘myVariable.nodes.myScript.myTextureChangeFunction();’
- If we hadn’t used the ‘export’ keyword before when declaring our function, we would be able to access the script, but not call the function.
Without that keyword, the function only has ‘local’ scope, but by using ‘export’ we ensure it has ‘global’ scope, so that it can be called from its parent symbol.
There’s a helpful docs page with more info on subsymbol communication:
https://docs.zap.works/studio/subsymbols/subsymbol-communication/
I’ve attached this example project’s zpp file for anyone who’d like to have a closer look at how it works.
Change3DModelTexture.zpp (236.4 KB)
Edit: I’ve uploaded the assets used in the example, here’s the link.
https://drive.google.com/open?id=1zw7FWJIvcIA2t5vonUV-GAHXQ4BFON3I
Hope this proves helpful to some of you.
Seb
"
