1<!DOCTYPE html>
  2<html lang="en">
  3	<head>
  4		<title>ship_triangle OBJloader</title>
  5		<meta charset="utf-8">
  6		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7		<style>
  8			body {
  9				font-family: Monospace;
 10				background-color: #000;
 11				color: #fff;
 12				margin: 0px;
 13				overflow: hidden;
 14			}
 15			#info {
 16				color: #fff;
 17				position: absolute;
 18				top: 10px;
 19				width: 100%;
 20				text-align: center;
 21				z-index: 100;
 22				display:block;
 23			}
 24			#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
 25		</style>
 26	</head>
 27
 28	<body>
 29		<div id="info">
 30            OBJ loader
 31		</div>
 32
 33		<script src="http://threejs.org/build/three.min.js"></script>
 34		<script src="http://threejs.org/examples/js/loaders/OBJLoader.js"></script>
 35
 36		<script src="http://threejs.org/examples/js/Detector.js"></script>
 37		<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
 38
 39		<script>
 40            var clock = new THREE.Clock();
 41            var delta = clock.getDelta(); // seconds.
 42            var rotateAngle = Math.PI / 2 * delta;   // pi/2 radians (90 degrees) per second
 43			var container, stats;
 44
 45			var camera, scene, renderer;
 46
 47			var mouseX = 0, mouseY = 0;
 48
 49			var windowHalfX = window.innerWidth / 2;
 50			var windowHalfY = window.innerHeight / 2;
 51
 52
 53			init();
 54			animate();
 55
 56
 57			function init() {
 58
 59				container = document.createElement( 'div' );
 60				document.body.appendChild( container );
 61
 62				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 63				camera.position.z = 600;
 64
 65				// scene
 66
 67				scene = new THREE.Scene();
 68
 69				var ambient = new THREE.AmbientLight( 0x101030 );
 70				scene.add( ambient );
 71
 72				var directionalLight = new THREE.DirectionalLight( 0xffeedd );
 73				directionalLight.position.set( 0, 0, 1 );
 74				scene.add( directionalLight );
 75
 76				// texture
 77
 78				var manager = new THREE.LoadingManager();
 79				manager.onProgress = function ( item, loaded, total ) {
 80
 81					console.log( item, loaded, total );
 82
 83				};
 84
 85				// model
 86				var loader = new THREE.OBJLoader( manager );
 87				loader.load( 'triangle.obj', function ( object ) {
 88
 89					object.traverse( function ( child ) {
 90
 91						if ( child instanceof THREE.Mesh ) {
 92
 93							//child.material.map = texture;
 94
 95						}
 96
 97					} );
 98
 99					object.position.x = - 60;
100                    object.rotation.x = 20* Math.PI / 180;
101                    object.rotation.z = 20* Math.PI / 180;
102                    object.scale.x = 30;
103                    object.scale.y = 30;
104                    object.scale.z = 30;
105                    obj = object
106					scene.add( obj );
107
108				} );
109
110				renderer = new THREE.WebGLRenderer();
111				renderer.setSize( window.innerWidth, window.innerHeight );
112				container.appendChild( renderer.domElement );
113
114				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
115
116				window.addEventListener( 'resize', onWindowResize, false );
117
118			}
119
120			function onWindowResize() {
121				windowHalfX = window.innerWidth / 2;
122				windowHalfY = window.innerHeight / 2;
123
124				camera.aspect = window.innerWidth / window.innerHeight;
125				camera.updateProjectionMatrix();
126
127				renderer.setSize( window.innerWidth, window.innerHeight );
128			}
129
130			function onDocumentMouseMove( event ) {
131				mouseX = ( event.clientX - windowHalfX ) / 2;
132				mouseY = ( event.clientY - windowHalfY ) / 2;
133			}
134
135			function animate() {
136				requestAnimationFrame( animate );
137				render();
138			}
139
140			function render() {
141                obj.rotation.x += (0.2*(Math.PI / 180));
142                obj.rotation.x %=360;
143
144				camera.position.x += ( mouseX - camera.position.x ) * .05;
145				camera.position.y += ( - mouseY - camera.position.y ) * .05;
146
147				camera.lookAt( scene.position );
148
149				renderer.render( scene, camera );
150			}
151		</script>
152	</body>
153</html>