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 });

Answer 2

您可以為此使用scene.background 。 無需使用其他HTML元素。 做就是了：

scene.background = texture;