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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - Mesh Spray</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 {
				font-family: Monospace;
				background-color: #000;
				color: #fff;
				margin: 0 0 0 0;
				padding: 0 0 0 0;
				border: none;
				cursor: default;
			}
			#info {
				color: #fff;
				position: absolute;
				top: 10px;
				width: 100%;
				text-align: center;
				z-index: 100;
				display:block;
			}
			#info a {
				color: #f00;
				font-weight: bold;
				text-decoration: underline;
				cursor: pointer
			}
			#glFullscreen {
				width: 100%;
				height: 100vh;
				min-width: 640px;
				min-height: 360px;
				position: relative;
				overflow: hidden;
				z-index: 0;
			}
			#example {
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				background-color: #000000;
			}
			#feedback {
				color: darkorange;
			}
			#dat {
				user-select: none;
				position: absolute;
				left: 0;
				top: 0;
				z-Index: 200;
			}
		</style>

	</head>

	<body>
	<div id="glFullscreen">
		<canvas id="example"></canvas>
	</div>
	<div id="dat">

	</div>
	<div id="info">
		<a href="http://threejs.org" target="_blank">three.js</a> - Mesh Spray
		<div id="feedback"></div>
	</div>

		<script src="js/Detector.js"></script>
		<script src="../build/three.js"></script>
		<script src="js/controls/TrackballControls.js"></script>
		<script src="js/libs/dat.gui.min.js"></script>

		<script src="js/loaders/LoaderSupport.js"></script>

		<script>

			'use strict';

			var MeshSpray = (function () {

				var Validator = THREE.LoaderSupport.Validator;
				var ConsoleLogger = THREE.LoaderSupport.ConsoleLogger;

				MeshSpray.prototype = Object.create( THREE.LoaderSupport.LoaderBase.prototype );
				MeshSpray.prototype.constructor = MeshSpray;

				function MeshSpray( manager, logger ) {
					THREE.LoaderSupport.LoaderBase.call( this, manager, logger );
					this.workerSupport = null;
					this.logger = new ConsoleLogger();
				};

				MeshSpray.prototype.run = function ( prepData, workerSupportExternal ) {

					if ( Validator.isValid( workerSupportExternal ) ) {

						this.workerSupport = workerSupportExternal;
						this.logger = workerSupportExternal.logger;

					} else {

						this.workerSupport = Validator.verifyInput( this.workerSupport, new THREE.LoaderSupport.WorkerSupport() );

					}

					this.logger.logTimeStart( 'MeshSpray' );

					this._applyPrepData( prepData );

					var scope = this;
					var scopeBuilderFunc = function ( payload ) {
						var meshes = scope.builder.processPayload( payload );
						var mesh;
						for ( var i in meshes ) {
							mesh = meshes[ i ];
							scope.loaderRootNode.add( mesh );
						}
					};
					var scopeFuncComplete = function ( message ) {
						var callback = scope.callbacks.onLoad;
						if ( Validator.isValid( callback ) ) callback(
							{
								detail: {
									loaderRootNode: scope.loaderRootNode,
									modelName: scope.modelName,
									instanceNo: scope.instanceNo
								}
							}
						);
						scope.logger.logTimeEnd( 'MeshSpray' );
					};

					var buildCode = function ( funcBuildObject, funcBuildSingelton ) {
						var workerCode = '';
						workerCode += '/**\n';
						workerCode += '  * This code was constructed by MeshSpray buildCode.\n';
						workerCode += '  */\n\n';
						workerCode += funcBuildSingelton( 'Parser', 'Parser', Parser );

						return workerCode;
					};
					var libs2Load = [ 'build/three.min.js' ];
					this.workerSupport.validate( buildCode, false, libs2Load, '../' );
					this.workerSupport.setCallbacks( scopeBuilderFunc, scopeFuncComplete );
					this.workerSupport.run(
						{
							params: {
								dimension: prepData.dimension,
								quantity: prepData.quantity,
								globalObjectCount: prepData.globalObjectCount
							},
							materials: {
								serializedMaterials: this.builder.getMaterialsJSON()
							},
							logger: {
								debug: this.logger.debug,
								enabled: this.logger.enabled
							},
							data: {
								input: null,
								options: null
							}
						}
					);
				};

				var Parser  = ( function () {

					function Parser( logger ) {
						this.sizeFactor = 0.5;
						this.localOffsetFactor = 1.0;
						this.globalObjectCount = 0;
						this.debug = false;
						this.dimension = 200;
						this.quantity = 1;
						this.callbackBuilder = null;
						this.logger = logger;
						this.serializedMaterials = null;
					};

					Parser.prototype.parse = function () {
						var baseTriangle = [ 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 0.0, -1.0, 1.0 ];
						var vertices = [];
						var colors = [];
						var normals = [];
						var uvs = [];

						var dimensionHalf = this.dimension / 2;
						var fixedOffsetX;
						var fixedOffsetY;
						var fixedOffsetZ;
						var s, t;
						// complete triagle
						var sizeVaring = this.sizeFactor * Math.random();
						// local coords offset
						var localOffsetFactor = this.localOffsetFactor;

						for ( var i = 0; i < this.quantity; i++ ) {
							sizeVaring = this.sizeFactor * Math.random();

							s = 2 * Math.PI * Math.random();
							t = Math.PI * Math.random();

							fixedOffsetX = dimensionHalf * Math.random() * Math.cos( s ) * Math.sin( t );
							fixedOffsetY = dimensionHalf * Math.random() * Math.sin( s ) * Math.sin( t );
							fixedOffsetZ = dimensionHalf * Math.random() * Math.cos( t );
							for ( var j = 0; j < baseTriangle.length; j += 3 ) {
								vertices.push( baseTriangle[ j ] * sizeVaring + localOffsetFactor * Math.random() + fixedOffsetX );
								vertices.push( baseTriangle[ j + 1 ] * sizeVaring + localOffsetFactor * Math.random() + fixedOffsetY );
								vertices.push( baseTriangle[ j + 2 ] * sizeVaring + localOffsetFactor * Math.random() + fixedOffsetZ );
								colors.push( Math.random() );
								colors.push( Math.random() );
								colors.push( Math.random() );
							}
						}

						var absoluteVertexCount = vertices.length;
						var absoluteColorCount = colors.length;
						var absoluteNormalCount = 0;
						var absoluteUvCount = 0;

						var vertexFA = new Float32Array( absoluteVertexCount );
						var colorFA = ( absoluteColorCount > 0 ) ? new Float32Array( absoluteColorCount ) : null;
						var normalFA = ( absoluteNormalCount > 0 ) ? new Float32Array( absoluteNormalCount ) : null;
						var uvFA = ( absoluteUvCount > 0 ) ? new Float32Array( absoluteUvCount ) : null;

						vertexFA.set( vertices, 0 );
						if ( colorFA ) {

							colorFA.set( colors, 0 );

						}

						if ( normalFA ) {

							normalFA.set( normals, 0 );

						}
						if ( uvFA ) {

							uvFA.set( uvs, 0 );

						}

						/*
						 * This demonstrates the usage of embedded three.js in the worker blob and
						 * the serialization of materials back to the Builder outside the worker.
						 *
						 * This is not the most effective way, but outlining possibilities
						 */
						var materialName = 'vertexColorMaterial_double';
						var vertexColorMaterialJson = this.serializedMaterials[ 'vertexColorMaterial' ];
						var loader = new THREE.MaterialLoader();

						var vertexColorMaterialDouble = loader.parse( vertexColorMaterialJson );
						vertexColorMaterialDouble.name = materialName;
						vertexColorMaterialDouble.side = THREE.DoubleSide;

						var newSerializedMaterials = {};
						newSerializedMaterials[ materialName ] = vertexColorMaterialDouble.toJSON();
						var payload = {
							cmd: 'materialData',
							materials: {
								serializedMaterials: newSerializedMaterials
							}
						};
						this.callbackBuilder( payload );

						this.globalObjectCount++;
						this.callbackBuilder(
							{
								cmd: 'meshData',
								progress: {
									numericalValue: 1.0
								},
								params: {
									meshName: 'Gen' + this.globalObjectCount
								},
								materials: {
									multiMaterial: false,
									materialNames: [ materialName ],
									materialGroups: []
								},
								buffers: {
									vertices: vertexFA,
									colors: colorFA,
									normals: normalFA,
									uvs: uvFA
								}
							},
							[ vertexFA.buffer ],
							colorFA !== null ? [ colorFA.buffer ] : null,
							normalFA !== null ? [ normalFA.buffer ] : null,
							uvFA !== null ? [ uvFA.buffer ] : null
						);

						this.logger.logInfo( 'Global output object count: ' + this.globalObjectCount );
					};

					return Parser;
				})();


				Parser.prototype.setSerializedMaterials = function ( serializedMaterials ) {
					if ( Validator.isValid( serializedMaterials ) ) {

						this.serializedMaterials = serializedMaterials;

					}
				};

				return MeshSpray;

			})();

			var MeshSprayApp = (function () {

				function MeshSprayApp( elementToBindTo ) {
					this.renderer = null;
					this.canvas = elementToBindTo;
					this.aspectRatio = 1;
					this.recalcAspectRatio();

					this.scene = null;
					this.cameraDefaults = {
						posCamera: new THREE.Vector3( 500.0, 500.0, 1000.0 ),
						posCameraTarget: new THREE.Vector3( 0, 0, 0 ),
						near: 0.1,
						far: 10000,
						fov: 45
					};
					this.camera = null;
					this.cameraTarget = this.cameraDefaults.posCameraTarget;

					this.controls = null;

					this.cube = null;
					this.pivot = null;
				}

				MeshSprayApp.prototype.initGL = function () {
					this.renderer = new THREE.WebGLRenderer( {
						canvas: this.canvas,
						antialias: true,
						autoClear: true
					} );
					this.renderer.setClearColor( 0x050505 );

					this.scene = new THREE.Scene();

					this.camera = new THREE.PerspectiveCamera( this.cameraDefaults.fov, this.aspectRatio, this.cameraDefaults.near, this.cameraDefaults.far );
					this.resetCamera();
					this.controls = new THREE.TrackballControls( this.camera, this.renderer.domElement );

					var ambientLight = new THREE.AmbientLight( 0x404040 );
					var directionalLight1 = new THREE.DirectionalLight( 0xC0C090 );
					var directionalLight2 = new THREE.DirectionalLight( 0xC0C090 );

					directionalLight1.position.set( -100, -50, 100 );
					directionalLight2.position.set( 100, 50, -100 );

					this.scene.add( directionalLight1 );
					this.scene.add( directionalLight2 );
					this.scene.add( ambientLight );

					var helper = new THREE.GridHelper( 1200, 60, 0xFF4444, 0x404040 );
					this.scene.add( helper );

					var geometry = new THREE.BoxGeometry( 10, 10, 10 );
					var material = new THREE.MeshNormalMaterial();
					this.cube = new THREE.Mesh( geometry, material );
					this.cube.position.set( 0, 0, 0 );
					this.scene.add( this.cube );

					this.pivot = new THREE.Object3D();
					this.pivot.name = 'Pivot';
					this.scene.add( this.pivot );
				};

				MeshSprayApp.prototype.initContent = function () {
					var maxQueueSize = 1024;
					var maxWebWorkers = 4;
					var radius = 640;
					var logger = new THREE.LoaderSupport.ConsoleLogger( false );
					this.workerDirector = new THREE.LoaderSupport.WorkerDirector( MeshSpray, logger );
					this.workerDirector.setCrossOrigin( 'anonymous' );

					var scope = this;
					var callbackOnLoad = function ( event ) {
						logger.logInfo( 'Worker #' + event.detail.instanceNo + ': Completed loading. (#' + scope.workerDirector.objectsCompleted + ')' );
					};
					var reportProgress = function( event ) {
						document.getElementById( 'feedback' ).innerHTML = event.detail.text;
						logger.logInfo( event.detail.text );
					};
					var callbackMeshAlter = function ( event ) {
						var override = new THREE.LoaderSupport.LoadedMeshUserOverride( false, true );

						event.detail.side = THREE.DoubleSide;
						var mesh = new THREE.Mesh( event.detail.bufferGeometry, event.detail.material );
						mesh.name = event.detail.meshName;
						override.addMesh( mesh );

						return override;
					};


					var callbacks = new THREE.LoaderSupport.Callbacks();
					callbacks.setCallbackOnMeshAlter( callbackMeshAlter );
					callbacks.setCallbackOnLoad( callbackOnLoad );
					callbacks.setCallbackOnProgress( reportProgress );
					this.workerDirector.prepareWorkers( callbacks, maxQueueSize, maxWebWorkers );

					var prepData;
					var pivot;
					var s, t, r, x, y, z;
					var globalObjectCount = 0;
					for ( var i = 0; i < maxQueueSize; i++ ) {
						prepData = new THREE.LoaderSupport.PrepData( 'Triangles_' + i );

						pivot = new THREE.Object3D();
						s = 2 * Math.PI * Math.random();
						t = Math.PI * Math.random();
						r = radius * Math.random();
						x = r * Math.cos( s ) * Math.sin( t );
						y = r * Math.sin( s ) * Math.sin( t );
						z = r * Math.cos( t );
						pivot.position.set( x, y, z );
						this.scene.add( pivot );
						prepData.setStreamMeshesTo( pivot );

						prepData.quantity = 8192;
						prepData.dimension = Math.max( Math.random() * 500, 100 );
						prepData.globalObjectCount = globalObjectCount++;

						this.workerDirector.enqueueForRun( prepData );
					}
					this.workerDirector.processQueue();
				};

				MeshSprayApp.prototype.resizeDisplayGL = function () {
					this.controls.handleResize();

					this.recalcAspectRatio();
					this.renderer.setSize( this.canvas.offsetWidth, this.canvas.offsetHeight, false );

					this.updateCamera();
				};

				MeshSprayApp.prototype.recalcAspectRatio = function () {
					this.aspectRatio = ( this.canvas.offsetHeight === 0 ) ? 1 : this.canvas.offsetWidth / this.canvas.offsetHeight;
				};

				MeshSprayApp.prototype.resetCamera = function () {
					this.camera.position.copy( this.cameraDefaults.posCamera );
					this.cameraTarget.copy( this.cameraDefaults.posCameraTarget );

					this.updateCamera();
				};

				MeshSprayApp.prototype.updateCamera = function () {
					this.camera.aspect = this.aspectRatio;
					this.camera.lookAt( this.cameraTarget );
					this.camera.updateProjectionMatrix();
				};

				MeshSprayApp.prototype.render = function () {
					if ( ! this.renderer.autoClear ) this.renderer.clear();

					this.controls.update();

					this.cube.rotation.x += 0.05;
					this.cube.rotation.y += 0.05;

					this.renderer.render( this.scene, this.camera );
				};

				return MeshSprayApp;

			})();

			var app = new MeshSprayApp( document.getElementById( 'example' ) );

			// init three.js example application
			var resizeWindow = function () {
				app.resizeDisplayGL();
			};

			var render = function () {
				requestAnimationFrame( render );
				app.render();
			};

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

			console.log( 'Starting initialisation phase...' );
			app.initGL();
			app.resizeDisplayGL();
			app.initContent();

			render();

		</script>
	</body>
</html>