three实现双面材质shaderMaterial

 

 

  const vertexShader = `
  void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`;

    // 片段着色器
    //gl_FrontFacing 内建变量，它会根据面是正面还是背面进行判断。
    const fragmentShader = `
  uniform vec3 colorTop;
  uniform vec3 colorBottom;
  uniform float opacityTop;
  uniform float opacityBottom;

  void main() {
    // 根据正反面选择颜色
    if (gl_FrontFacing) {
      gl_FragColor = vec4(colorTop, opacityTop); // 正面颜色
    } else {
      gl_FragColor = vec4(colorBottom, opacityBottom); // 背面颜色
    }
  }
`;
    // 创建材质
    const ShaderMaterial = new THREE.ShaderMaterial({
      vertexShader: vertexShader,
      fragmentShader: fragmentShader,
      side: THREE.DoubleSide, // 确保渲染上下两个面
      depthWrite: false,
      transparent: true,
      uniforms: {
        colorTop: { value: new THREE.Color(0x00ff00) }, // 上面颜色（红色）
        colorBottom: { value: new THREE.Color(0xffffff) }, // 下面颜色（蓝色）
        opacityTop: { value: 0.5 }, // 透明度 50%
        opacityBottom: { value: 0.9 }, // 透明度 50%
      },
    });