Three.js：背景和png粒子的不可见背景答案

【问题标题】：Three.js : Invisible background for background and png particlesThree.js：背景和png粒子的不可见背景
【发布时间】：2014-01-03 18:10:51
【问题描述】：

在我的粒子上设置不可见背景和 Alpha 通道时遇到问题。

圣诞节我想使用你的示例脚本wegl_particles_sprite。适应了情况。我已将代码设置在前台的全屏 div 中，并成功使其不可点击，以便我仍然可以使用我的网站。问题是即使使用transparent=true;，我也无法将 png alpha 通道设置为透明。

首先我将背景设置为透明：OK

renderer = new THREE.WebGLRenderer( { clearAlpha: 1, alpha:true } );

但无法使用 Alpha 通道透明加载我的雪花。需要有人帮助我制作圣诞魔法吗？

编辑：抱歉是打字错误，问题仍然存在！对于粒子^^

【问题讨论】：

你能举个例子来说明这个问题吗？
我同意 westLangley。我们需要一个例子。或者至少是一个屏幕截图。
http://jsfiddle.net/ketzylcoatl/3b75p/5/，对于代码，http://jsfiddle.net/ketzylcoatl/3b75p/5/embedded/result/ 对于全屏结果，我无法从远处的 url 加载 png。

【解决方案1】：

应该是这样的

renderer = new THREE.WebGLRenderer( { clearAlpha: 1, alpha:true } );

【讨论】：

【解决方案2】：

你用什么材料做雪花？也许这会很有用：

你很可能需要做类似的事情

material.transparent = true;
material.blending = THREE.AdditiveAlphaBlending;

【讨论】：

我使用了给定materials[i] = new THREE.ParticleSystemMaterial( { size: size, map: sprite, blending: THREE.AdditiveBlending, depthTest: false, transparent : true } ); materials[i].color.setHSL( color[0], color[1], color[2] ); particles = new THREE.ParticleSystem( geometry, materials[i] ); 的默认值，还尝试了 THREE.AdditiveAlphaBlending；没有成功:-(
此外，在您给出的示例中：http://threejs.org/examples/webgl_materials_blending.html 据说：renderer = new THREE.WebGLRenderer( { alpha: false } ); 这不是我的目标，我需要所有背景都是透明的。

【解决方案3】：

我终于成功了。使用上面的代码和一个背景已经不可见的 png，一切似乎都可以正常工作！如您所见：

获取 [http://jsfiddle.net/ketzylcoatl/3b75p/5/] 上的代码并享受吧！

谢谢，新年快乐！

【讨论】：