透明背景的Three.js烟雾动画

Question

我对three.js完全陌生，我想让烟雾帆布在图像的顶部有一个透明的背景。画布现在位于图像的后面，这就是为什么我在下面有这个css。

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

我不明白如何去除或使画布的黑色背景透明。请看下面的演示

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

Answer 1

如果需要透明的背景，可以将alpha参数传递给WebGLRenderer构造函数。

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

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

Answer 2

为此您可以使用scene.background。不需要使用额外的HTML元素。只要做：

scene.background = texture;

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