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