three.js - 透明背景 THREEJS 与绽放

Question

我试图弄清楚如何在对其具有绽放效果的threejs画布上获得透明背景。我尝试了这个和其他stackoverflow答案，但它不起作用。这是一个示例

function main() {
    const canvas = document.querySelector('#bg');
    const renderer = new THREE.WebGLRenderer({ canvas, alpha: true });
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setSize(window.innerWidth, window.innerHeight)
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 500);
    camera.position.z = 2;
    const scene = new THREE.Scene();

    const follow = new THREE.Mesh(new THREE.CubeGeometry(0.1, 0.1, 0.1))
    let mat = new THREE.MeshBasicMaterial({color:0x5442f5})
    follow.material = mat
    scene.add(follow)
    follow.position.z = 1;
    //Composing & Post Processing
    var width = window.innerWidth || 1;
    var height = window.innerHeight || 1;
    var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: false };
    var renderTarget = new THREE.WebGLRenderTarget( width, height, parameters );
    const composer = new EffectComposer(renderer, renderTarget);
    composer.addPass(new RenderPass(scene, camera));
    var bloomSettings = {
        bloomStrength: 0.8,
        bloomThreshold: 0.1,
        bloomRadius: 0
    };
    var bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), bloomSettings.bloomStrength, bloomSettings.bloomRadius, bloomSettings.bloomThreshold);
    bloomPass.renderToScreen = true;
    composer.addPass(bloomPass);
    let then = 0;
    const clock = new THREE.Clock()
    function render(now) {
        const deltaTime = clock.getDelta();
        composer.render(deltaTime);

        requestAnimationFrame(render);
    }
    requestAnimationFrame(render);

}

main()

结果：

标签： three.js