three.js 背景透明的三种可能
1.初始化render初始化WebGLRenderer的时候设置alpha为true
在下一步设置 renderer.setClearColor(0xffffff, 0);表示背景透明
```js
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setClearColor(0xffffff, 0); // second param is opacity, 0 => transparent
```
2.初始化EffectComposer
初始化EffectComposer的时候第二个参数renderTarget要进行初始化设置
```js
xxx= new EffectComposer(
renderer,
generateEffectRenderTarget(renderer),
);
```
第二个参数我大概临摹官方写了一份代码
主要就是将parameters的format的RGB设置为RGBA
```js
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 );
道哥666
道哥发文章之前先发美女图，这操他哥哥的没人喊666太亏了 脚本体验师001 发表于 2023-5-4 20:52
道哥666
道哥发文章之前先发美女图，这操他哥哥的没人喊666太亏了
呜呜呜呜
以后我决定写文章之前随机配一个美女视频！
页:
[1]