I am encountering an issue with a particle that leaves a circle behind when rotated as an image. How can I eliminate this unwanted circle effect?
Check out the code on this Fiddle: http://jsfiddle.net/zUvsp/137/
Here's the code snippet:
var camera, scene, renderer, material, img, texture, particle;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 1000;
scene.add(camera);
img = new Image();
texture = new THREE.Texture(img);
img.onload = function() {
texture.needsUpdate = true;
makeParticle();
};
img.src = "http://www.atalasoft.com/cs/blogs/davidcilley/files/PNG_Mask.png";
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function makeParticle() {
material = new THREE.ParticleBasicMaterial({
map: texture,
blending: THREE.AdditiveBlending,
});
// create the particle
particle = new THREE.Particle(material);
particle.scale.x = particle.scale.y = 1;
particle.position.x = 10;
scene.add(particle);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
particle.rotation.z += 0.01
}