three.js 背景透明的三种可能

李恒道

1.初始化render
初始化WebGLRenderer的时候设置alpha为true
在下一步设置 renderer.setClearColor(0xffffff, 0);表示背景透明

    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setClearColor(0xffffff, 0); // second param is opacity, 0 => transparent

2.初始化EffectComposer
初始化EffectComposer的时候第二个参数renderTarget要进行初始化设置

    xxx= new EffectComposer(
      renderer,
      generateEffectRenderTarget(renderer),
    );

第二个参数我大概临摹官方写了一份代码
主要就是将parameters的format的RGB设置为RGBA

function generateEffectRenderTarget(renderer) {
  const size = renderer.getSize(new THREE.Vector2());
  const _pixelRatio = renderer.getPixelRatio();
  const _width = size.width;
  const _height = size.height;
  const parameters = {
    minFilter: THREE.LinearFilter,
    magFilter: THREE.LinearFilter,
    format: THREE.RGBAFormat,
  };

  const renderTarget = new THREE.WebGLRenderTarget(
    _width * _pixelRatio,
    _height * _pixelRatio,
    parameters,
  );
  renderTarget.texture.name = 'EffectComposer.rt1';
  return renderTarget;
}

3.修改UnrealBloomPass
UnrealBloomPass官方没有透明通道
关于这个问题可以参考https://github.com/mrdoob/three.js/issues/14104#issuecomment-429664412
解决方案可以参考
https://gist.githubusercontent.com/DOSputin/5c7893e0dbe2559b397d8d155d3aca67/raw/fb223649dba1b5a63dd9546d52bf96ef929fcbaf/UnrealBloomPass.js
将three中的引用改为该文件的引用
注意
如果该文件的this.fsQuad = new FullScreenQuad(null);报错FullScreenQuad定义存在问题
需要将其修改为 this.fsQuad = new Pass.FullScreenQuad( null );

脚本体验师001

道哥666
道哥发文章之前先发美女图，这操他哥哥的没人喊666太亏了

李恒道

脚本体验师001 发表于 2023-5-4 20:52
道哥666
道哥发文章之前先发美女图，这操他哥哥的没人喊666太亏了

呜呜呜呜
以后我决定写文章之前随机配一个美女视频！