Three.js smoke animation with transparent background

问题

I'm completely new to three.js, I'd like the smoke canvas to on top of the image to have a transparent background. the canvas sits behind the image at the moment, that's why I have this css below.

canvas{ 
    position: absolute;
    z-index: 2;
    top:0px;
    left: 0;
}

I don't understand how to remove or to make the black background of the canvas transparent. Please have a look at my demo below

https://codepen.io/davide77/pen/GxZgZB?editors=1010

回答1:

If you need a transparent background you can pass in the alpha parameter to the WebGLRenderer constructor.

var renderer = new THREE.WebGLRenderer({ alpha: true });

https://threejs.org/docs/#api/renderers/WebGLRenderer

回答2:

You can use scene.background for this. There is no need to work with an additional HTML element. Just do:

scene.background = texture;

https://codepen.io/anon/pen/OvNVmy

来源：https://stackoverflow.com/questions/49279899/three-js-smoke-animation-with-transparent-background