上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

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

[复制链接]
  • TA的每日心情
    擦汗
    昨天 09:20
  • 签到天数: 192 天

    [LV.7]常住居民III

    687

    主题

    5428

    回帖

    6365

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6365

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2023-5-3 22:13:48 | 显示全部楼层 | 阅读模式

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

    已有1人评分好评 油猫币 理由
    wwwwwllllk + 1 + 3 ggnb!

    查看全部评分 总评分:好评 +1  油猫币 +3 

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    开心
    2024-5-17 00:00
  • 签到天数: 120 天

    [LV.7]常住居民III

    29

    主题

    602

    回帖

    539

    积分

    专家

    积分
    539

    油中2周年生态建设者油中3周年挑战者 lv2

    发表于 2023-5-4 20:52:14 | 显示全部楼层
    道哥666
    道哥发文章之前先发美女图,这操他哥哥的没人喊666太亏了
    入驻爱发电 让这世界充满爱 https://afdian.net/a/vpannice
    回复

    使用道具 举报

  • TA的每日心情
    擦汗
    昨天 09:20
  • 签到天数: 192 天

    [LV.7]常住居民III

    687

    主题

    5428

    回帖

    6365

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6365

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2023-5-5 09:53:25 | 显示全部楼层
    脚本体验师001 发表于 2023-5-4 20:52
    道哥666
    道哥发文章之前先发美女图,这操他哥哥的没人喊666太亏了

    呜呜呜呜
    以后我决定写文章之前随机配一个美女视频!
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表