Estoy tratando de agregar un mapa a un material puntual que tiene una textura coloreada en Three.js. Intenté usar la combinación aditiva y el atributo de mapa para lograr un punto redondeado en lugar de uno cuadrado, pero elimina el color de la textura y lo combina con el color blanco del punto. Me pregunto si hay una mejor manera de mezclar los dos para poder mantener la forma de las partículas pero también el color de la textura.

Esto es partícula.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); } });

El resultado de este código hace que este globo descolorido y privado de color.

Comentar la mezcla aditiva da como resultado el color correcto pero no la forma correcta del punto.

¿Tendré que editar mi modo de fusión usando una fusión personalizada, cambiar el sombreado o hay otra forma en la que me estoy perdiendo por completo? Probé los otros modos de mezcla y no parecen funcionar, tampoco estoy seguro de cómo utilizar la mezcla personalizada correctamente, así que explícamelo como un idiota cuando se trata de eso, jaja, me encantaría aprender. .

Cualquier ayuda es apreciada, gracias!