Dynamically change opacity of material

[traa]

How can i dynamically (for example, clicking on button) change opacity for some models/materials? Setting material.opacity not working.

[alteredq]

Did you set material.transparent = true; (or transparent: true in constructor)?

[traa]

Yes, i set tried to set this in constructor, set this dynamically, - one result - nothing.

[alteredq]

Can you put your example somewhere? Opacity should be dynamically modifiable, so there is probably some mistake elsewhere, we would need to see the whole context.

[traa]

Sorry, i can't, code is too large.

But i can describe process.

On initialization we creating object: this.object = new THREE.Object3D(); after this we adding models to this object:

var shader = THREE.ShaderUtils.lib[ "normal" ];
    var ambient = 0x444444, diffuse = 0x888888, specular = 0x080810, shininess = 2;
    var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
            uniforms[ "tNormal" ].texture =  normalTexture;
            uniforms[ "uNormalScale" ].value = - 0.75;
            uniforms[ "tDiffuse" ].texture = diffuseTexture;        
            uniforms[ "tSpecular" ].texture = specularTexture;
            uniforms[ "enableAO" ].value = false;
            uniforms[ "enableDiffuse" ].value = true;
            uniforms[ "enableSpecular" ].value = true;
            uniforms[ "uDiffuseColor" ].value.setHex( diffuse );
            uniforms[ "uSpecularColor" ].value.setHex( specular );
            uniforms[ "uAmbientColor" ].value.setHex( ambient );
            uniforms[ "uShininess" ].value = shininess;
var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true, transparent: true };

 this.material = new THREE.MeshShaderMaterial( parameters );
        this.options.geometry.computeTangents();
    //extending object with Mesh
    THREE.Mesh.call(this, this.options.geometry, this.material);

After this we simply add this object to main object created from THREE.Object3D:

this.graphicContext.object.addChild(this);

And, for example, we clicking on some button to change opacity of all models.

for (var i = 0; i < this.graphicContext.object.children.length; i++) {
            this.graphicContext.object.children[i].material.opacity = 0.1;
        }

[alteredq]

Aha, that's normal map shader, not standard material. There is uOpacity uniform for controlling transparency:

uniforms[ "uOpacity" ].value = 0.1;

[traa]

Yeah, i tried this, - still nothing. Models now only darker, but not transparent.

[alteredq]

Try dev branch instead of master. I checked and on dev branch uOpacity works as expected. I did some refactoring of normal map shader, it's possible old version had broken opacity.

Some things may break if you switch to dev, there were quite a lot of changes (e.g. MeshShaderMaterial -> ShaderMaterial).

[traa]

Yes, this works, thanks!

But another issue - after changing Camera to PerspectiveCamera moving models with holding left mouse button working really strange...

[alteredq]

Hmmm, PerspectiveCamera is bleeding edge from the last night, I didn't switch yet to these changes.

I guess weirdness could be caused by removing camera target. Try something like this:

// init
var target = new THREE.Vector( 0, 0, 0 );

// render loop
camera.lookAt( target );

// or if you used some other target
camera.lookAt( object.position );

[traa]

Thanks again! camera.lookAt( object.position ); works.

[traa]

Oh, almost forget, another issue, - after switching to dev build all models become darker, maybe problem in lights?

[alteredq]

Lighting changed, there were some fixes for handling of specular and ambient terms both in standard Phong and normal map shader. You may need to redo your material / lights settings.

If I remember well, before ambient term did not taken into account scene ambient light value (it was incorrectly adding light even if there was no light in the scene), so you may need to tweak scene / material ambient.

[traa]

Sorry, what do you mean when saying "redo your material/lights settings" and "tweak scene/material ambient"? I need to change parameters of Ambient light or...?

And another, in PerspectiveCamera i can't move camera in desired point by typing:

camera.position.set(0,300,0); for example. After this nothing changed in position vector.

[alteredq]

Sorry, what do you mean when saying "redo your material/lights settings" and "tweak scene/material ambient"? I need to change parameters of Ambient light or...?

Yup, either ambient light in scene or ambient color of material (or maybe also material specular color, specular term also changed).

Though it may not be possible to have exactly the same look as before, equations are now different (specular is now additive and works also on black textures, opacity is applied in a different way).

And another, in PerspectiveCamera i can't move camera in desired point by typing: camera.position.set(0,300,0); for example. After this nothing changed in position vector.

New cameras are still under development, it's possible something is not done yet, or something broke. Could you please file a new issue about this?

[traa]

It was my fault, i fixed some mistakes in code and lights works properly + camera moving correctly with position.set

But i found another issue with PathControls camera. You can see it in list of issues.