Changing the opacity of a THREE.Mirror()

Question

I'm pretty new to Three.js, and 3D in general, so please bear with me!

I'm trying to make a THREE.Mirror and change its opacity. I would think this would work, but unfortunately it does not, nor does any other solution I've tried thus far.

// inside init, render has no been called // create a THREE.Mirror and add it to the provided THREE.Scene function createMirror( props ) { let { name, width, height, options, scene } = props; this[ name ] = new THREE.Mirror( width, height, options ); scene.add( this[ name ] ); } // create 3js mirror and add to scene createMirror.call( this, { name: "Mirror_1", width: 1.75, height: 1.75, options: { clipBias: 0.01, textureWidth: this.width, textureHeight: this.height, color: 0xefefef }, scene: this.Main_Scene } ); this.Mirror_1.rotation.x = -Math.PI / 2; this.Mirror_1.material.opacity = 0.1; this.Mirror_1.material.transparent = true; // render is called inside an ObjectLoader after objects are loaded, here is // the render function renderScene() { requestAnimationFrame( this.renderScene ); this.P_Camera_1.lookAt( this.Main_Scene.position ); this.controls.update(); this.WebGL_Renderer_1.setViewport(0, 0, this.width, this.height); this.WebGL_Renderer_1.render( this.Main_Scene, this.P_Camera_1 ); }

Everything else works fine. Objects are loaded, scene renders beautifully, mirror looks great... just can't change it's opacity. Any help would be greatly appreciate. If this is not enough context, please let me know and I can provide more.

P.S. This is inside a React application. render() { ... } is a method on the component controlling the scene.

EDIT: I edited the fragmentShader portion of the Mirror.js provided in the examples\js portion of npm install three and written by @author Slayvin / http://slayvin.net.

var mirrorShader = { uniforms: { ... }, vertexShader: [ ... ].join( '\n' ), fragmentShader: [ 'uniform vec3 mirrorColor;', 'uniform sampler2D mirrorSampler;', 'varying vec4 mirrorCoord;', 'float blendOverlay(float base, float blend) {', ' return( base < 0.5 ? ( 2.0 * base * blend ) : (1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) );', '}', 'void main() {', ' vec4 color = texture2DProj(mirrorSampler, mirrorCoord);', // Changed the vec4(r, g, b, alpha) alpha from 1.0 to 0.25 // No change in rendered THREE.Mirror ' color = vec4(blendOverlay(mirrorColor.r, color.r), blendOverlay(mirrorColor.g, color.g), blendOverlay(mirrorColor.b, color.b), 0.25);', ' gl_FragColor = color;', '}' ].join( '\n' ) }

I'm obviously missing something though!

I think you can't change the opacity because the mirror uses another shader. it would work if you modify the shader properly. — Craig.Li
– Craig.Li, Commented Jun 7, 2017 at 23:42
I will add an edit to my question. I actually tried that and was unable to get an opacity, or alpha to apply. Let me show you what I tried. — Kyle Richardson
– Kyle Richardson, Commented Jun 7, 2017 at 23:45
Actually, please post your response as an answer and I will accept it. I got it to work because you made me do this again. I did this before, but obviously did not have the mesh.material.transparent = true as well. Thank you for you assistance!!! — Kyle Richardson
– Kyle Richardson, Commented Jun 7, 2017 at 23:54
Well done, I don't know how to write the shader, I just noticed you didn't notice the shader, so I suggested. — Craig.Li
– Craig.Li, Commented Jun 7, 2017 at 23:59

Kyle Richardson · Accepted Answer · 2017-06-08 20:12:56Z

For anyone wondering how to affect the opacity of a THREE.Mirror(), you need to do two things:

Your_Mirror.material.transparent = true; Make sure this is done before the scene is rendered, or before the mirror is added to the scene and the fragmentShader has applied it's magic.
Change the alpha in the fragmentShader used by the Your_Mirror.material.fragmentShader

Here is a solution I am using to change the opacity of a mirror dynamically.

const fragmentShaderBeforeAlpha = ` uniform vec3 mirrorColor; uniform sampler2D mirrorSampler; varying vec4 mirrorCoord; float blendOverlay(float base, float blend) { return( base < 0.5 ? ( 2.0 * base * blend ) : (1.0 - 2.0 * ( 1.0 - base ) * ( 1.0 - blend ) ) ); } void main() { vec4 color = texture2DProj(mirrorSampler, mirrorCoord); color = vec4(blendOverlay(mirrorColor.r, color.r), blendOverlay(mirrorColor.g, color.g), blendOverlay(mirrorColor.b, color.b), `; const fragmentShaderAfterAlpha = ` ); gl_FragColor = color; } `; export default function fragmentShader( alpha ) { return fragmentShaderBeforeAlpha + alpha + fragmentShaderAfterAlpha; }

misha11 · Accepted Answer · 2018-09-29 21:24:31Z

add another geometry over mirror and set transparency for it

var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshLambertMaterial ( { opacity : 0.98 , transparent: true } ) );

Collectives™ on Stack Overflow

Changing the opacity of a THREE.Mirror()

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related