Öncelikle merhabalar bu gün WebGL kullanarak bir web tarayıcısında 3D bilgisayar grafikleri oluşturmak için  kullanılan tarayıcılar arası bir JavaScript kitaplığı olan Three.js ile partilül efekti örneğini  göstermek istiyorum

 

Cdn İle Dahil edilelim

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r45/Three.js"></script>
	

 

Three.js Kodları

	window.requestAnimFrame = (function(){
      return  window.requestAnimationFrame       || 
              window.webkitRequestAnimationFrame || 
              window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || 
              window.msRequestAnimationFrame     || 
              function(/* function */ callback, /* DOMElement */ element){
                window.setTimeout(callback, 1000 / 12);
              };
    })();
	var WIDTH = 600,
	    HEIGHT = 400;
	
	var VIEW_ANGLE = 45,
	    ASPECT = WIDTH / HEIGHT,
	    NEAR = 0.1,
	    FAR = 20000;
	
	var $container = $('#container');

	var renderer = new THREE.WebGLRenderer();
	var camera = new THREE.Camera(  VIEW_ANGLE,
	                                ASPECT,
	                                NEAR,
	                                FAR  );
	var scene = new THREE.Scene();
		camera.position.z = 800;
	
	
	renderer.setClearColor(new THREE.Color(0, 1));
	renderer.setSize(WIDTH, HEIGHT);
	$container.append(renderer.domElement);
		var particleCount = 7000,
	    particles = new THREE.Geometry(),
		pMaterial = new THREE.ParticleBasicMaterial({
			color: 0xFFFFFF,
			size: 14,
			map: THREE.ImageUtils.loadTexture(
				"particle.png"
			),
			blending: THREE.AdditiveBlending,
			transparent: true
		});
		for(var p = 0; p < particleCount; p++) {
	
		var pX = Math.random() * 500 - 250,
			pY = Math.random() * 500 - 250,
			pZ = Math.random() * 500 - 250,
		    particle = new THREE.Vertex(
				new THREE.Vector3(pX, pY, pZ)
			);
		particle.velocity = new THREE.Vector3(
			0,				
			-Math.random(),	
			0);				

		particles.vertices.push(particle);
	}
	
	var particleSystem = new THREE.ParticleSystem(
		particles,
		pMaterial);
	
	particleSystem.sortParticles = true;
	
	scene.addChild(particleSystem);
	
	function update() {
		
		particleSystem.rotation.y += 0.0045;
		
		var pCount = particleCount;
		while(pCount--) {
			var particle = particles.vertices[pCount];
			particle.velocity.y -= Math.random() * .1;

			if(particle.position.y < -200) {
				particle.position.y = 200;
				particle.velocity.y = 0;
			}
			
			
			particle.position.addSelf(
				particle.velocity);
		}
		
		
		particleSystem.geometry.__dirtyVertices = false;
		
		renderer.render(scene, camera);
		
		requestAnimFrame(update);
	}
	requestAnimFrame(update);

<div id="container"></div>