Changing Object Opacity (dynamically)

Questions
, ,
1

Sorry I cannot post all my code here as its too long but essentially I have a MeshBasicMaterial added to the scene, with transparent = true.

If I try to change the Mesh’s other values such as depthTest = false instead of true, or change whether it is double sided or not, I can dynamically do this with my simple button. However, in that same button, if I try to change the opacity of the mesh dynamically, it does not work.

I have tried to change the opacity in multiple ways such as:

videoMesh.material.opacity = 0.5;
TweenMax.to(videoMesh.material.opacity, 2, { opacity: 0.5 });
TweenLite.to(videoMesh.material.opacity, 2, { opacity: 0.5 });

However, none of these dynamically change the opacity when the button is pressed. Any tips on why this isn’t working and is opacity a special case?

2

Do you mind modifying the following live example in order to demonstrate the issue: https://jsfiddle.net/c4ju25kv/

It seems changing the opacity value with a simple setTimeout() works as intended.

1 Like
4

Hey Mugen,

Thanks to playing with your solution I have seen that I was trying to change the videoMesh.material instead of videoMaterial which was the material used to build the actual mesh.

Changing what I was targetting to the below code worked:

TweenMax.to(videoMaterial, 2, { opacity: 0 });

Also it seems when using Tween you don’t need to put .opacity as well as state {opacity: 0.5} as they it breaks the code.

1 Like