我的粒子中的方形虫

时间:2015-09-03 15:12:13

标签: javascript 3d three.js

我想知道为什么我的粒子实际上是透明的,有时候,当它们相互混合时,它们会露出方形的初始容器?

有没有办法阻止它?

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();

}

谢谢!

0 个答案:

没有答案