2

I'm wondering why my particles, who are actually transparent, sometimes, when they mix each other they reveal their square initial container ?

Is there a way to stop that ?

http://codepen.io/anon/pen/QjwGEj

window.onload = function() {

    var HEIGHT = window.innerHeight,
        WIDTH = window.innerWidth,
        ASPECT = WIDTH / HEIGHT,
        ANGLE_VIEW = 75,
        NEAR = 0.1,
        FAR = 100000;

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 
            ANGLE_VIEW,
            ASPECT,
            NEAR,
            FAR);

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(WIDTH, HEIGHT);
    renderer.setClearColor( 0x000000 );
    document.body.appendChild(renderer.domElement);

    var particleCount = 16000,
        particles = new THREE.Geometry(),
        pMaterial = new THREE.ParticleBasicMaterial({
            color: 0xFFFFFF,
            size: 2,
            map: THREE.ImageUtils.loadTexture('img/particle.png'),
            blending: THREE.AdditiveBlending,
            transparent: true
        });

    // Now we create the individual particles
    for (var p = 0; p < particleCount; p++) {

        // Create a particle with random position
        // -250 -> 250
        var pX = Math.random() * 500 - 250,
            pY = Math.random() * 500 - 250,
            pZ = Math.random() * 500 - 250;

        particle = new THREE.Vector3(pX, pY, pZ);

        // Add it to the geometry
        particles.vertices.push(particle);

    };

    // Create the particle system
    var particleSystem = new THREE.ParticleSystem(
            particles, 
            pMaterial
        );

   scene.add(particleSystem);

    /***
        SMOKE =p=
    ***/

    var smokeParticles = new THREE.Geometry,
        smokeMaterial = new THREE.ParticleBasicMaterial({
            color: 0x111111,
            size: 200,
            map: THREE.ImageUtils.loadTexture('img/smoke.png'),
            blending: THREE.AdditiveBlending,
            transparent: true
        });

    for (var i = 0; i < 3200; i++) {

        // Create a particle with random position
        // -250 -> 250
        var pX = Math.random() * 500 - 250,
            pY = Math.random() * 500 - 250,
            pZ = Math.random() * 500 - 250;

        var particle = new THREE.Vector3(pX, pY, pZ);
        smokeParticles.vertices.push(particle);

    }

    var smokeSystem= new THREE.ParticleSystem(smokeParticles, smokeMaterial);
    smokeSystem.sortParticles = true;

    scene.add(smokeSystem);

    var update = function() {

        // Add some rotation to the system
        particleSystem.rotation.y = particleSystem.rotation.x = particleSystem.rotation.z += 0.005;
        smokeSystem.rotation.y = smokeSystem.rotation.x = smokeSystem.rotation.z += 0.006;

        // Draw
        renderer.render(scene, camera);

        // Let's move it
        requestAnimationFrame(update);

    };

    update();

}

Thank you !

H4mm3R
  • 245
  • 4
  • 15
  • 1
    your image doesnt seem to be transparent. otherwise `alphaTest` would have worked on it. – gaitat Sep 03 '15 at 15:42
  • See here http://stackoverflow.com/questions/12337660/three-js-adjusting-opacity-of-individual-particles Hope it can help – Ale_32 Sep 04 '15 at 07:26

0 Answers0