webgl_loader_json_objconverter.html 8.6 KB
Newer Older
1
<!doctype html>
U
unknown 已提交
2 3
<html lang="en">
	<head>
4
		<title>three.js webgl - io - OBJ converter</title>
U
unknown 已提交
5
		<meta charset="utf-8">
6 7
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
U
unknown 已提交
8
			body {
9
				background:#fff;
10
				padding:0;
11 12
				margin:0;
				overflow:hidden;
13 14
				font-family:georgia;
				text-align:center;
U
unknown 已提交
15
			}
16 17
			h1 { }
			a { color:skyblue }
18
			canvas { pointer-events:none; z-index:10; }
19

M
Mr.doob 已提交
20
			#d { text-align:center; margin:1em 0 -9.2em 0; z-index:0; position:relative; display:block }
21 22
			.button { background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer }
			.inactive { background:#999; color:#eee }
U
unknown 已提交
23 24
		</style>
	</head>
25

26 27 28 29 30 31 32 33
	<body>
		<div id="d">
			<h1>OBJ to Three.js converter test</h1>

			<span id="rcanvas" class="button inactive">2d canvas renderer</span>
			<span id="rwebgl" class="button">WebGL renderer</span>
			<br/>

34
			<p>Models by <a href="http://sketchup.google.com/3dwarehouse/details?mid=2c6fd128fca34052adc5f5b98d513da1">Reallusion</a>
35 36
			<a href="http://sketchup.google.com/3dwarehouse/details?mid=f526cc4abf7cb68d76cab47c765b7255">iClone</a>.
		</div>
37

M
Mr.doob 已提交
38
		<script src="../build/Three.js"></script>
39

M
Mr.doob 已提交
40 41
		<script src="js/Detector.js"></script>
		<script src="js/Stats.js"></script>
U
unknown 已提交
42

M
Mr.doob 已提交
43
		<script>
U
unknown 已提交
44 45 46

			var SCREEN_WIDTH = window.innerWidth;
			var SCREEN_HEIGHT = window.innerHeight;
47
			var FLOOR = -250;
U
unknown 已提交
48

49
			var container,stats;
U
unknown 已提交
50

51
			var camera, scene;
U
unknown 已提交
52 53 54 55
			var canvasRenderer, webglRenderer;

			var mesh, zmesh, geometry;

56 57 58 59
			var mouseX = 0, mouseY = 0;

			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;
U
unknown 已提交
60

M
Mr.doob 已提交
61
			var render_canvas = 1, render_gl = 1;
62
			var has_gl = 0;
63

A
alteredq 已提交
64 65
			var bcanvas = document.getElementById( "rcanvas" );
			var bwebgl = document.getElementById( "rwebgl" );
66

A
alteredq 已提交
67
			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
U
unknown 已提交
68 69

			init();
70
			animate();
71

72 73 74
			render_canvas = !has_gl;
			bwebgl.style.display = has_gl ? "inline" : "none";
			bcanvas.className = render_canvas ? "button" : "button inactive";
75

U
unknown 已提交
76 77
			function init() {

A
alteredq 已提交
78 79
				container = document.createElement( 'div' );
				document.body.appendChild( container );
U
unknown 已提交
80

A
alteredq 已提交
81
				camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
82
				camera.position.z = 500;
U
unknown 已提交
83 84

				scene = new THREE.Scene();
85

86
				// GROUND
87

88 89 90 91 92 93 94 95 96 97 98 99 100
				var x = document.createElement( "canvas" );
				var xc = x.getContext("2d");
				x.width = x.height = 128;
				xc.fillStyle = "#fff";
				xc.fillRect(0, 0, 128, 128);
				xc.fillStyle = "#000";
				xc.fillRect(0, 0, 64, 64);
				xc.fillStyle = "#999";
				xc.fillRect(32, 32, 32, 32);
				xc.fillStyle = "#000";
				xc.fillRect(64, 64, 64, 64);
				xc.fillStyle = "#555";
				xc.fillRect(96, 96, 32, 32);
101

M
Mr.doob 已提交
102
				var xm = new THREE.MeshBasicMaterial( { map: new THREE.Texture( x, new THREE.UVMapping(), THREE.RepeatWrapping, THREE.RepeatWrapping ) } );
A
alteredq 已提交
103
				xm.map.needsUpdate = true;
104
				xm.map.repeat.set( 10, 10 );
105

106
				geometry = new THREE.PlaneGeometry( 100, 100, 15, 10 );
107

108
				mesh = new THREE.Mesh( geometry, xm );
109 110 111
				mesh.position.set( 0, FLOOR, 0 );
				mesh.scale.set( 10, 10, 10 );
				scene.add( mesh );
112

113
				// SPHERES
114

115
				var material_spheres = new THREE.MeshLambertMaterial( { color: 0xdddddd } ),
116
					sphere = new THREE.SphereGeometry( 100, 16, 8 );
117

118 119
				for ( var i = 0; i < 10; i ++ ) {

120
					mesh = new THREE.Mesh( sphere, material_spheres );
A
alteredq 已提交
121

122 123 124
					mesh.position.x = 500 * ( Math.random() - 0.5 );
					mesh.position.y = 300 * ( Math.random() - 0 ) + FLOOR;
					mesh.position.z = 100 * ( Math.random() - 1 );
A
alteredq 已提交
125

126
					mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.25 * ( Math.random() + 0.5 );
A
alteredq 已提交
127

128
					scene.add( mesh );
129

130
				}
131

U
unknown 已提交
132 133 134 135

				// LIGHTS

				var ambient = new THREE.AmbientLight( 0x221100 );
136
				scene.add( ambient );
U
unknown 已提交
137 138

				var directionalLight = new THREE.DirectionalLight( 0xffeedd );
A
alteredq 已提交
139
				directionalLight.position.set( 0, -70, 100 ).normalize();
140
				scene.add( directionalLight );
U
unknown 已提交
141

A
alteredq 已提交
142
				// RENDERER
U
unknown 已提交
143

144
				if ( render_gl ) {
145

146
					try {
A
alteredq 已提交
147

148
						webglRenderer = new THREE.WebGLRenderer();
149
						webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
150
						webglRenderer.domElement.style.position = "relative";
A
alteredq 已提交
151

152
						container.appendChild( webglRenderer.domElement );
A
alteredq 已提交
153

154
						has_gl = 1;
A
alteredq 已提交
155

156 157 158
					}
					catch (e) {
					}
159

160 161
				}

M
Mr.doob 已提交
162
				if ( render_canvas ) {
163

164 165 166
					canvasRenderer = new THREE.CanvasRenderer();
					canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
					container.appendChild( canvasRenderer.domElement );
167

168
				}
U
unknown 已提交
169

A
alteredq 已提交
170 171
				// STATS

U
unknown 已提交
172 173 174
				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
175
				stats.domElement.style.zIndex = 100;
U
unknown 已提交
176
				container.appendChild( stats.domElement );
177

A
alteredq 已提交
178 179
				//

180 181
				bcanvas.addEventListener("click", toggleCanvas, false);
				bwebgl.addEventListener("click", toggleWebGL, false);
182

A
alteredq 已提交
183
				//var loader = new THREE.BinaryLoader(),
184
				var loader = new THREE.JSONLoader(),
185 186
					callbackMale   = function( geometry ) { createScene( geometry,  90, FLOOR, 50, 105 ) },
					callbackFemale = function( geometry ) { createScene( geometry, -80, FLOOR, 50, 0 ) };
187

188 189
				loader.load( "obj/male02/Male02_slim.js", callbackMale );
				loader.load( "obj/female02/Female02_slim.js", callbackFemale );
190

191 192
				//loader.load( "obj/male02/Male02_bin.js", callbackMale );
				//loader.load( "obj/female02/Female02_bin.js", callbackFemale );
193

194 195 196 197 198 199 200 201 202 203 204 205 206 207
				//

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

			}

			function onWindowResize() {

				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

208 209
				if ( webglRenderer ) webglRenderer.setSize( window.innerWidth, window.innerHeight );
				if ( canvasRenderer ) canvasRenderer.setSize( window.innerWidth, window.innerHeight );
210

211
			}
U
unknown 已提交
212

213
			function createScene( geometry, x, y, z, b ) {
214

215
				zmesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
216 217 218
				zmesh.position.set( x, y, z );
				zmesh.scale.set( 3, 3, 3 );
				scene.add( zmesh );
219

220
				createMaterialsPalette( geometry.materials, 100, b );
221

U
unknown 已提交
222 223
			}

224
			function createMaterialsPalette( materials, size, bottom ) {
225

226
				for ( var i = 0; i < materials.length; i ++ ) {
227

228
					// material
229

230
					mesh = new THREE.Mesh( new THREE.PlaneGeometry( size, size ), materials[i] );
231 232 233
					mesh.position.x = i * (size + 5) - ( ( materials.length - 1 )* ( size + 5 )/2);
					mesh.position.y = FLOOR + size/2 + bottom;
					mesh.position.z = -100;
234
					mesh.rotation.x = Math.PI / 2;
235
					mesh.doubleSided = true;
236
					scene.add( mesh );
237

238
					// number
239

240
					var x = document.createElement( "canvas" );
241
					var xc = x.getContext( "2d" );
242 243 244 245 246
					x.width = x.height = 128;
					xc.shadowColor = "#000";
					xc.shadowBlur = 7;
					xc.fillStyle = "orange";
					xc.font = "50pt arial bold";
247
					xc.fillText( i, 10, 64 );
248

249
					var xm = new THREE.MeshBasicMaterial( { map: new THREE.Texture( x ), transparent: true } );
A
alteredq 已提交
250
					xm.map.needsUpdate = true;
251

252
					mesh = new THREE.Mesh( new THREE.PlaneGeometry( size, size ), xm );
253
					mesh.position.x = i * ( size + 5 ) - ( ( materials.length - 1 )* ( size + 5 )/2);
254 255
					mesh.position.y = FLOOR + size/2 + bottom;
					mesh.position.z = -99;
256
					mesh.rotation.x = Math.PI / 2;
257
					mesh.doubleSided = true;
258
					scene.add( mesh );
259

260
				}
261

262
			}
263

U
unknown 已提交
264 265 266 267 268 269 270
			function onDocumentMouseMove(event) {

				mouseX = ( event.clientX - windowHalfX );
				mouseY = ( event.clientY - windowHalfY );

			}

271 272 273 274 275 276 277 278 279 280 281 282
			//

			function animate() {

				requestAnimationFrame( animate );

				render();
				stats.update();

			}

			function render() {
U
unknown 已提交
283 284 285 286

				camera.position.x += ( mouseX - camera.position.x ) * .05;
				camera.position.y += ( - mouseY - camera.position.y ) * .05;

A
alteredq 已提交
287 288
				camera.lookAt( scene.position );

U
unknown 已提交
289
				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
290
				if ( render_canvas ) canvasRenderer.render( scene, camera );
U
unknown 已提交
291 292 293

			}

294
			function toggleCanvas() {
295

296 297
				render_canvas = !render_canvas;
				bcanvas.className = render_canvas ? "button" : "button inactive";
298

299 300
				render_gl = !render_canvas;
				bwebgl.className = render_gl ? "button" : "button inactive";
301

302 303
				if( has_gl )
					webglRenderer.domElement.style.display = render_gl ? "block" : "none";
304

305
				canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
306

307
			}
308

309
			function toggleWebGL() {
310

311 312
				render_gl = !render_gl;
				bwebgl.className = render_gl ? "button" : "button inactive";
313

314 315
				render_canvas = !render_gl;
				bcanvas.className = render_canvas ? "button" : "button inactive";
316

317 318
				if( has_gl )
					webglRenderer.domElement.style.display = render_gl ? "block" : "none";
319

320
				canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
321

322
			}
U
unknown 已提交
323 324 325 326
		</script>

	</body>
</html>