How to set Model Opacity?

CesiumJS
1

Hi,

I’m trying to change the opacity of the 3D model on mouse over. Meaning, when I mouse over one model other 3D models opacity should be reduce to some x level say 0.5.

In one of the old post, it is mentioned like, we need to post-processing the gltf model. i.e., adding alpha parameter to the model.

Can I get some sample code to achieve that. If possible, change the opacity of the model on mouse over in the example.

Thank you,

Premkumar

2

I am interested in how to achieve this as well.

3

Hello,

You can use Model.getMaterial to get the ModelMaterial by name. Then, you can use ModelMaterial.setValue to change the diffuse value for the model’s material.

-Hannah

4

Hi,

Using diffuse, I could change the color of the model. The model which I’m using is designed in Blender. It is having his own texture. I wanted to change the opacity of the model on mouse over. I believe we could achieve by changing the alpha value. But the model which is imported from Blender is not having the alpha property. As mention in the article, using the alpha property we could control the opacity level.

5

Going from opaque to translucent is nothing something Cesium’s Model loader currently supports. We have a note about it in the code itself, which you can see here: https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Scene/Model.js#L2242

You might be able to work around this by modifying the renderSate for the loaded technique, but you’d have to dig around the Model object and figure out where it is stored after load. We will eventually support doing what you describe, but I don’t have an ETA.

6

Any news on 3D model opacity support?

7

You can use CustomShader.

const customShader = new CustomShader({
    translucencyMode: Cesium.CustomShaderTranslucencyMode.TRANSLUCENT,
    fragmentShaderText: `
      void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)
      {
          material.alpha = 0.3; // custom alpha
      }
      `
});