Three.js 更改3.Mirror（）的不透明度

我对Three.js和3D都是新手，所以请耐心听我说

我正在试着制作一个三级镜像，并改变它的不透明度。我认为这会起作用，但不幸的是，它不起作用，我迄今为止尝试过的任何其他解决方案也不起作用

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

其他一切都很好。加载对象，场景渲染漂亮，镜像看起来很棒。。。只是不能改变它的不透明度。任何帮助都将不胜感激。如果这还不够，请让我知道，我可以提供更多

另外，这是在React应用程序中<代码>渲染（）{…}是控制场景的组件上的一种方法

编辑：我编辑了Mirror.js的

fragmentShader

部分，该部分由@author Slayvin/编写，在

npm install three的examples\js部分提供

var mirrorShader={
制服：{
...
},
顶点着色器：[
...
].join（'\n'），
碎片着色器：[
“统一vec3镜像颜色；”，
“统一采样器2D镜像采样器；”，
'可变vec4镜像坐标；'，
'浮子混合料（浮子底座，浮子混合）{'，
“返回（基值<0.5？（2.0*基值*混合）：（1.0-2.0*（1.0-基值）*（1.0-混合））；”，
'}',
“void main（）{”，
‘vec4 color=texture2DProj（镜像采样器，镜像坐标）；’，
//将vec4（r，g，b，alpha）alpha从1.0更改为0.25
//三次渲染没有变化。镜像
'color=vec4（blendorlay（mirrorColor.r，color.r），blendorlay（mirrorColor.g，color.g），blendorlay（mirrorColor.b，color.b），0.25）；'，
“gl_FragColor=color；”，
'}'
].join（“\n”）
}

不过我显然错过了一些东西
 如果有人想知道如何影响
THREE.Mirror（）的不透明度，您需要做两件事：

Your_Mirror.material.transparent=true确保在渲染场景之前，或者在将镜像添加到场景并且fragmentShader应用了它的魔力之前，完成此操作

更改
镜像.material.fragmentShader使用的碎片着色器中的alpha

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

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;

}

const fragmentShaderBeforeAlpha=`
均匀的vec3反射镜颜色；
均匀取样器；二维镜取样器；
可变vec4镜像坐标；
浮子混合料（浮子底座、浮子混合料）{
返回（基值<0.5？（2.0*基值*混合）：（1.0-2.0*（1.0-基值）*（1.0-混合））；
}
void main（）{
vec4颜色=纹理2DPROJ（镜像采样器，镜像坐标）；
color=vec4（blendorlay（mirrorColor.r，color.r）、blendorlay（mirrorColor.g，color.g）、blendorlay（mirrorColor.b，color.b），
`;
常量fragmentShaderAfterAlpha=`
);
gl_FragColor=颜色；
}
`;
导出默认函数fragmentShader（alpha）{
返回fragmentShaderBeforeAlpha+alpha+fragmentShaderAfterAlpha；
}
在镜像上添加另一个几何体并为其设置透明度

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

我认为你不能改变不透明度，因为镜像使用了另一个着色器。如果你正确修改着色器，它会工作的。我将添加一个编辑到我的问题。实际上我试过了，但无法得到一个不透明度，或阿尔法应用。让我告诉你我试过了什么。事实上，请把你的回复作为答案，我会接受的。我让它工作是因为你让我再做一次。我以前做过，但显然没有
mesh.material.transparent=true
。谢谢你的帮助！！！做得好，我不知道如何编写着色器，我只是注意到你没有注意到着色器，所以我建议。
var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshLambertMaterial ( { opacity : 0.98 , transparent: true } ) );