javascript
/
three.js
镜像来自 https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
							<!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;

			}

			h1 {

				font-size: 25px;
				font-weight: normal;

			}

			#panel {

				position: absolute;
				width: 300px;
				height: 100%;
				overflow: scroll;

			}

				#panel #list {

					padding: 10px 20px;
					line-height: 18px;

				}

				#panel #list .link {

					color: #2194CE;
					text-decoration: none;
					cursor: pointer;

				}

				#panel #list .selected {

					color: #ff0000;

				}

					#panel #list .link:hover {

						text-decoration: underline;

					}

			#viewer {

				position: absolute;
				left: 300px;
				width: calc(100% - 300px);
				height: 100%;
				border: 0px;

			}

		</style>
	</head>
	<body>

		<div id="panel">
			<div id="list">
				<h1>three.js examples</h1>
				<br />
			</div>
		</div>
		<iframe id="viewer"></iframe>

		<script>

		var files = [

			"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_lights_pointlights_smooth",
			"canvas_lines",
			"canvas_lines_colors",
			"canvas_lines_sphere",
			"canvas_materials",
			"canvas_materials_depth",
			"canvas_materials_normal",
			"canvas_materials_reflection",
			"canvas_materials_video",
			"canvas_particles_floor",
			"canvas_particles_random",
			"canvas_particles_shapes",
			"canvas_particles_sprites",
			"canvas_particles_waves",
			"canvas_performance",
			"canvas_sandbox",
			"css3d_molecules",
			"css3d_panorama",
			"css3d_periodictable",
			"css3d_sandbox",
			"css3d_sprites",
			"css3d_youtube",
			"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",
			"misc_uv_tests",
			"software_sandbox",
			"webgl3_performance",
			"webgl_animation_cloth",
			"webgl_animation_skinning",
			"webgl_animation_skinning_morph",
			"webgl_buffergeometry",
			"webgl_buffergeometry_custom_attributes_particles",
			"webgl_buffergeometry_lines",
			"webgl_buffergeometry_particles",
			"webgl_camera",
			"webgl_custom_attributes",
			"webgl_custom_attributes_lines",
			"webgl_custom_attributes_particles",
			"webgl_custom_attributes_particles2",
			"webgl_custom_attributes_particles3",
			"webgl_custom_attributes_ribbons",
			"webgl_geometries",
			"webgl_geometries2",
			"webgl_geometry_colors",
			"webgl_geometry_colors_blender",
			"webgl_geometry_convex",
			"webgl_geometry_cube",
			"webgl_geometry_dynamic",
			"webgl_geometry_extrude_shapes",
			"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_minecraft_oculusrift",
			"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",
			"webgl_hdr",
			"webgl_helpers",
			"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",
			"webgl_loader_collada",
			"webgl_loader_collada_keyframe",
			"webgl_loader_ctm",
			"webgl_loader_ctm_materials",
			"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",
			"webgl_marching_cubes",
			"webgl_materials",
			"webgl_materials2",
			"webgl_materials_blending",
			"webgl_materials_blending_custom",
			"webgl_materials_bumpmap",
			"webgl_materials_bumpmap_skin",
			"webgl_materials_cars",
			"webgl_materials_cars_anaglyph",
			"webgl_materials_cars_camaro",
			"webgl_materials_cars_camaro_crosseyed",
			"webgl_materials_cars_parallaxbarrier",
			"webgl_materials_cubemap",
			"webgl_materials_cubemap_balls_reflection",
			"webgl_materials_cubemap_balls_reflection_anaglyph",
			"webgl_materials_cubemap_balls_refraction",
			"webgl_materials_cubemap_balls_refraction_crosseyed",
			"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",
			"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",
			"webgl_morphnormals",
			"webgl_morphtargets",
			"webgl_morphtargets_horse",
			"webgl_morphtargets_md2",
			"webgl_morphtargets_md2_control",
			"webgl_multiple_canvases_circle",
			"webgl_multiple_canvases_complex",
			"webgl_multiple_canvases_grid",
			"webgl_multiple_views",
			"webgl_multiple_windows",
			"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",
			"webgl_ribbons",
			"webgl_rtt",
			"webgl_sandbox",
			"webgl_shader",
			"webgl_shader2",
			"webgl_shader_lava",
			"webgl_shading_physical",
			"webgl_shadowmap",
			"webgl_shadowmap_performance",
			"webgl_sprites",
			"webgl_terrain_dynamic",
			"webgl_test_memory",
			"webgl_test_memory2",
			"webgl_trails",
			"webgldeferred_animation",
			"webgldeferred_arealights",
			"webgldeferred_pointlights"

		];

		//

		var list = document.getElementById( 'list' );
		var viewer = document.getElementById( 'viewer' );

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

		var divs = {};
		var SELECTED = null;

		for ( var i = 0; i < files.length; i ++ ) {

			( function ( file ) {

				var div = document.createElement( 'div' );
				div.className = 'link';
				div.textContent = file;
				div.addEventListener( 'click', function () {

					load( file );

				} );
				container.appendChild( div );

				divs[ file ] = div;

			} )( files[ i ] );

		}

		var load = function ( file ) {

			if ( SELECTED !== null ) SELECTED.className = 'link';

			SELECTED = divs[ file ];
			SELECTED.className = 'link selected';

			window.location.hash = file;
			viewer.src = file + '.html';

		};

		if ( window.location.hash !== '' ) {

			load( window.location.hash.substring( 1 ) );

		}

		</script>

	</body>
</html>