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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - WWOBJLoader2</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;
			}
			#fileUploadInput {
				display: none;
			}
		</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" rel="noopener">three.js</a> - OBJLoader2 direct loader test
			<div id="feedback"></div>
		</div>
		<input id="fileUploadInput" type="file" name="files[]" multiple accept=".obj,.mtl" />

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

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

			'use strict';

			var WWOBJLoader2Example = (function () {

				var Validator = THREE.LoaderSupport.Validator;

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

					this.scene = null;
					this.cameraDefaults = {
						posCamera: new THREE.Vector3( 0.0, 175.0, 500.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.flatShading = false;
					this.doubleSide = false;

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

					// Check for the various File API support.
					this.fileApiAvailable = true;
					if ( window.File && window.FileReader && window.FileList && window.Blob ) {

						console.log( 'File API is supported! Enabling all features.' );

					} else {

						this.fileApiAvailable = false;
						console.warn( 'File API is not supported! Disabling file loading.' );

					}
					this.streamMeshes = true;
				}

				WWOBJLoader2Example.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 );
				};

				WWOBJLoader2Example.prototype.useParseSync = function () {
					var modelName = 'female02';
					this._reportProgress( 'Loading: ' + modelName );

					var scope = this;
					var objLoader = new THREE.OBJLoader2();
					var onLoadMtl = function ( materials ) {
						objLoader.setModelName( modelName );
						objLoader.setMaterials( materials );

						var fileLoader = new THREE.FileLoader();
						fileLoader.setResponseType( 'arraybuffer' );
						fileLoader.load( 'obj/female02/female02.obj',
							function ( content ) {
								var local = new THREE.Object3D();
								local.name = 'Pivot_female02';
								local.position.set( 75, 0, 0 );
								scope.pivot.add( local );
								local.add( objLoader.parse( content ) );

								scope._reportProgress( 'Loading complete: ' + modelName );
							}
						);
					};
					objLoader.loadMtl( 'obj/female02/female02.mtl', 'female02.mtl', null, onLoadMtl );
				};


				WWOBJLoader2Example.prototype.useParseAsync = function () {
					var modelName = 'female02_vertex' ;
					this._reportProgress( 'Loading: ' + modelName );

					var callbackOnLoad = function ( loaderRootNode, modelName, instanceNo ) {
						var local = new THREE.Object3D();
						local.name = 'Pivot_female02_vertex';
						local.position.set( -75, 0, 0 );
						scope.pivot.add( local );
						local.add( loaderRootNode );

						scope._reportProgress( 'Loading complete: ' + modelName );
					};

					var scope = this;
					var objLoader = new THREE.OBJLoader2();
					objLoader.setModelName( modelName );

					var fileLoader = new THREE.FileLoader();
					fileLoader.setResponseType( 'arraybuffer' );
					fileLoader.load( 'obj/female02/female02_vertex_colors.obj',
						function ( content ) {
							objLoader.parseAsync( content, callbackOnLoad );
							scope._reportProgress( 'Loading complete: ' + modelName );
						}
					);
				};

				WWOBJLoader2Example.prototype.useLoadSync = function () {
					var modelName = 'male02';
					this._reportProgress( 'Loading: ' + modelName );

					var scope = this;
					var objLoader = new THREE.OBJLoader2();
					var callbackOnLoad = function ( loaderRootNode, modelName, instanceNo ) {
						var local = new THREE.Object3D();
						local.name = 'Pivot_male02';
						local.position.set( 0, 0, -75 );
						scope.pivot.add( local );
						local.add( loaderRootNode );

						scope._reportProgress( 'Loading complete: ' + modelName );
					};

					var onLoadMtl = function ( materials ) {
						objLoader.setModelName( modelName );
						objLoader.setMaterials( materials );
						objLoader.load( 'obj/male02/male02.obj', callbackOnLoad, null, null, null, false );
					};
					objLoader.loadMtl( 'obj/male02/male02.mtl', 'female02.mtl', null, onLoadMtl );
				};

				WWOBJLoader2Example.prototype.useLoadAsync = function () {
					var modelName = 'WaltHead';
					this._reportProgress( 'Loading: ' + modelName );

					var scope = this;
					var objLoader = new THREE.OBJLoader2();
					var callbackOnLoad = function ( loaderRootNode, modelName, instanceNo ) {
						var local = new THREE.Object3D();
						local.name = 'Pivot_WaltHead';
						local.position.set( -125, 50, 0 );
						var scale = 0.5;
						local.scale.set( scale, scale, scale );
						scope.pivot.add( local );
						local.add( loaderRootNode );

						scope._reportProgress( 'Loading complete: ' + modelName );
					};

					var onLoadMtl = function ( materials ) {
						objLoader.setModelName( modelName );
						objLoader.setMaterials( materials );
						objLoader.load( 'obj/walt/WaltHead.obj', callbackOnLoad, null, null, null, true );
					};
					objLoader.loadMtl( 'obj/walt//WaltHead.mtl', 'WaltHead.mtl', null, onLoadMtl );
				};

				WWOBJLoader2Example.prototype.useRunSync = function () {
					var scope = this;
					var callbackOnLoad = function ( loaderRootNode, modelName, instanceNo ) {
						scope._reportProgress( 'Loading complete: ' + modelName );
					};

					var prepData = new THREE.LoaderSupport.PrepData( 'cerberus' );
					var local = new THREE.Object3D();
					local.position.set( 0, 0, 100 );
					local.scale.set( 50.0, 50.0, 50.0 );
					this.pivot.add( local );
					prepData.setStreamMeshesTo( local );
					prepData.addResource( new THREE.LoaderSupport.ResourceDescriptor( 'models/obj/cerberus/Cerberus.obj', 'OBJ' ) );
					var callbacks = prepData.getCallbacks();
					callbacks.setCallbackOnProgress( this._reportProgress );
					callbacks.setCallbackOnLoad( callbackOnLoad );

					var objLoader = new THREE.OBJLoader2();
					objLoader.run( prepData );
				};

				WWOBJLoader2Example.prototype.useRunAsyncMeshAlter = function () {
					var scope = this;
					var callbackOnLoad = function ( loaderRootNode, modelName, instanceNo ) {
						scope._reportProgress( 'Loading complete: ' + modelName );
					};

					var prepData = new THREE.LoaderSupport.PrepData( 'vive-controller' );
					var local = new THREE.Object3D();
					local.position.set( 125, 50, 0 );
					local.name = 'Pivot_vive-controller';
					this.pivot.add( local );
					prepData.setStreamMeshesTo( local );
					prepData.addResource( new THREE.LoaderSupport.ResourceDescriptor( 'models/obj/vive-controller/vr_controller_vive_1_5.obj', 'OBJ' ) );
					prepData.setUseAsync( true );
					var callbacks = prepData.getCallbacks();
					var callbackMeshAlter = function ( name, bufferGeometry, material ) {
						var override = new THREE.LoaderSupport.LoadedMeshUserOverride( false, true );

						var mesh = new THREE.Mesh( bufferGeometry, material );
						var scale = 200.0;
						mesh.scale.set( scale, scale, scale );
						mesh.name = name;
						var helper = new THREE.VertexNormalsHelper( mesh, 2, 0x00ff00, 1 );
						helper.name = 'VertexNormalsHelper';

						override.addMesh( mesh );
						override.addMesh( helper );

						return override;
					};
					callbacks.setCallbackOnMeshAlter( callbackMeshAlter );
					callbacks.setCallbackOnProgress( this._reportProgress );
					callbacks.setCallbackOnLoad( callbackOnLoad );

					var objLoader = new THREE.OBJLoader2();
					objLoader.run( prepData );
				};

				WWOBJLoader2Example.prototype.finalize = function () {
					this._reportProgress( '' );
				};

				WWOBJLoader2Example.prototype._reportProgress = function( content, modelName, instanceNo ) {
					console.log( 'Progress: ' + content );
					document.getElementById( 'feedback' ).innerHTML = Validator.isValid( content ) ? content : '';
				};

				WWOBJLoader2Example.prototype._handleFileSelect = function ( event, pathTexture ) {
					var fileObj = null;
					var fileMtl = null;
					var files = event.target.files;

					for ( var i = 0, file; file = files[ i ]; i++) {

						if ( file.name.indexOf( '\.obj' ) > 0 && fileObj === null ) {
							fileObj = file;
						}

						if ( file.name.indexOf( '\.mtl' ) > 0 && fileMtl === null ) {
							fileMtl = file;
						}

					}

					if ( ! Validator.isValid( fileObj ) ) {
						alert( 'Unable to load OBJ file from given files.' );
					}

					var scope = this;
					var callbackOnLoad = function ( loderRootNode, modelName, instanceNo ) {
						scope.scene.add( loderRootNode );
						console.log( 'Loading complete: ' + modelName );
						scope._reportProgress( '' );
					};

					var fileReader = new FileReader();
					fileReader.onload = function( fileDataObj ) {

						var uint8Array = new Uint8Array( fileDataObj.target.result );

						var prepData = new THREE.LoaderSupport.PrepData( 'userObj' );
						var resourceOBJ = new THREE.LoaderSupport.ResourceDescriptor( pathTexture + '/' + fileObj.name, 'OBJ' );
						var userPivot = new THREE.Object3D();
						userPivot.position.set(
							-100 + 200 * Math.random(),
							-100 + 200 * Math.random(),
							-100 + 200 * Math.random()
						);
						prepData.setStreamMeshesTo( userPivot );
						scope.pivot.add( prepData.streamMeshesTo );

						resourceOBJ.setContent( uint8Array );
						prepData.addResource( resourceOBJ );
						prepData.setUseAsync( true );
						var callbacks = prepData.getCallbacks();
						callbacks.setCallbackOnProgress( scope._reportProgress );
						callbacks.setCallbackOnLoad( callbackOnLoad );

						fileReader.onload = function( fileDataMtl ) {

							var resourceMTL = new THREE.LoaderSupport.ResourceDescriptor( pathTexture + '/' + fileMtl.name, 'MTL' );
							resourceMTL.setContent( fileDataMtl.target.result );
							prepData.addResource( resourceMTL );

							var objLoader = new THREE.OBJLoader2();
							objLoader.run( prepData );
						};
						fileReader.readAsText( fileMtl );

					};
					fileReader.readAsArrayBuffer( fileObj );

				};

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

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

					this.updateCamera();
				};

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

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

					this.updateCamera();
				};

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

				WWOBJLoader2Example.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 );
				};

				WWOBJLoader2Example.prototype.alterShading = function () {
					var scope = this;
					scope.flatShading = ! scope.flatShading;
					console.log( scope.flatShading ? 'Enabling flat shading' : 'Enabling smooth shading');

					scope.traversalFunction = function ( material ) {
						material.flatShading = scope.flatShading;
						material.needsUpdate = true;
					};
					var scopeTraverse = function ( object3d ) {
						scope.traverseScene( object3d );
					};
					scope.pivot.traverse( scopeTraverse );
				};

				WWOBJLoader2Example.prototype.alterDouble = function () {
					var scope = this;
					scope.doubleSide = ! scope.doubleSide;
					console.log( scope.doubleSide ? 'Enabling DoubleSide materials' : 'Enabling FrontSide materials');

					scope.traversalFunction  = function ( material ) {
						material.side = scope.doubleSide ? THREE.DoubleSide : THREE.FrontSide;
					};

					var scopeTraverse = function ( object3d ) {
						scope.traverseScene( object3d );
					};
					scope.pivot.traverse( scopeTraverse );
				};

				WWOBJLoader2Example.prototype.traverseScene = function ( object3d ) {
					if ( object3d.material instanceof THREE.MultiMaterial ) {

						var materials = object3d.material.materials;
						for ( var name in materials ) {

							if ( materials.hasOwnProperty( name ) )	this.traversalFunction( materials[ name ] );

						}

					} else if ( object3d.material ) {

						this.traversalFunction( object3d.material );

					}
				};

				WWOBJLoader2Example.prototype.clearAllAssests = function () {
					var scope = this;
					var remover = function ( object3d ) {

						if ( object3d === scope.pivot ) {
							return;
						}
						console.log( 'Removing: ' + object3d.name );
						scope.scene.remove( object3d );

						if ( object3d.hasOwnProperty( 'geometry' ) ) {
							object3d.geometry.dispose();
						}
						if ( object3d.hasOwnProperty( 'material' ) ) {

							var mat = object3d.material;
							if ( mat.hasOwnProperty( 'materials' ) ) {

								var materials = mat.materials;
								for ( var name in materials ) {

									if ( materials.hasOwnProperty( name ) ) materials[ name ].dispose();

								}
							}
						}
						if ( object3d.hasOwnProperty( 'texture' ) ) {
							object3d.texture.dispose();
						}
					};

					scope.scene.remove( scope.pivot );
					scope.pivot.traverse( remover );
				};

				return WWOBJLoader2Example;

			})();

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

			// Init dat.gui and controls
			var elemFileInput = document.getElementById( 'fileUploadInput' );
			var WWOBJLoader2Control = function() {
				this.flatShading = app.flatShading;
				this.doubleSide = app.doubleSide;
				this.streamMeshes = app.streamMeshes;
			};
			var wwObjLoader2Control = new WWOBJLoader2Control();

			var gui = new dat.GUI( {
				autoPlace: false,
				width: 320
			} );

			var menuDiv = document.getElementById( 'dat' );
			menuDiv.appendChild(gui.domElement);
			var folderOptions = gui.addFolder( 'WWOBJLoader2 Options' );
			var controlSmooth = folderOptions.add( wwObjLoader2Control, 'flatShading' ).name( 'Flat Shading' );
			controlSmooth.onChange( function( value ) {
				console.log( 'Setting flatShading to: ' + value );
				app.alterShading();
			});

			var controlDouble = folderOptions.add( wwObjLoader2Control, 'doubleSide' ).name( 'Double Side Materials' );
			controlDouble.onChange( function( value ) {
				console.log( 'Setting doubleSide to: ' + value );
				app.alterDouble();
			});

			var controlStreamMeshes = folderOptions.add( wwObjLoader2Control, 'streamMeshes' ).name( 'Stream Meshes' );
			controlStreamMeshes.onChange( function( value ) {
				console.log( 'Setting streamMeshes to: ' + value );
				app.streamMeshes = value;
			});

			if ( app.fileApiAvailable ) {

				wwObjLoader2Control.pathTexture = 'obj/female02/';
				var controlPathTexture = folderOptions.add( wwObjLoader2Control, 'pathTexture' ).name( 'Relative path to textures' );
				controlPathTexture.onChange( function( value ) {
					console.log( 'Setting pathTexture to: ' + value );
					app.pathTexture = value + '/';
				});

				wwObjLoader2Control.loadObjFile = function () {
					elemFileInput.click();
				};
				folderOptions.add( wwObjLoader2Control, 'loadObjFile' ).name( 'Load OBJ/MTL Files' );

				var handleFileSelect = function ( object3d ) {
					app._handleFileSelect( object3d, wwObjLoader2Control.pathTexture );
				};
				elemFileInput.addEventListener( 'change' , handleFileSelect, false );

				wwObjLoader2Control.clearAllAssests = function () {
					app.clearAllAssests();
				};
				folderOptions.add( wwObjLoader2Control, 'clearAllAssests' ).name( 'Clear Scene' );

			}
			folderOptions.open();


			// 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();

			// kick render loop
			render();


			// Load a file with OBJLoader.parse synchronously
			app.useParseSync();

			// Load a file with OBJLoader.parseAsync asynchronously using a worker
			app.useParseAsync();

			// Load a file with OBJLoader.load synchronously
			app.useLoadSync();

			// Load a file with OBJLoader.load asynchronously
			app.useLoadAsync();

			// Load a file with OBJLoader.run synchronously
			app.useRunSync();

			// Load a file with OBJLoader.run asynchronously and add normals during onMeshAlter
			app.useRunAsyncMeshAlter();

			app.finalize();

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