Question

我对Three.js很新，一般都是3D，所以请耐心等待我！

我正在尝试制作一个THREE.Mirror并更改其不透明度。我认为这会起作用，但不幸的是它没有，也没有我迄今为止尝试过的任何其他解决方案。

// 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 );
}

其他一切都很好。对象被加载，场景呈现精美，镜像看起来很棒......只是无法改变它的不透明度。任何帮助都会非常感激。如果这还不够，请告诉我，我可以提供更多。

P.S。这是在React应用程序中。 render() { ... }是控制场景的组件上的一种方法。

编辑：我编辑了fragmentShader的examples \ js部分中提供的Mirror.js的npm install three部分，由@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' )
}

我显然错过了一些东西！

Answer 1

对于想知道如何影响THREE.Mirror()的不透明度的人，您需要做两件事：

Your_Mirror.material.transparent = true;确保在渲染场景之前或镜像添加到场景之前完成此操作并且fragmentShader已应用它的魔力。
更改Your_Mirror.material.fragmentShader

这是我用来动态更改镜像不透明度的解决方案。

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;

}

Answer 2

在镜像上添加另一个几何并为其设置透明度

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

更改THREE.Mirror（）的不透明度

2 个答案: