Started OBJLoader.

65a55a5e · Mr.doob · 803f4577 · 65a55a5e · 65a55a5e
显示空白变更内容
内联并排

Showing with 186 addition and 0 deletion

examples/js/loaders/OBJLoader.js examples/js/loaders/OBJLoader.js +72 -0

examples/webgl_loader_obj.html examples/webgl_loader_obj.html +114 -0

未找到文件。
--- a/examples/js/loaders/OBJLoader.js
+++ b/examples/js/loaders/OBJLoader.js
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+THREE.OBJLoader = function () {};
+THREE.OBJLoader.prototype.load = function ( url, callback ) {
+
+	var xhr = new XMLHttpRequest();
+	xhr.onreadystatechange = function () {
+
+		if ( xhr.readyState == 4 ) {
+
+			if ( xhr.status == 200 || xhr.status == 0 ) {
+
+				THREE.OBJLoader.prototype.parse( xhr.responseText, callback );
+
+			} else {
+
+				console.error( 'THREE.OBJLoader: Couldn\'t load ' + url + ' (' + xhr.status + ')' );
+
+			}
+
+		}
+
+	};
+
+	xhr.open( "GET", url, true );
+	xhr.send( null );
+
+};
+
+THREE.OBJLoader.prototype.parse = function ( data, callback ) {
+
+	var geometry = new THREE.Geometry();
+
+	var objects = data.split( '\no ');
+
+	for ( var i = 0, il = objects.length; i < il; i ++ ) {
+
+		var object = objects[ i ];
+
+		var pattern, result;
+
+		// vertices
+
+		pattern = /v ([\-|\d|.]+) ([\-|\d|.]+) ([\-|\d|.]+)/g;
+
+		while ( ( result = pattern.exec( object ) ) != null ) {
+
+			var vertex = new THREE.Vector3( parseFloat( result[ 1 ] ), parseFloat( result[ 2 ] ), parseFloat( result[ 3 ] ) );
+			geometry.vertices.push( vertex );
+
+		}
+
+		// faces
+
+		pattern = /f ([\d]+)\/([\d]+)\/([\d]+) ([\d]+)\/([\d]+)\/([\d]+) ([\d]+)\/([\d]+)\/([\d]+)/g;
+
+		while ( ( result = pattern.exec( object ) ) != null ) {
+
+			var face = new THREE.Face3( parseInt( result[ 1 ] ) - 1, parseInt( result[ 4 ] ) - 1, parseInt( result[ 7 ] ) - 1 );
+			geometry.faces.push( face );
+
+		}
+
+	}
+
+	geometry.computeCentroids();
+
+	callback( geometry );
+
+}
--- a/examples/webgl_loader_obj.html
+++ b/examples/webgl_loader_obj.html
+<!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://github.com/mrdoob/three.js" target="_blank">three.js</a> - OBJLoader test
+		</div>
+
+		<script src="../build/Three.js"></script>
+		<script src="js/loaders/OBJLoader.js"></script>
+
+		<script src="js/Detector.js"></script>
+		<script src="js/Stats.js"></script>
+
+		<script>
+
+			var container, stats;
+
+			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 );
+
+				scene = new THREE.Scene();
+
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera.position.z = 100;
+				scene.add( camera );
+
+				var loader = new THREE.OBJLoader();
+				loader.load( "obj/female02/female02.obj", function ( geometry ) {
+
+					var mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { wireframe: true } ) );
+					scene.add( mesh );
+
+				} );
+
+				// RENDERER
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				container.appendChild( renderer.domElement );
+
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
+			}
+
+			function onDocumentMouseMove( event ) {
+
+				mouseX = ( event.clientX - windowHalfX );
+				mouseY = ( event.clientY - windowHalfY );
+
+			}
+
+			//
+
+			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>