本文介绍了具有透明背景的 Three.js 烟雾动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是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 烟雾动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!