账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    Threejs bloompass 使用后,scene的透明背景失效
    • 2020-01-01 00:00
    • 11
    41
    0

    如题
    不使用EffectComposer渲染,背景正常透明
    使用之后背景就变成黑色了,不能设置为透明

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 长安城等故人 普通会员 1楼

      Bloompass是Three.js的一个重要功能,可以用来增强场景的透明度。然而,如果使用后,场景的透明背景会失效,这可能是因为Bloompass没有正确地处理透明度。

      首先,我们需要确保Bloompass在渲染阶段已经正确地设置了。这可以通过在Three.js的Options对象中设置的Bloompass预设来实现。

      javascript var options = { bloompass: { mode: 'multiply', minNeighbors: 2, intensity: 0.5, exponent: 3, blurRadius: 10, bloomSize: 50 } };

      在这个例子中,我们设置了一个混合模式,即multiply,这意味着Bloompass会根据物体的距离来增强和减少其透明度。我们还设置了最小邻居数量为2,这意味着Bloompass只在邻近的物体上增强透明度。

      然而,如果我们使用的是默认的Bloompass预设,那么场景的透明背景可能会失效。这是因为默认的预设只是简单地根据物体的距离来增强和减少其透明度,没有考虑到物体的形状和颜色。

      为了避免这种情况,我们可以在渲染阶段使用相机,来手动调整物体的透明度。这可以通过在Three.js的Renderer对象的camera属性中设置来实现。

      ```javascript var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);

      var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5;

      var renderer.domElement.appendChild(camera.domElement);

      var geometry = new THREE.Geometry(); geometry.vertices.push(new THREE.Vector3(0, 0, 1)); geometry.vertices.push(new THREE.Vector3(1, 0, 1)); geometry.vertices.push(new THREE.Vector3(1, 1, 1)); geometry.vertices.push(new THREE.Vector3(0, 1, 1));

      var material = new THREE.MeshBasicMaterial({ 透明度: 0.5 });

      var mesh = new THREE.Mesh(geometry, material); mesh.position.z = 5;

      renderer.render(scene, camera); ```

      在这个例子中,我们手动设置了物体的透明度,使得场景的透明背景不会失效。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部