webgl_loader_json_objconverter.html 8.1 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.rotation.x = Math.PI/2;
				mesh.scale.set( 10, 10, 10 );
112
				mesh.doubleSided = true;
113
				scene.add( mesh );
114

115
				// SPHERES
116

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

120 121
				for ( var i = 0; i < 10; i ++ ) {

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

124 125 126
					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 已提交
127

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

130
					scene.add( mesh );
131

132
				}
133

U
unknown 已提交
134 135 136 137

				// LIGHTS

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

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

A
alteredq 已提交
144
				// RENDERER
U
unknown 已提交
145

146
				if ( render_gl ) {
147

148
					try {
A
alteredq 已提交
149

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

154
						container.appendChild( webglRenderer.domElement );
A
alteredq 已提交
155

156
						has_gl = 1;
A
alteredq 已提交
157

158 159 160
					}
					catch (e) {
					}
161

162 163
				}

M
Mr.doob 已提交
164
				if ( render_canvas ) {
165

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

170
				}
U
unknown 已提交
171

A
alteredq 已提交
172 173
				// STATS

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

A
alteredq 已提交
180 181
				//

182 183
				bcanvas.addEventListener("click", toggleCanvas, false);
				bwebgl.addEventListener("click", toggleWebGL, false);
184

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

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

193 194
				//loader.load( "obj/male02/Male02_bin.js", callbackMale );
				//loader.load( "obj/female02/Female02_bin.js", callbackFemale );
195 196

			}
U
unknown 已提交
197

198
			function createScene( geometry, x, y, z, b ) {
199

200
				zmesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
201 202 203
				zmesh.position.set( x, y, z );
				zmesh.scale.set( 3, 3, 3 );
				scene.add( zmesh );
204

205
				createMaterialsPalette( geometry.materials, 100, b );
206

U
unknown 已提交
207 208
			}

209
			function createMaterialsPalette( materials, size, bottom ) {
210

211
				for ( var i = 0; i < materials.length; i ++ ) {
212

213
					// material
214

215
					mesh = new THREE.Mesh( new THREE.PlaneGeometry( size, size ), materials[i] );
216 217 218 219
					mesh.position.x = i * (size + 5) - ( ( materials.length - 1 )* ( size + 5 )/2);
					mesh.position.y = FLOOR + size/2 + bottom;
					mesh.position.z = -100;
					mesh.doubleSided = true;
220
					scene.add( mesh );
221

222
					// number
223

224
					var x = document.createElement( "canvas" );
225
					var xc = x.getContext( "2d" );
226 227 228 229 230
					x.width = x.height = 128;
					xc.shadowColor = "#000";
					xc.shadowBlur = 7;
					xc.fillStyle = "orange";
					xc.font = "50pt arial bold";
231
					xc.fillText( i, 10, 64 );
232

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

236
					mesh = new THREE.Mesh( new THREE.PlaneGeometry( size, size ), xm );
237
					mesh.position.x = i * ( size + 5 ) - ( ( materials.length - 1 )* ( size + 5 )/2);
238 239 240
					mesh.position.y = FLOOR + size/2 + bottom;
					mesh.position.z = -99;
					mesh.doubleSided = true;
241
					scene.add( mesh );
242

243
				}
244

245
			}
246

U
unknown 已提交
247 248 249 250 251 252 253
			function onDocumentMouseMove(event) {

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

			}

254 255 256 257 258 259 260 261 262 263 264 265
			//

			function animate() {

				requestAnimationFrame( animate );

				render();
				stats.update();

			}

			function render() {
U
unknown 已提交
266 267 268 269

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

A
alteredq 已提交
270 271
				camera.lookAt( scene.position );

U
unknown 已提交
272
				if ( render_gl && has_gl ) webglRenderer.render( scene, camera );
273
				if ( render_canvas ) canvasRenderer.render( scene, camera );
U
unknown 已提交
274 275 276

			}

277
			function toggleCanvas() {
278

279 280
				render_canvas = !render_canvas;
				bcanvas.className = render_canvas ? "button" : "button inactive";
281

282 283
				render_gl = !render_canvas;
				bwebgl.className = render_gl ? "button" : "button inactive";
284

285 286
				if( has_gl )
					webglRenderer.domElement.style.display = render_gl ? "block" : "none";
287

288
				canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
289

290
			}
291

292
			function toggleWebGL() {
293

294 295
				render_gl = !render_gl;
				bwebgl.className = render_gl ? "button" : "button inactive";
296

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

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

303
				canvasRenderer.domElement.style.display = render_canvas ? "block" : "none";
304

305
			}
U
unknown 已提交
306 307 308 309
		</script>

	</body>
</html>