javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - multiple elements with text</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			* {
				box-sizing: border-box;
				-moz-box-sizing: border-box;
			}

			body {
				color: #000;
				font-family: Monospace;
				font-size: 13px;

				background-color: #fff;
				margin: auto;
				padding: .5in;
				max-width: 7in;
				text-align: justify;
			}

			.view {
				width: 5in;
				height: 5in;
				margin: auto;
			}

			#c {
				position: fixed;
				left: 0px; top: 0px;
				width: 100%;
				height: 100%;
				background-color: #fff;
				z-index: -1;
			}

			#info {
				position: absolute;
				top: 0px; width: 6.5in;
				padding: 0px;
				text-align: center;
			}

			a {
				color: #0080ff;
			}

			.math {

				text-align: center;

			}

			.math-frac {

				display: inline-block;
				vertical-align: middle;

			}

			.math-num {

				display: block;

			}

			.math-denom {

				display: block;
				border-top: 1px solid;

			}

			.math-sqrt {

				display: inline-block;
				transform: scale(1, 1.3);

			}

			.math-sqrt-stem {

				display: inline-block;
				border-top: 1px solid;
				margin-top: 5px;

			}

		</style>
	</head>
	<body>

		<canvas id="c"></canvas>

		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - multiple elements with text - webgl</div>

		<script src="../build/three.js"></script>
		<script src="js/controls/OrbitControls.js"></script>

		<script src="js/WebGL.js"></script>

		<script>

			if ( WEBGL.isWebGLAvailable() === false ) {

				document.body.appendChild( WEBGL.getWebGLErrorMessage() );

			}

			var scenes = [], views, t, canvas, renderer;

			window.onload = init;

			function init() {

				var balls = 20;
				var size = .25;

				var colors = [
					'rgb(0,127,255)', 'rgb(255,0,0)', 'rgb(0,255,0)', 'rgb(0,255,255)',
					'rgb(255,0,255)', 'rgb(255,0,127)', 'rgb(255,255,0)', 'rgb(0,255,127)'
				];

				canvas = document.getElementById( 'c' );

				renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );

				views = document.querySelectorAll( '.view' );

				for ( var n = 0 ; n < views.length ; n++ ) {

					var scene = new THREE.Scene();
					scene.background = new THREE.Color( 0xffffff );

					var geometry0 = new THREE.BufferGeometry();
					var geometry1 = new THREE.BufferGeometry();

					var vertices = [];

					if ( views[n].lattice ) {

						var range = balls / 2;
						for ( var i = -range ; i <= range ; i++ ) {

							for ( var j = -range ; j <= range ; j++ ) {

								for ( var k = -range ; k <= range ; k++ ) {

									vertices.push( i, j, k );

								}

							}

						}

					} else {

						for ( var m = 0 ; m < Math.pow( balls, 3 ) ; m++ ) {

							var i = balls * Math.random() - balls / 2;
							var j = balls * Math.random() - balls / 2;
							var k = balls * Math.random() - balls / 2;

							vertices.push( i, j, k );

						}

					}

					geometry0.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
					geometry1.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices.slice(), 3 ) );

					var index = Math.floor( colors.length * Math.random() );

					var canvas2 = document.createElement( 'canvas' );
					canvas2.width = 128;
					canvas2.height = 128;
					var context = canvas2.getContext( '2d' );
					context.arc( 64, 64, 64, 0, 2 * Math.PI );
					context.fillStyle = colors[ index ];
					context.fill();
					var texture = new THREE.CanvasTexture( canvas2 );

					var material = new THREE.PointsMaterial( { size: size, map: texture, transparent: true, alphaTest: 0.1 } );

					scene.add( new THREE.Points( geometry0, material ) );

					scene.userData.view = views[ n ];
					scene.userData.geometry1 = geometry1;

					var camera = new THREE.PerspectiveCamera( 75, 1, 0.1, 100 );
					camera.position.set( 0, 0, 1.2 * balls );
					scene.userData.camera = camera;

					var controls = new THREE.OrbitControls( camera, views[ n ] );
					scene.userData.controls = controls;

					scenes.push( scene );

				}

				t = 0;
				animate();

			}

			function updateSize() {

				var width = canvas.clientWidth;
				var height = canvas.clientHeight;

				if ( canvas.width !== width || canvas.height != height ) {

					renderer.setSize( width, height, false );

				}

			}

			function animate() {

				render();
				requestAnimationFrame( animate );

			}

			function render() {

				updateSize();

				renderer.setClearColor( 0xffffff );
				renderer.setScissorTest( false );
				renderer.clear();

				renderer.setClearColor( 0x000000 );
				renderer.setScissorTest( true );

				scenes.forEach( function( scene ) {

					var rect = scene.userData.view.getBoundingClientRect();
					// check if it's offscreen. If so skip it
					if ( rect.bottom < 0 || rect.top  > renderer.domElement.clientHeight ||
						 rect.right  < 0 || rect.left > renderer.domElement.clientWidth ) {
						return;  // it's off screen
					}
					// set the viewport
					var width  = rect.right - rect.left;
					var height = rect.bottom - rect.top;
					var left   = rect.left;
					var top    = rect.top;

					renderer.setViewport( left, top, width, height );
					renderer.setScissor( left, top, width, height );

					renderer.render( scene, scene.userData.camera );

					var points = scene.children[ 0 ];
					var position = points.geometry.attributes.position;

					var point = new THREE.Vector3();
					var offset = new THREE.Vector3();

					for ( var i = 0 ; i < position.count; i ++ ) {

						point.fromBufferAttribute( scene.userData.geometry1.attributes.position, i );

						scene.userData.view.displacement( point.x, point.y, point.z, t / 5, offset );

						position.setXYZ( i, point.x + offset.x, point.y + offset.y, point.z + offset.z );

					}

					position.needsUpdate = true;

				} );

				t ++;

			}

		</script>

		<p>Sound waves whose geometry is determined by a single dimension, plane waves, obey the wave equation</p>

		<!-- css math formatting inspired by http://mathquill.com/mathquill/mathquill.css -->

		<div class="math">

			<span class="math-frac">
				<span class="math-num">
					&part;<sup>2</sup><i>u</i>
				</span>
				<span class="math-denom">
					&part;<i>r</i><sup>2</sup>
				</span>
			</span>

			&minus;

			<span class="math-frac">
				<span class="math-num">
					1<sup></sup> <!-- sup for vertical alignment -->
				</span>
				<span class="math-denom">
					<i>c</i><sup>2</sup>
				</span>
			</span>

			<span class="math-frac">
				<span class="math-num">
					&part;<sup>2</sup><i>u</i>
				</span>
				<span class="math-denom">
					&part;<i>t</i><sup>2</sup>
				</span>
			</span>

			=&nbsp;0

		</div>

		<p>where <i>c</i> designates the speed of sound in the medium. The monochromatic solution for plane waves will be taken to be</p>

		<div class="math">

			<i>u</i>(<i>r</i>,<i>t</i>)&thinsp;=&nbsp;sin(<i>k</i><i>r</i>&thinsp;&plusmn;&thinsp;&omega;<i>t</i>)

		</div>

		<p>where &omega; is the frequency and <i>k</i>=&omega;/<i>c</i> is the wave number. The sign chosen in the argument determines the direction of movement of the waves.</p>

		<p>Here is a plane wave moving on a three-dimensional lattice of atoms:</p>

		<div class="view">

		<script>

			var parent = document.scripts[ document.scripts.length - 1 ].parentNode;

			parent.displacement = function( x, y, z, t, target ) {

				return target.set( Math.sin( x - t ), 0, 0 );

			};

			parent.lattice = true;

		</script>

		</div>

		<p>Here is a plane wave moving through a three-dimensional random distribution of molecules:</p>

		<div class="view">

		<script>

			var parent = document.scripts[ document.scripts.length - 1 ].parentNode;

			parent.displacement = function( x, y, z, t, target ) {

				return target.set( Math.sin( x - t ), 0, 0 );

			};

			parent.lattice = false;

		</script>

		</div>

		<p>Sound waves whose geometry is determined by two dimensions, cylindrical waves, obey the wave equation</p>

		<div class="math">

			<span class="math-frac">
				<span class="math-num">
					&part;<sup>2</sup><i>u</i>
				</span>
				<span class="math-denom">
					&part;<i>r</i><sup>2</sup>
				</span>
			</span>

			&plus;

			<span class="math-frac">
				<span class="math-num">
					1
				</span>
				<span class="math-denom">
					<i>r</i>
				</span>
			</span>

			<span class="math-frac">
				<span class="math-num">
					&part;<i>u</i>
				</span>
				<span class="math-denom">
					&part;<i>r</i>
				</span>
			</span>

			&minus;

			<span class="math-frac">
				<span class="math-num">
					1<sup></sup> <!-- sup for vertical alignment -->
				</span>
				<span class="math-denom">
					<i>c</i><sup>2</sup>
				</span>
			</span>

			<span class="math-frac">
				<span class="math-num">
					&part;<sup>2</sup><i>u</i>
				</span>
				<span class="math-denom">
					&part;<i>t</i><sup>2</sup>
				</span>
			</span>

			=&nbsp;0

		</div>

		<p>The monochromatic solution for cylindrical sound waves will be taken to be</p>

		<div class="math">

			<i>u</i>(<i>r</i>,<i>t</i>)&thinsp;=

			<span class="math-frac">
				<span class="math-num">
					sin(<i>k</i><i>r</i>&thinsp;&plusmn;&thinsp;&omega;<i>t</i>)
				</span>
				<span class="math-denom">
					<span class="math-sqrt">&radic;</span><span class="math-sqrt-stem"><i>r</i></span>
				</span>
			</span>

		</div>

		<p>Here is a cylindrical wave moving on a three-dimensional lattice of atoms:</p>

		<div class="view">

		<script>

			var parent = document.scripts[ document.scripts.length - 1 ].parentNode;

			parent.displacement = function( x, y, z, t, target ) {

				if ( x * x + y * y < 0.01 ) {

					return target.set( 0, 0, 0 );

				} else {

					var rho = Math.sqrt( x * x + y * y );
					var phi = Math.atan2( y, x );

					return target.set( 1.5 * Math.cos( phi ) * Math.sin( rho - t ) / Math.sqrt( rho ), 1.5 * Math.sin( phi ) * Math.sin( rho - t ) / Math.sqrt( rho ), 0 );

				}

			};

			parent.lattice = true;

		</script>

		</div>

		<p>Here is a cylindrical wave moving through a three-dimensional random distribution of molecules:</p>

		<div class="view">

		<script>

			var parent = document.scripts[ document.scripts.length - 1 ].parentNode;

			parent.displacement = function( x, y, z, t, target ) {

				if ( x * x + y * y < 0.01 ) {

					return target.set( 0, 0, 0 );

				} else {

					var rho = Math.sqrt( x * x + y * y );
					var phi = Math.atan2( y, x );

					return target.set( 1.5 * Math.cos( phi ) * Math.sin( rho - t ) / Math.sqrt( rho ), 1.5 * Math.sin( phi ) * Math.sin( rho - t ) / Math.sqrt( rho ), 0 );

				}

			};

			parent.lattice = false;

		</script>

		</div>

		<p>Sound waves whose geometry is determined by three dimensions, spherical waves, obey the wave equation</p>

		<div class="math">

			<span class="math-frac">
				<span class="math-num">
					&part;<sup>2</sup><i>u</i>
				</span>
				<span class="math-denom">
					&part;<i>r</i><sup>2</sup>
				</span>
			</span>

			&plus;

			<span class="math-frac">
				<span class="math-num">
					2
				</span>
				<span class="math-denom">
					<i>r</i>
				</span>
			</span>

			<span class="math-frac">
				<span class="math-num">
					&part;<i>u</i>
				</span>
				<span class="math-denom">
					&part;<i>r</i>
				</span>
			</span>

			&minus;

			<span class="math-frac">
				<span class="math-num">
					1<sup></sup> <!-- sup for vertical alignment -->
				</span>
				<span class="math-denom">
					<i>c</i><sup>2</sup>
				</span>
			</span>

			<span class="math-frac">
				<span class="math-num">
					&part;<sup>2</sup><i>u</i>
				</span>
				<span class="math-denom">
					&part;<i>t</i><sup>2</sup>
				</span>
			</span>

			=&nbsp;0

		</div>

		<p>The monochromatic solution for spherical sound waves will be taken to be</p>

		<div class="math">

			<i>u</i>(<i>r</i>,<i>t</i>)&thinsp;=

			<span class="math-frac">
				<span class="math-num">
					sin(<i>k</i><i>r</i>&thinsp;&plusmn;&thinsp;&omega;<i>t</i>)
				</span>
				<span class="math-denom">
					<i>r</i>
				</span>
			</span>

		</div>

		<p>Here is a spherical wave moving on a three-dimensional lattice of atoms:</p>

		<div class="view">

		<script>

			var parent = document.scripts[ document.scripts.length - 1 ].parentNode;

			parent.displacement = function( x, y, z, t, target ) {

				if ( x * x + y * y + z * z < 0.01 ) {

					return target.set( 0, 0, 0 );

				} else {

					var r = Math.sqrt( x * x + y * y + z * z );
					var theta = Math.acos( z / r );
					var phi = Math.atan2( y, x );

					return target.set( 3 * Math.cos( phi ) * Math.sin( theta ) * Math.sin( r - t ) / r , 3 * Math.sin( phi ) * Math.sin( theta ) * Math.sin( r - t ) / r , 3 * Math.cos( theta ) * Math.sin( r - t ) / r );

				}

			};

			parent.lattice = true;

		</script>

		</div>

		<p>Here is a spherical wave moving through a three-dimensional random distribution of molecules:</p>

		<div class="view">

		<script>

			var parent = document.scripts[ document.scripts.length - 1 ].parentNode;

			parent.displacement = function( x, y, z, t, target ) {

				if ( x * x + y * y + z * z < 0.01 ) {

					return target.set( 0, 0, 0 );

				} else {

					var r = Math.sqrt( x * x + y * y + z * z );
					var theta = Math.acos( z / r );
					var phi = Math.atan2( y, x );

					return target.set( 3 * Math.cos( phi ) * Math.sin( theta ) * Math.sin( r - t ) / r , 3 * Math.sin( phi ) * Math.sin( theta ) * Math.sin( r - t ) / r , 3 * Math.cos( theta ) * Math.sin( r - t ) / r );

				}
			};

			parent.lattice = false;

		</script>

		</div>

		<p>The mathematical description of sound waves can be carried to higher dimensions, but one needs to wait for Four.js and its higher-dimensional successors to attempt visualizations.</p>

	</body>
</html>