Home Explore Help
Register Sign In
woelper
/
lab
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

web

Johann Woelper 9 years ago
parent
bc4284bdcd
commit
23952dacd0
4 changed files with 1377 additions and 0 deletions
Split View Show Diff Stats
  1. 178 0
      steampunk/web/loader.html
  2. 316 0
      steampunk/web/node_modules/three/OBJLoader.js
  3. 883 0
      steampunk/web/node_modules/three/three.min.js
  4. BIN
      steampunk/web/ship_diffuse.jpg

+ 178 - 0
steampunk/web/loader.html
View File 

@@ -0,0 +1,178 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js webgl - loaders - OBJ loader</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: 0px;
 
+				overflow: hidden;
 
+			}
 
+			#info {
 
+				color: #fff;
 
+				position: absolute;
 
+				top: 10px;
 
+				width: 100%;
 
+				text-align: center;
 
+				z-index: 100;
 
+				display:block;
 
+			}
 
+			#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
 
+		</style>
 
+	</head>
 
+
 
+	<body>
 
+		<div id="info">
 
+		<a href="http://threejs.org" target="_blank">three.js</a> - OBJLoader test
 
+		</div>
 
+
 
+		<script src="node_modules/three/three.min.js"></script>
 
+		<script src="node_modules/three/OBJLoader.js"></script>
 
+
 
+		<script>
 
+
 
+			var container;
 
+
 
+			var camera, scene, renderer;
 
+
 
+			var mouseX = 0, mouseY = 0;
 
+
 
+			var windowHalfX = window.innerWidth / 2;
 
+			var windowHalfY = window.innerHeight / 2;
 
+
 
+
 
+			init();
 
+			animate();
 
+
 
+
 
+			function init() {
 
+
 
+				container = document.createElement( 'div' );
 
+				document.body.appendChild( container );
 
+
 
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 
+				camera.position.z = 250;
 
+
 
+				// scene
 
+
 
+				scene = new THREE.Scene();
 
+
 
+				var ambient = new THREE.AmbientLight( 0x101030 );
 
+				scene.add( ambient );
 
+
 
+				var directionalLight = new THREE.DirectionalLight( 0xffeedd );
 
+				directionalLight.position.set( 0, 0, 1 );
 
+				scene.add( directionalLight );
 
+
 
+				// texture
 
+
 
+				var manager = new THREE.LoadingManager();
 
+				manager.onProgress = function ( item, loaded, total ) {
 
+
 
+					console.log( item, loaded, total );
 
+
 
+				};
 
+
 
+				var texture = new THREE.Texture();
 
+
 
+				var onProgress = function ( xhr ) {
 
+					if ( xhr.lengthComputable ) {
 
+						var percentComplete = xhr.loaded / xhr.total * 100;
 
+						console.log( Math.round(percentComplete, 2) + '% downloaded' );
 
+					}
 
+				};
 
+
 
+				var onError = function ( xhr ) {
 
+				};
 
+
 
+
 
+				var loader = new THREE.ImageLoader( manager );
 
+				loader.load( 'ship_diffuse.jpg', function ( image ) {
 
+
 
+					texture.image = image;
 
+					texture.needsUpdate = true;
 
+
 
+				} );
 
+
 
+				// model
 
+
 
+				var loader = new THREE.OBJLoader( manager );
 
+				loader.load( 'ship_engine.obj', function ( object ) {
 
+
 
+					object.traverse( function ( child ) {
 
+
 
+						if ( child instanceof THREE.Mesh ) {
 
+
 
+							child.material.map = texture;
 
+
 
+						}
 
+
 
+					} );
 
+
 
+					object.position.y = - 95;
 
+					scene.add( object );
 
+
 
+				}, onProgress, onError );
 
+
 
+				//
 
+
 
+				renderer = new THREE.WebGLRenderer();
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				container.appendChild( renderer.domElement );
 
+
 
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
+
 
+				//
 
+
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
+
 
+			}
 
+
 
+			function onWindowResize() {
 
+
 
+				windowHalfX = window.innerWidth / 2;
 
+				windowHalfY = window.innerHeight / 2;
 
+
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
+
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+
 
+			}
 
+
 
+			function onDocumentMouseMove( event ) {
 
+
 
+				mouseX = ( event.clientX - windowHalfX ) / 2;
 
+				mouseY = ( event.clientY - windowHalfY ) / 2;
 
+
 
+			}
 
+
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+				render();
 
+
 
+			}
 
+
 
+			function render() {
 
+
 
+				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
+				camera.position.y += ( - mouseY - camera.position.y ) * .05;
 
+
 
+				camera.lookAt( scene.position );
 
+
 
+				renderer.render( scene, camera );
 
+
 
+			}
 
+
 
+		</script>
 
+
 
+	</body>
 
+</html>

+ 316 - 0
steampunk/web/node_modules/three/OBJLoader.js
View File 

@@ -0,0 +1,316 @@
 
+/**
 
+ * @author mrdoob / http://mrdoob.com/
 
+ */
 
+
 
+THREE.OBJLoader = function () {
 
+
 
+  THREE.EventDispatcher.call( this );
 
+
 
+};
 
+
 
+THREE.OBJLoader.prototype = {
 
+
 
+	constructor: THREE.OBJLoader,
 
+
 
+	load: function ( url, callback ) {
 
+
 
+		var scope = this;
 
+		var request = new XMLHttpRequest();
 
+
 
+		request.addEventListener( 'load', function ( event ) {
 
+
 
+			var hierarchy = scope.parse( request.responseText );
 
+
 
+			scope.dispatchEvent( { type: 'load', content: hierarchy } );
 
+
 
+			if ( callback ) callback( hierarchy );
 
+
 
+		}, false );
 
+
 
+		request.addEventListener( 'progress', function ( event ) {
 
+
 
+			//scope.dispatchEvent( { type: 'progress', loaded: event.loaded, total: event.total } );
 
+
 
+		}, false );
 
+
 
+		request.addEventListener( 'error', function () {
 
+
 
+			scope.dispatchEvent( { type: 'error', message: 'Couldn\'t load URL [' + url + ']' } );
 
+
 
+		}, false );
 
+
 
+		request.open( 'GET', url, true );
 
+		request.send( null );
 
+
 
+	},
 
+
 
+	parse: function ( data ) {
 
+
 
+		function vector( x, y, z ) {
 
+
 
+			return new THREE.Vector3( x, y, z );
 
+
 
+		}
 
+
 
+		function uv( u, v ) {
 
+
 
+			return new THREE.Vector2( u, v );
 
+
 
+		}
 
+
 
+		function face3( a, b, c, normals ) {
 
+
 
+			return new THREE.Face3( a, b, c, normals );
 
+
 
+		}
 
+
 
+		function face4( a, b, c, d, normals ) {
 
+
 
+			return new THREE.Face4( a, b, c, d, normals );
 
+
 
+		}
 
+
 
+		var group = new THREE.Object3D();
 
+
 
+		var vertices = [];
 
+		var normals = [];
 
+		var uvs = [];
 
+
 
+		var pattern, result;
 
+
 
+		// v float float float
 
+
 
+		pattern = /v( +[\d|\.|\+|\-|e]+)( [\d|\.|\+|\-|e]+)( [\d|\.|\+|\-|e]+)/g;
 
+
 
+		while ( ( result = pattern.exec( data ) ) != null ) {
 
+
 
+			// ["v 1.0 2.0 3.0", "1.0", "2.0", "3.0"]
 
+
 
+			vertices.push( vector(
 
+				parseFloat( result[ 1 ] ),
 
+				parseFloat( result[ 2 ] ),
 
+				parseFloat( result[ 3 ] )
 
+			) );
 
+
 
+		}
 
+
 
+
 
+		// vn float float float
 
+
 
+		pattern = /vn( +[\d|\.|\+|\-|e]+)( [\d|\.|\+|\-|e]+)( [\d|\.|\+|\-|e]+)/g;
 
+
 
+		while ( ( result = pattern.exec( data ) ) != null ) {
 
+
 
+			// ["vn 1.0 2.0 3.0", "1.0", "2.0", "3.0"]
 
+
 
+			normals.push( vector(
 
+				parseFloat( result[ 1 ] ),
 
+				parseFloat( result[ 2 ] ),
 
+				parseFloat( result[ 3 ] )
 
+			) );
 
+
 
+		}
 
+
 
+		// vt float float
 
+
 
+		pattern = /vt( +[\d|\.|\+|\-|e]+)( [\d|\.|\+|\-|e]+)/g;
 
+
 
+		while ( ( result = pattern.exec( data ) ) != null ) {
 
+
 
+			// ["vt 0.1 0.2", "0.1", "0.2"]
 
+
 
+			uvs.push( uv(
 
+				parseFloat( result[ 1 ] ),
 
+				parseFloat( result[ 2 ] )
 
+			) );
 
+
 
+		}
 
+
 
+		var splitData = data.split( '\no ' );
 
+
 
+		for ( var i = 0, l = splitData.length; i < l; i ++ ) {
 
+
 
+			var object = splitData[ i ];
 
+
 
+			var geometry = new THREE.Geometry();
 
+
 
+			geometry.vertices = vertices;
 
+
 
+			// f vertex vertex vertex ...
 
+
 
+			pattern = /f( +[\d]+)( [\d]+)( [\d]+)( [\d]+)?/g;
 
+
 
+			while ( ( result = pattern.exec( object ) ) != null ) {
 
+
 
+				// ["f 1 2 3", "1", "2", "3", undefined]
 
+
 
+				if ( result[ 4 ] === undefined ) {
 
+
 
+					geometry.faces.push( face3(
 
+						parseInt( result[ 1 ] ) - 1,
 
+						parseInt( result[ 2 ] ) - 1,
 
+						parseInt( result[ 3 ] ) - 1
 
+					) );
 
+
 
+				} else {
 
+
 
+					geometry.faces.push( face4(
 
+						parseInt( result[ 1 ] ) - 1,
 
+						parseInt( result[ 2 ] ) - 1,
 
+						parseInt( result[ 3 ] ) - 1,
 
+						parseInt( result[ 4 ] ) - 1
 
+					) );
 
+
 
+				}
 
+
 
+			}
 
+
 
+			// f vertex/uv vertex/uv vertex/uv ...
 
+
 
+			pattern = /f( +([\d]+)\/([\d]+))( ([\d]+)\/([\d]+))( ([\d]+)\/([\d]+))( ([\d]+)\/([\d]+))?/g;
 
+
 
+			while ( ( result = pattern.exec( object ) ) != null ) {
 
+
 
+				// ["f 1/1 2/2 3/3", " 1/1", "1", "1", " 2/2", "2", "2", " 3/3", "3", "3", undefined, undefined, undefined]
 
+
 
+				if ( result[ 10 ] === undefined ) {
 
+
 
+					geometry.faces.push( face3(
 
+						parseInt( result[ 2 ] ) - 1,
 
+						parseInt( result[ 5 ] ) - 1,
 
+						parseInt( result[ 8 ] ) - 1
 
+					) );
 
+
 
+					geometry.faceVertexUvs[ 0 ].push( [
 
+						uvs[ parseInt( result[ 3 ] ) - 1 ],
 
+						uvs[ parseInt( result[ 6 ] ) - 1 ],
 
+						uvs[ parseInt( result[ 9 ] ) - 1 ]
 
+					] );
 
+
 
+				} else {
 
+
 
+					geometry.faces.push( face4(
 
+						parseInt( result[ 2 ] ) - 1,
 
+						parseInt( result[ 5 ] ) - 1,
 
+						parseInt( result[ 8 ] ) - 1,
 
+						parseInt( result[ 11 ] ) - 1
 
+					) );
 
+
 
+					geometry.faceVertexUvs[ 0 ].push( [
 
+						uvs[ parseInt( result[ 3 ] ) - 1 ],
 
+						uvs[ parseInt( result[ 6 ] ) - 1 ],
 
+						uvs[ parseInt( result[ 9 ] ) - 1 ],
 
+						uvs[ parseInt( result[ 12 ] ) - 1 ]
 
+					] );
 
+
 
+				}
 
+
 
+			}
 
+
 
+			// f vertex/uv/normal vertex/uv/normal vertex/uv/normal ...
 
+
 
+			pattern = /f( +([\d]+)\/([\d]+)\/([\d]+))( ([\d]+)\/([\d]+)\/([\d]+))( ([\d]+)\/([\d]+)\/([\d]+))( ([\d]+)\/([\d]+)\/([\d]+))?/g;
 
+
 
+			while ( ( result = pattern.exec( object ) ) != null ) {
 
+
 
+				// ["f 1/1/1 2/2/2 3/3/3", " 1/1/1", "1", "1", "1", " 2/2/2", "2", "2", "2", " 3/3/3", "3", "3", "3", undefined, undefined, undefined, undefined]
 
+
 
+				if ( result[ 13 ] === undefined ) {
 
+
 
+					geometry.faces.push( face3(
 
+						parseInt( result[ 2 ] ) - 1,
 
+						parseInt( result[ 6 ] ) - 1,
 
+						parseInt( result[ 10 ] ) - 1,
 
+						[
 
+							normals[ parseInt( result[ 4 ] ) - 1 ],
 
+							normals[ parseInt( result[ 8 ] ) - 1 ],
 
+							normals[ parseInt( result[ 12 ] ) - 1 ]
 
+						]
 
+					) );
 
+
 
+					geometry.faceVertexUvs[ 0 ].push( [
 
+						uvs[ parseInt( result[ 3 ] ) - 1 ],
 
+						uvs[ parseInt( result[ 7 ] ) - 1 ],
 
+						uvs[ parseInt( result[ 11 ] ) - 1 ]
 
+					] );
 
+
 
+				} else {
 
+
 
+					geometry.faces.push( face4(
 
+						parseInt( result[ 2 ] ) - 1,
 
+						parseInt( result[ 6 ] ) - 1,
 
+						parseInt( result[ 10 ] ) - 1,
 
+						parseInt( result[ 14 ] ) - 1,
 
+						[
 
+							normals[ parseInt( result[ 4 ] ) - 1 ],
 
+							normals[ parseInt( result[ 8 ] ) - 1 ],
 
+							normals[ parseInt( result[ 12 ] ) - 1 ],
 
+							normals[ parseInt( result[ 16 ] ) - 1 ]
 
+						]
 
+					) );
 
+
 
+					geometry.faceVertexUvs[ 0 ].push( [
 
+						uvs[ parseInt( result[ 3 ] ) - 1 ],
 
+						uvs[ parseInt( result[ 7 ] ) - 1 ],
 
+						uvs[ parseInt( result[ 11 ] ) - 1 ],
 
+						uvs[ parseInt( result[ 15 ] ) - 1 ]
 
+					] );
 
+
 
+				}
 
+
 
+
 
+			}
 
+
 
+			// f vertex//normal vertex//normal vertex//normal ...
 
+
 
+			pattern = /f( +([\d]+)\/\/([\d]+))( ([\d]+)\/\/([\d]+))( ([\d]+)\/\/([\d]+))( ([\d]+)\/\/([\d]+))?/g;
 
+
 
+			while ( ( result = pattern.exec( object ) ) != null ) {
 
+
 
+				// ["f 1//1 2//2 3//3", " 1//1", "1", "1", " 2//2", "2", "2", " 3//3", "3", "3", undefined, undefined, undefined]
 
+
 
+				if ( result[ 10 ] === undefined ) {
 
+
 
+					geometry.faces.push( face3(
 
+						parseInt( result[ 2 ] ) - 1,
 
+						parseInt( result[ 5 ] ) - 1,
 
+						parseInt( result[ 8 ] ) - 1,
 
+						[
 
+							normals[ parseInt( result[ 3 ] ) - 1 ],
 
+							normals[ parseInt( result[ 6 ] ) - 1 ],
 
+							normals[ parseInt( result[ 9 ] ) - 1 ]
 
+						]
 
+					) );
 
+
 
+				} else {
 
+
 
+					geometry.faces.push( face4(
 
+						parseInt( result[ 2 ] ) - 1,
 
+						parseInt( result[ 5 ] ) - 1,
 
+						parseInt( result[ 8 ] ) - 1,
 
+						parseInt( result[ 11 ] ) - 1,
 
+						[
 
+							normals[ parseInt( result[ 3 ] ) - 1 ],
 
+							normals[ parseInt( result[ 6 ] ) - 1 ],
 
+							normals[ parseInt( result[ 9 ] ) - 1 ],
 
+							normals[ parseInt( result[ 12 ] ) - 1 ]
 
+						]
 
+					) );
 
+
 
+				}
 
+
 
+			}
 
+
 
+			geometry.computeCentroids();
 
+			geometry.computeFaceNormals();
 
+			geometry.computeBoundingSphere();
 
+
 
+			group.add( new THREE.Mesh( geometry, new THREE.MeshLambertMaterial() ) );
 
+
 
+		}
 
+
 
+		return group;
 
+
 
+	}
 
+
 
+}

File diff suppressed because it is too large
+ 883 - 0
steampunk/web/node_modules/three/three.min.js


BIN
steampunk/web/ship_diffuse.jpg
View File