如何让three.js雪碧背景融合？

我使用three.js中的精灵来加载纹理点（以前pointcloud），我无法让混合正常工作。这里是我使用的代码：如何让three.js雪碧背景融合？

this._renderer = new THREE.WebGLRenderer({alpha: true, antialias: true, preserveDrawingBuffer: true}); 
this._renderer.setClearColor(0x000000, 0); 
.... 
new THREE.Points(geometry, new THREE.PointsMaterial({transparent: true, blending: THREE.CustomBlending, blendSrc: THREE.OneFactor, blendEquation: THREE.AddEquation, map: lt._sprite, size: 1, vertexColors: true}));

精灵包含三个js附带的disc.png精灵。这是它的外观：

自定义混合（代码如上）：threejsblending。
没有共混：no blending

不同blendings我用看起来是相同的上述和/或子画面中的一个未加载正确（正方形点）。

我对threejs或webgl不是很熟悉。任何帮助表示赞赏。整个代码很长很复杂，但我可以发布任何相关的部分。

来源

2016-01-09 amfractal

它看起来像你需要设置你的精灵的背景 - disc.png - 透明。这样，你的精灵中的圆形对象将拥有你想要的任何颜色，但角落将是透明的。以下是说明这样做的使用Paint.net：

http://forums.getpaint.net/index.php?/topic/19145-convert-image-to-transparent-background/

确保您在新的精灵保存为.png文件。它也看起来像你缺少THREE.PointsMaterial调用中的不透明度设置。因此，除了设置“transparent：true”之外，如果您希望彩色光盘具有某种透明度，则需要将不透明度设置为介于0.0和1.0之间的某个值，例如“transparent：true，opacity：0.4，***”希望这可以帮助。

来源

2016-01-09 18:32:12 pprchsvr

谢谢。背景确实是透明的。我使用three.js本身的纹理，它显然适用于某些要点，而不适用于其他要点。昨晚我终于明白了。它与alphaTest有关。 – amfractal

对于运行了同样的问题，有什么固定的，对我来说是任何人：

alphaTest: 0.5

传递给pointsmaterial。

new THREE.PointsMaterial({transparent: true, alphaTest: 0.5, ....);

来源

2016-01-10 22:52:54 amfractal

哎呀呀！与A-Frame 0.6和三JS完美配合！感谢一堆！ –

如何让three.js雪碧背景融合？

回答

相关问题