|
|
@@ -0,0 +1,247 @@
|
|
|
+<!doctype html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <title>three.js webgl - interactive particles</title>
|
|
|
+ <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 {
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ width: 100%;
|
|
|
+ padding: 5px;
|
|
|
+ font-family: Monospace;
|
|
|
+ font-size: 13px;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+
|
|
|
+ <body>
|
|
|
+ <div id="container"></div>
|
|
|
+ <div id="info"><a href="http://threejs.org" target="_blank">three.js</a> webgl - interactive - particles</div>
|
|
|
+
|
|
|
+ <script src="../build/three.min.js"></script>
|
|
|
+
|
|
|
+ <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 );
|
|
|
+
|
|
|
+ gl_PointSize = size * ( 300.0 / length( mvPosition.xyz ) );
|
|
|
+
|
|
|
+ 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 );
|
|
|
+
|
|
|
+ gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
|
|
|
+
|
|
|
+ if ( gl_FragColor.a < ALPHATEST ) discard;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ </script>
|
|
|
+
|
|
|
+
|
|
|
+ <script>
|
|
|
+
|
|
|
+ if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
|
|
+
|
|
|
+ var renderer, scene, camera, stats;
|
|
|
+
|
|
|
+ var particles, uniforms, attributes;
|
|
|
+
|
|
|
+ var PARTICLE_SIZE = 20;
|
|
|
+
|
|
|
+ var projector, raycaster, intersects;
|
|
|
+ var mouse = { x: 1, y: 1 }, INTERSECTED;
|
|
|
+ var vector = new THREE.Vector3();
|
|
|
+
|
|
|
+ init();
|
|
|
+ animate();
|
|
|
+
|
|
|
+ function init() {
|
|
|
+
|
|
|
+ container = document.getElementById( 'container' );
|
|
|
+
|
|
|
+ scene = new THREE.Scene();
|
|
|
+
|
|
|
+ camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
|
|
|
+ camera.position.z = 250;
|
|
|
+
|
|
|
+ //
|
|
|
+
|
|
|
+ attributes = {
|
|
|
+
|
|
|
+ size: { type: 'f', value: [] },
|
|
|
+ customColor: { type: 'c', value: [] }
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ uniforms = {
|
|
|
+
|
|
|
+ color: { type: "c", value: new THREE.Color( 0xffffff ) },
|
|
|
+ texture: { type: "t", value: THREE.ImageUtils.loadTexture( "textures/sprites/disc.png" ) }
|
|
|
+
|
|
|
+ };
|
|
|
+
|
|
|
+ var shaderMaterial = new THREE.ShaderMaterial( {
|
|
|
+
|
|
|
+ uniforms: uniforms,
|
|
|
+ attributes: attributes,
|
|
|
+ vertexShader: document.getElementById( 'vertexshader' ).textContent,
|
|
|
+ fragmentShader: document.getElementById( 'fragmentshader' ).textContent,
|
|
|
+
|
|
|
+ alphaTest: 0.9,
|
|
|
+
|
|
|
+ } );
|
|
|
+
|
|
|
+ var geometry = new THREE.BoxGeometry( 200, 200, 200, 16, 16, 16 );
|
|
|
+
|
|
|
+ particles = new THREE.PointCloud( geometry, shaderMaterial );
|
|
|
+
|
|
|
+ var values_size = attributes.size.value;
|
|
|
+ var values_color = attributes.customColor.value;
|
|
|
+
|
|
|
+ var vertices = particles.geometry.vertices;
|
|
|
+
|
|
|
+ for( var v = 0, vl = vertices.length; v < vl; v++ ) {
|
|
|
+
|
|
|
+ values_size[ v ] = PARTICLE_SIZE * 0.5;
|
|
|
+
|
|
|
+ values_color[ v ] = new THREE.Color().setHSL( 0.01 + 0.1 * ( v / vl ), 1.0, 0.5 );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ scene.add( particles );
|
|
|
+
|
|
|
+ //
|
|
|
+
|
|
|
+ renderer = new THREE.WebGLRenderer();
|
|
|
+ renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
+
|
|
|
+ container.appendChild( renderer.domElement );
|
|
|
+
|
|
|
+ //
|
|
|
+
|
|
|
+ projector = new THREE.Projector();
|
|
|
+ raycaster = new THREE.Raycaster();
|
|
|
+
|
|
|
+ //
|
|
|
+
|
|
|
+ stats = new Stats();
|
|
|
+ stats.domElement.style.position = 'absolute';
|
|
|
+ stats.domElement.style.top = '0px';
|
|
|
+ container.appendChild( stats.domElement );
|
|
|
+
|
|
|
+ //
|
|
|
+
|
|
|
+ window.addEventListener( 'resize', onWindowResize, false );
|
|
|
+ document.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ function onDocumentMouseMove( event ) {
|
|
|
+
|
|
|
+ event.preventDefault();
|
|
|
+
|
|
|
+ mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
|
|
|
+ mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ 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() { ref: http://dl.dropboxusercontent.com/u/4253186/three/examples/webgl_interactive_particles.html
|
|
|
+
|
|
|
+ particles.rotation.x += 0.0005;
|
|
|
+ particles.rotation.y += 0.001;
|
|
|
+
|
|
|
+ vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
|
|
|
+
|
|
|
+ projector.unprojectVector( vector, camera );
|
|
|
+
|
|
|
+ raycaster.ray.set( camera.position, vector.sub( camera.position ).normalize() );
|
|
|
+
|
|
|
+ intersects = raycaster.intersectObject( particles );
|
|
|
+
|
|
|
+ if ( intersects.length > 0 ) {
|
|
|
+
|
|
|
+ if ( INTERSECTED != intersects[ 0 ].index ) {
|
|
|
+
|
|
|
+ attributes.size.value[ INTERSECTED ] = PARTICLE_SIZE;
|
|
|
+
|
|
|
+ INTERSECTED = intersects[ 0 ].index;
|
|
|
+
|
|
|
+ attributes.size.value[ INTERSECTED ] = PARTICLE_SIZE * 1.25;
|
|
|
+ attributes.size.needsUpdate = true;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ } else if ( INTERSECTED !== null ) {
|
|
|
+
|
|
|
+ attributes.size.value[ INTERSECTED ] = PARTICLE_SIZE;
|
|
|
+ attributes.size.needsUpdate = true;
|
|
|
+ INTERSECTED = null;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ renderer.render( scene, camera );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ </script>
|
|
|
+
|
|
|
+ </body>
|
|
|
+
|
|
|
+</html>
|
WestLangley