Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
webgl_buffergeometry_custom_attributes_particles.html 4.3 KB
Newer Older
Z
Add BufferGeometry + Custom Attributes + Particles example.  
zz85 已提交
1 2 3 
<!DOCTYPE html>
<html lang="en">
	<head>
M
Minor aesthetical tweaks.  
Mr.doob 已提交
4 
		<title>three.js webgl - buffer geometry custom attributes - particles</title>
Z
Add BufferGeometry + Custom Attributes + Particles example.  
zz85 已提交
5 6 7 8 9 10 11 12 13 14 
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				color: #ffffff;
				background-color: #000000;
				margin: 0px;
				overflow: hidden;
			}
			#info {
M
Minor aesthetical tweaks.  
Mr.doob 已提交
15 16 17 
				position: absolute;
				top: 0px;
				width: 100%;
Z
Add BufferGeometry + Custom Attributes + Particles example.  
zz85 已提交
18 
				padding: 5px;
M
Minor aesthetical tweaks.  
Mr.doob 已提交
19 20 21 22 23 24 
				font-family: Monospace;
				font-size: 13px;
				text-align: center;
				font-weight: bold;
			}
			a {
W
Added Raycaster support for THREE.PointCloud  
WestLangley 已提交
25 
				color: #fff;
Z
Add BufferGeometry + Custom Attributes + Particles example.  
zz85 已提交
26 27 28 29 30 31 
			}
		</style>
	</head>

	<body>
		<div id="container"></div>
M
Fixed lgtm.com unsafe external link alerts.  
Mr.doob 已提交
32 
		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffergeometry custom attributes - particles</div>
Z
Add BufferGeometry + Custom Attributes + Particles example.  
zz85 已提交
33
W
Examples: three.min.js -> three.js  
WestLangley 已提交
34 
		<script src="../build/three.js"></script>
Z
Add BufferGeometry + Custom Attributes + Particles example.  
zz85 已提交
35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 

		<script src="js/Detector.js"></script>
		<script src="js/libs/stats.min.js"></script>

		<script type="x-shader/x-vertex" id="vertexshader">

			attribute float size;
			attribute vec3 customColor;

			varying vec3 vColor;

			void main() {

				vColor = customColor;

				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
O
point size attenuation fix  
omgitsraven 已提交
52 
				gl_PointSize = size * ( 300.0 / -mvPosition.z );
Z
Add BufferGeometry + Custom Attributes + Particles example.  
zz85 已提交
53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 

				gl_Position = projectionMatrix * mvPosition;

			}

		</script>

		<script type="x-shader/x-fragment" id="fragmentshader">

			uniform vec3 color;
			uniform sampler2D texture;

			varying vec3 vColor;

			void main() {

				gl_FragColor = vec4( color * vColor, 1.0 );
W
Particles were not updating.  
WestLangley 已提交
70
Z
Add BufferGeometry + Custom Attributes + Particles example.  
zz85 已提交
71 72 73 74 75 76 77 78 79 80 81 82 83 
				gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );

			}

		</script>


		<script>

		if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

		var renderer, scene, camera, stats;
W
Particles were not updating.  
WestLangley 已提交
84 
		var particleSystem, uniforms, geometry;
M
Updated src and examples to latest BufferGeometry API.  
Mr.doob 已提交
85
Z
Add BufferGeometry + Custom Attributes + Particles example.  
zz85 已提交
86 87 88 89 90 91 92 
		var particles = 100000;

		init();
		animate();

		function init() {
M
Examples: Simplify some buffer geometry examples  
Mugen87 已提交
93 
			camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
Z
Add BufferGeometry + Custom Attributes + Particles example.  
zz85 已提交
94 95 96 97 98 99 
			camera.position.z = 300;

			scene = new THREE.Scene();

			uniforms = {
M
Removed no longer needed uniform types.  
Mr.doob 已提交
100 101 
				color:     { value: new THREE.Color( 0xffffff ) },
				texture:   { value: new THREE.TextureLoader().load( "textures/sprites/spark1.png" ) }
Z
Add BufferGeometry + Custom Attributes + Particles example.  
zz85 已提交
102 103 104 105 106 

			};

			var shaderMaterial = new THREE.ShaderMaterial( {
M
Updated examples with API changes.  
Mr.doob 已提交
107 
				uniforms:       uniforms,
Z
Add BufferGeometry + Custom Attributes + Particles example.  
zz85 已提交
108 109 110 
				vertexShader:   document.getElementById( 'vertexshader' ).textContent,
				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
M
Updated examples with API changes.  
Mr.doob 已提交
111 112 113 
				blending:       THREE.AdditiveBlending,
				depthTest:      false,
				transparent:    true
Z
Add BufferGeometry + Custom Attributes + Particles example.  
zz85 已提交
114 115 116 117 118 119 120 121 

			});


			var radius = 200;

			geometry = new THREE.BufferGeometry();
M
Examples: Simplify some buffer geometry examples  
Mugen87 已提交
122 123 124 
			var positions = [];
			var colors = [];
			var sizes = [];
Z
Add BufferGeometry + Custom Attributes + Particles example.  
zz85 已提交
125
W
Particles were not updating.  
WestLangley 已提交
126 
			var color = new THREE.Color();
Z
Add BufferGeometry + Custom Attributes + Particles example.  
zz85 已提交
127
M
Examples: Simplify some buffer geometry examples  
Mugen87 已提交
128 
			for ( var i = 0; i < particles; i ++ ) {
Z
Add BufferGeometry + Custom Attributes + Particles example.  
zz85 已提交
129
M
Examples: Simplify some buffer geometry examples  
Mugen87 已提交
130 131 132 
				positions.push( ( Math.random() * 2 - 1 ) * radius );
				positions.push( ( Math.random() * 2 - 1 ) * radius );
				positions.push( ( Math.random() * 2 - 1 ) * radius );
Z
Add BufferGeometry + Custom Attributes + Particles example.  
zz85 已提交
133
M
Example clean up.  
Mr.doob 已提交
134 
				color.setHSL( i / particles, 1.0, 0.5 );
Z
Add BufferGeometry + Custom Attributes + Particles example.  
zz85 已提交
135
M
Examples: Simplify some buffer geometry examples  
Mugen87 已提交
136 
				colors.push( color.r, color.g, color.b );
Z
Add BufferGeometry + Custom Attributes + Particles example.  
zz85 已提交
137
M
Examples: Simplify some buffer geometry examples  
Mugen87 已提交
138 
				sizes.push( 20 );;
Z
Add BufferGeometry + Custom Attributes + Particles example.  
zz85 已提交
139 140 141 

			}
M
Examples: Simplify some buffer geometry examples  
Mugen87 已提交
142 143 144 
			geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
			geometry.addAttribute( 'customColor', new THREE.Float32BufferAttribute( colors, 3 ) );
			geometry.addAttribute( 'size', new THREE.Float32BufferAttribute( sizes, 1 ) );
M
Updated loaders and examples to new BufferAttribute pattern.  
Mr.doob 已提交
145
M
Updated examples.  
Mr.doob 已提交
146 
			particleSystem = new THREE.Points( geometry, shaderMaterial );
M
Updated loaders and examples to new BufferAttribute pattern.  
Mr.doob 已提交
147
W
Particles were not updating.  
WestLangley 已提交
148 
			scene.add( particleSystem );
Z
Add BufferGeometry + Custom Attributes + Particles example.  
zz85 已提交
149
M
Removed alpha: false instances from examples.  
Mr.doob 已提交
150 
			renderer = new THREE.WebGLRenderer();
M
Examples: Added setPixelRatio(). See #5627.  
Mr.doob 已提交
151 
			renderer.setPixelRatio( window.devicePixelRatio );
M
Examples: Simplify some buffer geometry examples  
Mugen87 已提交
152 
			renderer.setSize( window.innerWidth, window.innerHeight );
Z
Add BufferGeometry + Custom Attributes + Particles example.  
zz85 已提交
153 154 155 156 157 

			var container = document.getElementById( 'container' );
			container.appendChild( renderer.domElement );

			stats = new Stats();
M
stats.js usage clean up  
Mr.doob 已提交
158 
			container.appendChild( stats.dom );
Z
Add BufferGeometry + Custom Attributes + Particles example.  
zz85 已提交
159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 

			//

			window.addEventListener( 'resize', onWindowResize, false );

		}

		function onWindowResize() {

			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();

			renderer.setSize( window.innerWidth, window.innerHeight );

		}

		function animate() {

			requestAnimationFrame( animate );

			render();
			stats.update();

		}

		function render() {

			var time = Date.now() * 0.005;
W
Particles were not updating.  
WestLangley 已提交
188 189 
			particleSystem.rotation.z = 0.01 * time;
M
Example clean up.  
Mr.doob 已提交
190 
			var sizes = geometry.attributes.size.array;
Z
Add BufferGeometry + Custom Attributes + Particles example.  
zz85 已提交
191
M
Examples clean up.  
Mr.doob 已提交
192 
			for ( var i = 0; i < particles; i++ ) {
Z
Add BufferGeometry + Custom Attributes + Particles example.  
zz85 已提交
193
M
Example clean up.  
Mr.doob 已提交
194 
				sizes[ i ] = 10 * ( 1 + Math.sin( 0.1 * i + time ) );
Z
Add BufferGeometry + Custom Attributes + Particles example.  
zz85 已提交
195 196 197 198 199 200 201 202 203 204 205 206 207 

			}

			geometry.attributes.size.needsUpdate = true;

			renderer.render( scene, camera );

		}

	</script>

</body>
</html>