加法混合模式破坏点材料Three.js中的颜色，有没有更好的方法？

Question

我正在尝试将 map 添加到在 Three.js 中具有彩色纹理的点材质。 我尝试使用加法混合和 map 属性来实现圆形点而不是方形点，但它会破坏纹理的颜色并将其与点的白色混合。 我想知道是否有更好的方法来混合两者，这样我就可以保持粒子形状以及纹理的颜色？

这是粒子.png

 let pointShape = new THREE.TextureLoader().load("./models/particle.png"); m = new THREE.PointsMaterial({ size: pointSize, map: pointShape, blending: THREE.AdditiveBlending, depthTest: false, opacity: 0.9, onBeforeCompile: shader => { shader.uniforms.tex = {value: new THREE.TextureLoader().load("./textures/earthlores.jpg")}; shader.vertexShader = ` varying vec2 vUv; ${shader.vertexShader} `.replace( `#include <begin_vertex>`, `#include <begin_vertex> vUv = uv; ` ); //console.log(shader.vertexShader); shader.fragmentShader = ` uniform sampler2D tex; varying vec2 vUv; ${shader.fragmentShader} `.replace( `vec4 diffuseColor = vec4( diffuse, opacity );`, ` vec3 col = texture2D(tex, vUv).rgb; col *= diffuse; vec4 diffuseColor = vec4( col, opacity );` ); //console.log(shader.fragmentShader); } });

这是将纹理和粒子应用到点材质的代码。

这段代码的结果使这个褪色的、颜色被剥夺的地球仪。

注释掉加法混合会产生正确的颜色，但不会产生正确的点形状。

我是否必须使用自定义混合来编辑我的混合模式，更改着色器还是有另一种我完全想念的方式？ 我尝试了其他混合模式，但它们似乎不起作用，我也不确定如何正确使用自定义混合，所以请像白痴一样向我解释，哈哈，我很想学习.

任何帮助表示赞赏，谢谢！

Answer 1

好吧，事实证明我已经找到了使用自定义混合的解决方案。 使用加法方程和 alpha 因子作为源/目标（线性插值），两者已相加在一起，而无需将目标颜色添加到源颜色。 这使用提供的纹理创建了可爱的圆形点。

 m = new THREE.PointsMaterial({ size: pointSize, map: pointShape, blending: THREE.CustomBlending, blendEquation: THREE.AddEquation, blendSrc: THREE.SrcAlphaFactor, blendDst:THREE.OneMinusSrcAlphaFactor, depthTest: false });

美味的圆形点：