threejs 粒子系统和材质贴图

例子系统

DOCTYPE html>

	
		three.js webgl - buffer geometry custom attributes - particles
		
		
		
			body {
				color: #ffffff;
				background-color: #000000;
				margin: 0px;
				overflow: hidden;
			}
			#info {
				position: absolute;
				top: 0px;
				width: 100%;
				padding: 5px;
				font-family: Monospace;
				font-size: 13px;
				text-align: center;
				font-weight: bold;
			}
			a {
				color: #fff;
			}
		
	
 
	
		
		
		
 
			attribute float size;
			attribute vec3 customColor;
 
			varying vec3 vColor;
 
			void main() {
 
				vColor = customColor;
 
				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
 
				gl_PointSize = size * ( 300.0 / mvPosition.x );
 
				gl_Position = projectionMatrix * mvPosition;
 
			}
 
		
 
		
 
			uniform sampler2D texture;
 
			varying vec3 vColor;
 
			void main() {
				gl_FragColor = vec4( vColor, 1.0 );
				gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
 
			}
 
		
 
		
 
		var renderer, scene, camera, stats;
 
		var particleSystem, uniforms, geometry;
 
		var particles = 200;
 
		var WIDTH = window.innerWidth;
		var HEIGHT = window.innerHeight;
 
		init();
		animate();
 
		function init() {
 
			camera = new THREE.PerspectiveCamera( 40, WIDTH / HEIGHT, 1, 10000 );
			camera.position.z = 500;
			scene = new THREE.Scene();
			uniforms = {
				texture:   { value: new THREE.TextureLoader().load( "textures/sprites/spark1.png" ) }
			};
			var shaderMaterial = new THREE.ShaderMaterial( {
 
				uniforms:       uniforms,
				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
				transparent:    true
			});
 
			var radius = 400;
			var geometry = new THREE.BufferGeometry();
			var positions = new Float32Array( particles * 3 );
			var colors = new Float32Array( particles * 3 );
			var sizes = new Float32Array( particles );
			for ( var i = 0, i3 = 0; i