I can not change MeshStandardMaterial.opacity

Questions
1

Hi,

In my three.js project I’m trying to control objects material from my own control menu.
So there I can change some of material properties like color or visibility or side with no problem,

But when it comes to opacity I had no luck so far.
in my control menu function I tried to:

    material.needsUpdate = true; 
    material.depthWrite = true; 
    material.transparent = true; 
    material.alphaTest = parseFloat(event.target.value); 
    material.opacity = parseFloat(event.target.value);

but as long as I change the opacity value there is no change in my view-port and I see the object opaque

Is there any suggestion to find my problem?

2

renderer.transparent=true;
maybe also
renderer.alpha=true;

3

Hi @Chaser_Code

Thanks for your suggestion.
I tried it
But unfortunately there was no change in my result.

4

What values are printed if you add this command:

console.log( parseFloat(event.target.value) );
5

Hi @PavelBoytchev

Thanks to your suggestion,
I had been tested that before.
I did it again as you mentioned.

I receive a valid float number as I change my number range slider from 0 to 1

and also I checked the applied value to the material.opacity property and it also shows same value

6

Would it be possible to make an online editable example, so that someone could inspect the rest of the code, as well as experiment with some changes?

7

@PavelBoytchev

I like to do that but my code is a complex vue.js project with several vue components
I do not think if it is easy to share it by online code editor

I can change most other three.js properties with no problem. At the moment the only problem I have is opacity.
may be there is any problem with “MeshStandardMaterial”?

8

You can easily test it by using another material, like MeshPhongMaterial or even MeshBasicMaterial.

9

@PavelBoytchev

I changed material to MeshPhongMaterial and it worked

Any suggestion about “MeshStandardMaterial”? Is there any limit that this type of material can not be transparent?

10

No limit afaik. Here’s the example from the docs to play around with:
https://threejs.org/docs/scenes/material-browser.html#MeshStandardMaterial

1 Like