ShaderMaterial半透明、双面显示

这节课给大家演示下，shader材质ShaderMaterial怎么设置双面显示、半透明效果。

知识回顾

查看上节代码效果，你可以看出来通过ShaderMaterial自定义着色器GLSL ES代码，实现了类似基础网材质MeshBasicMaterial的效果。

const material = new THREE.MeshBasicMaterial({
    color: 0x00ffff,
});

const vertexShader = `
void main(){
  gl_Position = projectionMatrix*modelViewMatrix*vec4( position, 1.0 );
}
`
const fragmentShader = `
void main() {
    gl_FragColor = vec4(0.0,1.0,1.0,1.0);
}
`
const material = new THREE.ShaderMaterial({
    vertexShader: vertexShader,// 顶点着色器
    fragmentShader: fragmentShader,// 片元着色器
});

知识回顾：.side属性

默认单面显示，设置side:THREE.DoubleSide改为双面显示。

const material = new THREE.MeshBasicMaterial({
    color: 0x00ffff,
    side:THREE.DoubleSide//双面显示
});

ShaderMaterial属性.side

ShaderMaterial和MeshBasicMaterial一样可以从父类Material继承.side属性，通过.side属性可以设置网格模型Mesh的两面如何显示。

const material = new THREE.ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
    side: THREE.DoubleSide//双面显示
});

这时候你会发现ShaderMaterial和MeshBasicMaterial可以实现一样的双面显示效果。

知识回顾：MeshBasicMaterial设置半透明效果

const material = new THREE.MeshBasicMaterial({
  color: 0x00ffff,
  transparent: true,//允许透明
  opacity:0.3,//透明度
});

ShaderMaterial设置半透明效果

通过片元着色器代码设置ShaderMaterial透明度，更改内置变量gl_FragColor的第四个分量即可。

// 片元着色器代码
const fragmentShader = `
void main() {
    //透明度1.0不透明
    // gl_FragColor = vec4(0.0,1.0,1.0,1.0);
    //透明度设置0.3，在0~1之间，半透明
    gl_FragColor = vec4(0.0,1.0,1.0,0.3);
}
`
const geometry = new THREE.PlaneGeometry(100, 50);
const material = new THREE.ShaderMaterial({
    vertexShader: vertexShader,// 顶点着色器
    fragmentShader: fragmentShader,// 片元着色器
});

shader材质ShaderMaterial设置transparent:true,允许透明度计算，gl_FragColor = vec4(0.0,1.0,1.0,0.3)设置的半透明效果才会生效。

const material = new THREE.ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader,
    side: THREE.DoubleSide//双面显示
});