具有透明背景的 Three.js 烟雾动画 [英] Three.js smoke animation with transparent background

问题描述

我是three.js的新手，我希望图像顶部的烟雾画布具有透明背景.画布此刻位于图像后面，这就是为什么我在下面有这个 css.

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

推荐答案

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

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

这篇关于具有透明背景的 Three.js 烟雾动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！