Textureloader blackbox

Questions
1

I set the canvas alpha: true and AdditiveBlending doesn’t work anymore. The black box appears around the particles.

	wh = window.innerHeight;

function init(){

	
	renderer = new THREE.WebGLRenderer({canvas : document.getElementById('canvas'), alpha: true});
	renderer.setSize(ww,wh);
 
	
	scene = new THREE.Scene();

	
	camera = new THREE.OrthographicCamera(ww/-2,ww/2,wh/2,wh/-2,0,1000);
	camera.position.set(0, 0, 500);
	scene.add(camera);


	particles = new THREE.Object3D();;
	scene.add(particles);


	renderer.render(scene,camera);
  
  window.addEventListener("resize", onWindowResize, false);

	animate();
  
};

function onWindowResize(event) {
   var container = document.getElementById("canvas");
   var w = container.offsetWidth;
   var h = container.offsetHeight;
   renderer.setSize(w, h);
   camera.aspect = w / h;
   camera.updateProjectionMatrix();
}




var mouse = {x:0,y:0};

function mouseMove(e){
	
	mouse.x = e.clientX-(ww/2);
	mouse.y = (wh/2)-e.clientY;

};



function createParticle(){
	
	var geometry = new THREE.Geometry();
	var vertices = new THREE.Vector3(
    mouse.x,
		mouse.y,
		-1
	);
  

  var textureLoader = new THREE.TextureLoader();
  var sprite = textureLoader.load( 'https://luckyluke007.github.io/giving-day-three/images/gd-dot.png');

	geometry.vertices.push(vertices);

  var material = new THREE.PointsMaterial({
		color : Math.random() * 0xf5851f,
    size: Math.random() * 50,
    map: sprite,
    blending: THREE.AdditiveBlending,
    transparent: true
    });

  

	particle = new THREE.Points(geometry, material);
	//We create a random speed for each particle for aesthetics
	particle.speed = Math.random()/60+0.001;
	//We set a random position for each particle
	particle.direction = {
		x : (Math.random()-.5)*ww*1,
		y : (Math.random()-.5)*wh*1
	};
	
	particles.add(particle);
}

var animate = function () {
	requestAnimationFrame(animate);


	createParticle();

	
	for(var i=0,j=particles.children.length;i<j;i++){
	
		var particle = particles.children[i];


		particle.geometry.vertices[0].x += (particle.direction.x - particle.geometry.vertices[0].x)*particle.speed;
		particle.geometry.vertices[0].y += (particle.direction.y - particle.geometry.vertices[0].y)*particle.speed;

		particle.material.opacity -= .005

		particle.geometry.verticesNeedUpdate = true;


		if(particle.material.opacity < .005){

			particles.remove(particle);
			i--;j--;
		}
	}

	renderer.render(scene, camera);
};

init();
2

Hi @luckyluke !
What about if you just remove the black background from your texture ?

3

Yeah, the sprite has to look like this one:

The parts around the disc are transparent, not black. This will remove the artifact from your demo: https://codepen.io/anon/pen/vbQeGV

2 Likes
4

Wow, that was easy. :slight_smile: Thanks, guys!

1 Like