index.html 10.0 KB
Newer Older
M
Mr.doob 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>three.js - examples</title>
		<style>

			@font-face {
				font-family: 'inconsolata';
				src: url('files/inconsolata.woff') format('woff');
				font-weight: normal;
				font-style: normal;
			}

			body {
				background-color: #ffffff;
				margin: 0px;
				font-family: 'inconsolata';
				font-size: 15px;
				overflow: hidden;
21
			}
M
Mr.doob 已提交
22

23 24 25
			a {
				color: #2194CE;
				text-decoration: none;
M
Mr.doob 已提交
26 27 28
			}

			h1 {
29 30
				margin-top: 20px;
				margin-bottom: 40px;
M
Mr.doob 已提交
31 32 33 34
				font-size: 25px;
				font-weight: normal;
			}

M
Mr.doob 已提交
35 36 37 38 39
			h2 {
				font-size: 20px;
				font-weight: normal;
			}

M
Mr.doob 已提交
40 41
			#panel {
				position: absolute;
M
Mr.doob 已提交
42
				width: 310px;
M
Mr.doob 已提交
43 44 45 46 47
				height: 100%;
				overflow: scroll;
			}

				#panel #list {
48
					padding: 0px 20px;
M
Mr.doob 已提交
49 50 51
					line-height: 18px;
				}

M
Mr.doob 已提交
52 53 54 55 56 57 58 59 60 61 62 63 64 65
				#panel #list .link {
					color: #2194CE;
					text-decoration: none;
					cursor: pointer;
				}

				#panel #list .selected {
					color: #ff0000;
				}

					#panel #list .link:hover {
						text-decoration: underline;
					}

M
Mr.doob 已提交
66 67
			#viewer {
				position: absolute;
M
Mr.doob 已提交
68 69 70
				left: 310px;
				width: -webkit-calc(100% - 310px); /* Safari */
				width: calc(100% - 310px);
M
Mr.doob 已提交
71 72 73 74
				height: 100%;
				border: 0px;
			}

75 76
			#button {
				position: fixed;
77
				bottom: 20px;
78 79 80 81 82 83 84 85 86 87 88 89
				right: 20px;
				padding: 8px;
				color: #fff;
				background-color: #555;
				opacity: 0.7;
			}

				#button:hover {
					cursor: pointer;
					opacity: 1;
				}

M
Mr.doob 已提交
90 91 92 93 94 95
		</style>
	</head>
	<body>

		<div id="panel">
			<div id="list">
96
				<h1><a href="http://threejs.org">three.js</a> / examples</h1>
M
Mr.doob 已提交
97 98 99 100 101 102
			</div>
		</div>
		<iframe id="viewer"></iframe>

		<script>

M
Mr.doob 已提交
103 104 105 106 107 108 109
		var files = {
			"webgl": [
				"webgl_animation_cloth",
				"webgl_animation_skinning_morph",
				"webgl_buffergeometry",
				"webgl_buffergeometry_custom_attributes_particles",
				"webgl_buffergeometry_lines",
110
				"webgl_buffergeometry_lines_indexed",
M
Mr.doob 已提交
111
				"webgl_buffergeometry_particles",
112
				"webgl_buffergeometry_rawshader",
M
Mr.doob 已提交
113
				"webgl_buffergeometry_uint",
M
Mr.doob 已提交
114
				"webgl_camera",
115
				"webgl_camera_logarithmicdepthbuffer",
M
Mr.doob 已提交
116 117 118 119 120
				"webgl_custom_attributes",
				"webgl_custom_attributes_lines",
				"webgl_custom_attributes_particles",
				"webgl_custom_attributes_particles2",
				"webgl_custom_attributes_particles3",
M
Mr.doob 已提交
121 122 123 124
				"webgl_effects_anaglyph",
				"webgl_effects_crosseyed",
				"webgl_effects_oculusrift",
				"webgl_effects_parallaxbarrier",
M
Mr.doob 已提交
125 126 127
				"webgl_geometries",
				"webgl_geometries2",
				"webgl_geometry_colors",
M
Mr.doob 已提交
128 129
				"webgl_geometry_colors_blender",
				"webgl_geometry_colors_lookuptable",
M
Mr.doob 已提交
130 131 132 133
				"webgl_geometry_convex",
				"webgl_geometry_cube",
				"webgl_geometry_dynamic",
				"webgl_geometry_extrude_shapes",
134
				"webgl_geometry_extrude_shapes2",
M
Mr.doob 已提交
135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150
				"webgl_geometry_extrude_splines",
				"webgl_geometry_extrude_uvs2",
				"webgl_geometry_hierarchy",
				"webgl_geometry_hierarchy2",
				"webgl_geometry_large_mesh",
				"webgl_geometry_minecraft",
				"webgl_geometry_minecraft_ao",
				"webgl_geometry_normals",
				"webgl_geometry_nurbs",
				"webgl_geometry_shapes",
				"webgl_geometry_subdivision",
				"webgl_geometry_terrain",
				"webgl_geometry_terrain_fog",
				"webgl_geometry_terrain_raycast",
				"webgl_geometry_tessellation",
				"webgl_geometry_text",
151
				"webgl_gpgpu_birds",
M
Mr.doob 已提交
152 153
				"webgl_hdr",
				"webgl_helpers",
154
				"webgl_interactive_buffergeometry",
M
Mr.doob 已提交
155 156 157 158 159 160 161 162 163 164 165 166 167 168
				"webgl_interactive_cubes",
				"webgl_interactive_cubes_gpu",
				"webgl_interactive_draggablecubes",
				"webgl_interactive_voxelpainter",
				"webgl_kinect",
				"webgl_lensflares",
				"webgl_lights_hemisphere",
				"webgl_lights_pointlights",
				"webgl_lights_pointlights2",
				"webgl_lines_colors",
				"webgl_lines_cubes",
				"webgl_lines_dashed",
				"webgl_lines_sphere",
				"webgl_lines_splines",
169
				"webgl_loader_assimp2json",
M
Mr.doob 已提交
170 171
				"webgl_loader_collada",
				"webgl_loader_collada_keyframe",
172
				"webgl_loader_collada_skinning",
M
Mr.doob 已提交
173 174
				"webgl_loader_ctm",
				"webgl_loader_ctm_materials",
175
				"webgl_loader_gltf",
M
Mr.doob 已提交
176 177 178 179 180 181 182 183 184 185 186 187
				"webgl_loader_json_blender",
				"webgl_loader_json_objconverter",
				"webgl_loader_obj",
				"webgl_loader_obj_mtl",
				"webgl_loader_ply",
				"webgl_loader_scene",
				"webgl_loader_scene_blender",
				"webgl_loader_stl",
				"webgl_loader_utf8",
				"webgl_loader_vrml",
				"webgl_loader_vtk",
				"webgl_lod",
M
Mr.doob 已提交
188
				"webgl_marchingcubes",
M
Mr.doob 已提交
189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215
				"webgl_materials",
				"webgl_materials2",
				"webgl_materials_blending",
				"webgl_materials_blending_custom",
				"webgl_materials_bumpmap",
				"webgl_materials_bumpmap_skin",
				"webgl_materials_cars",
				"webgl_materials_cars_camaro",
				"webgl_materials_cubemap",
				"webgl_materials_cubemap_balls_reflection",
				"webgl_materials_cubemap_balls_refraction",
				"webgl_materials_cubemap_dynamic",
				"webgl_materials_cubemap_dynamic2",
				"webgl_materials_cubemap_escher",
				"webgl_materials_cubemap_refraction",
				"webgl_materials_grass",
				"webgl_materials_lightmap",
				"webgl_materials_normalmap",
				"webgl_materials_normalmap2",
				"webgl_materials_shaders_fresnel",
				"webgl_materials_skin",
				"webgl_materials_texture_anisotropy",
				"webgl_materials_texture_compressed",
				"webgl_materials_texture_filters",
				"webgl_materials_texture_manualmipmap",
				"webgl_materials_video",
				"webgl_materials_wireframe",
M
Mr.doob 已提交
216
				"webgl_mirror",
M
Mr.doob 已提交
217 218 219
				"webgl_morphnormals",
				"webgl_morphtargets",
				"webgl_morphtargets_horse",
220
				"webgl_morphtargets_human",
M
Mr.doob 已提交
221 222 223 224 225 226
				"webgl_morphtargets_md2",
				"webgl_morphtargets_md2_control",
				"webgl_multiple_canvases_circle",
				"webgl_multiple_canvases_complex",
				"webgl_multiple_canvases_grid",
				"webgl_multiple_views",
M
Mr.doob 已提交
227
				"webgl_nearestneighbour",
M
Mr.doob 已提交
228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245
				"webgl_octree",
				"webgl_octree_raycasting",
				"webgl_panorama_equirectangular",
				"webgl_particles_billboards",
				"webgl_particles_billboards_colors",
				"webgl_particles_dynamic",
				"webgl_particles_random",
				"webgl_particles_shapes",
				"webgl_particles_sprites",
				"webgl_performance",
				"webgl_performance_doublesided",
				"webgl_performance_static",
				"webgl_postprocessing",
				"webgl_postprocessing2",
				"webgl_postprocessing_advanced",
				"webgl_postprocessing_dof",
				"webgl_postprocessing_dof2",
				"webgl_postprocessing_godrays",
246
				"webgl_postprocessing_crossfade",
M
Mr.doob 已提交
247 248 249 250
				"webgl_rtt",
				"webgl_sandbox",
				"webgl_shader",
				"webgl_shader2",
251
				"webgl_shaders_ocean",
M
Mr.doob 已提交
252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278
				"webgl_shader_lava",
				"webgl_shading_physical",
				"webgl_shadowmap",
				"webgl_shadowmap_performance",
				"webgl_sprites",
				"webgl_terrain_dynamic",
				"webgl_test_memory",
				"webgl_test_memory2",
				"webgl_trails"
			],
			"webgl3": [
				"webgl3_performance"
			],
			"webgldeferred": [
				"webgldeferred_animation",
				"webgldeferred_arealights",
				"webgldeferred_pointlights"
			],
			"css3d": [
				"css3d_molecules",
				"css3d_panorama",
				"css3d_periodictable",
				"css3d_sandbox",
				"css3d_sprites",
				"css3d_youtube"
			],
			"misc": [
J
jox81 已提交
279
				"misc_animation_keys",
M
Mr.doob 已提交
280
				"misc_controls_deviceorientation",
M
Mr.doob 已提交
281 282 283 284 285 286 287 288 289 290 291
				"misc_controls_fly",
				"misc_controls_oculusrift",
				"misc_controls_orbit",
				"misc_controls_path",
				"misc_controls_pointerlock",
				"misc_controls_trackball",
				"misc_controls_transform",
				"misc_lights_test",
				"misc_lookat",
				"misc_sound",
				"misc_ubiquity_test",
M
Mr.doob 已提交
292
				"misc_ubiquity_test2",
M
Mr.doob 已提交
293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316
				"misc_uv_tests"
			],
			"canvas": [
				"canvas_ascii_effect",
				"canvas_camera_orthographic",
				"canvas_camera_orthographic2",
				"canvas_geometry_birds",
				"canvas_geometry_cube",
				"canvas_geometry_earth",
				"canvas_geometry_hierarchy",
				"canvas_geometry_nurbs",
				"canvas_geometry_panorama",
				"canvas_geometry_panorama_fisheye",
				"canvas_geometry_shapes",
				"canvas_geometry_terrain",
				"canvas_geometry_text",
				"canvas_interactive_cubes",
				"canvas_interactive_cubes_tween",
				"canvas_interactive_lines",
				"canvas_interactive_particles",
				"canvas_interactive_voxelpainter",
				"canvas_lights_pointlights",
				"canvas_lines",
				"canvas_lines_colors",
M
Mr.doob 已提交
317
				"canvas_lines_dashed",
M
Mr.doob 已提交
318 319 320 321 322 323
				"canvas_lines_sphere",
				"canvas_materials",
				"canvas_materials_depth",
				"canvas_materials_normal",
				"canvas_materials_reflection",
				"canvas_materials_video",
M
Mr.doob 已提交
324
				"canvas_morphtargets_horse",
M
Mr.doob 已提交
325 326 327 328 329 330 331 332
				"canvas_particles_floor",
				"canvas_particles_random",
				"canvas_particles_shapes",
				"canvas_particles_sprites",
				"canvas_particles_waves",
				"canvas_performance",
				"canvas_sandbox"
			],
M
Mr.doob 已提交
333 334 335
			"raytracing": [
				"raytracing_sandbox"
			],
M
Mr.doob 已提交
336 337 338 339
			"software": [
				"software_sandbox"
			]
		};
M
Mr.doob 已提交
340

M
Mr.doob 已提交
341 342
		//

M
Mr.doob 已提交
343
		var list = document.getElementById( 'list' );
M
Mr.doob 已提交
344
		var viewer = document.getElementById( 'viewer' );
M
Mr.doob 已提交
345 346 347 348

		var container = document.createElement( 'div' );
		list.appendChild( container );

349 350
		var button = document.createElement( 'div' );
		button.id = 'button';
351
		button.textContent = '#';
352 353 354 355 356
		button.addEventListener( 'click', function ( event ) {

			var array = location.href.split( '/' );
			array.pop();

357
			window.open( array.join( '/' ) + '/' + selected + '.html' );
358 359 360 361 362

		}, false );
		button.style.display = 'none';
		document.body.appendChild( button );

M
Mr.doob 已提交
363
		var divs = {};
364
		var selected = null;
M
Mr.doob 已提交
365

M
Mr.doob 已提交
366
		for ( var key in files ) {
M
Mr.doob 已提交
367

M
Mr.doob 已提交
368
			var section = files[ key ];
M
Mr.doob 已提交
369

M
Mr.doob 已提交
370 371 372
			var div = document.createElement( 'h2' );
			div.textContent = key;
			container.appendChild( div );
M
Mr.doob 已提交
373

M
Mr.doob 已提交
374
			for ( var i = 0; i < section.length; i ++ ) {
M
Mr.doob 已提交
375

M
Mr.doob 已提交
376
				( function ( file ) {
M
Mr.doob 已提交
377

M
Mr.doob 已提交
378 379 380
					var name = file.split( '_' );
					name.shift();
					name = name.join( ' / ' );
M
Mr.doob 已提交
381

M
Mr.doob 已提交
382 383 384 385 386 387 388 389 390 391 392 393 394 395 396
					var div = document.createElement( 'div' );
					div.className = 'link';
					div.textContent = name;
					div.addEventListener( 'click', function () {

						load( file );

					} );
					container.appendChild( div );

					divs[ file ] = div;

				} )( section[ i ] );

			}
M
Mr.doob 已提交
397 398 399 400 401

		}

		var load = function ( file ) {

402
			if ( selected !== null ) divs[ selected ].className = 'link';
M
Mr.doob 已提交
403

M
Mr.doob 已提交
404
			divs[ file ].className = 'link selected';
M
Mr.doob 已提交
405 406 407

			window.location.hash = file;
			viewer.src = file + '.html';
M
Mr.doob 已提交
408
			viewer.focus();
M
Mr.doob 已提交
409

410 411
			button.style.display = '';

M
Mr.doob 已提交
412 413
			selected = file;

M
Mr.doob 已提交
414
		};
M
Mr.doob 已提交
415

M
Mr.doob 已提交
416
		if ( window.location.hash !== '' ) {
M
Mr.doob 已提交
417

M
Mr.doob 已提交
418
			load( window.location.hash.substring( 1 ) );
M
Mr.doob 已提交
419 420 421 422 423 424

		}

		</script>

	</body>
425
</html>