Quellcode durchsuchen

Modifications to support blacklisted Android chipsets

Index.html updated with refresh fix.
Some Android stock browsers don't support some css properties and the
width resizes to the whole screen in landscape mode. It works perfectly
in portrait mode though.
src/Three.js updated with requestanimationframe shim.
index_mobile.html removed.
Cy-Bo-Rg vor 10 Jahren
Ursprung
Commit
24d42f8167
3 geänderte Dateien mit 28 neuen und 494 gelöschten Zeilen
  1. 27 2
      examples/index.html
  2. 0 490
      examples/index_mobile.html
  3. 1 2
      src/Three.js

+ 27 - 2
examples/index.html

@@ -32,6 +32,31 @@
 				overflow: hidden;
 				overflow: hidden;
 			}
 			}
 
 
+			.marquee { 
+				width:130px;
+				height:40px;
+				padding:5px;
+				background-color: yellowgreen;
+				border: 20px solid rgba(0,0,0,0.3);
+				white-space: nowrap; 
+				overflow: hidden;
+
+				/* Safari and Chrome  */
+				overflow-x:-webkit-marquee;
+				-webkit-marquee-direction: backwards;
+				-webkit-marquee-style: scroll;
+				-webkit-marquee-speed: fast;
+				-webkit-marquee-increment: small;
+				-webkit-marquee-repetition: infinite;
+
+				/* W3C  */
+				overflow-x: marquee-line;
+				marquee-direction: forward;
+				marquee-style: scroll;
+				marquee-speed: fast;
+				marquee-play-count: infinite;
+			}
+
 			h1 {
 			h1 {
 				margin-top: 30px;
 				margin-top: 30px;
 				margin-bottom: 40px;
 				margin-bottom: 40px;
@@ -183,7 +208,7 @@
 			</a>
 			</a>
 			<div id="content"></div>
 			<div id="content"></div>
 		</div>
 		</div>
-		<iframe id="viewer" allowfullscreen onmousewheel=""></iframe>
+		<article><iframe id="viewer" width="100%" allowfullscreen onmousewheel=""></iframe>
 
 
 		<script>
 		<script>
 
 
@@ -564,7 +589,7 @@
 
 
 		}
 		}
 
 
-		</script>
+		</script><div class="marquee"><p>refresh_fix_on_some_blacklisted_android_chipsets</p></div></article>
 
 
 	</body>
 	</body>
 </html>
 </html>

+ 0 - 490
examples/index_mobile.html

@@ -1,490 +0,0 @@
-<!DOCTYPE html>
-<!--Modified index.html to support android stock browser on blacklisted devices with black screen,refresh and resize problems-->
-<!--I've added the possibility to resize demo elements only for practical reasons when working on smaller screens-->
-<!--fixed by cyborg-->
-<html lang="en">
-	<head>
-		<meta charset="utf-8"></meta>
-		<title>three.js - examples</title>
-		
-		<style>
-			div {
-				border: 2px solid;
-				resize: both;
-				overflow: hidden;
-			}
-			@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;
-			}
-
-.marquee { 
-width:130px;
-height:40px;
-padding:5px;
-background-color: yellowgreen;
-border: 20px solid rgba(0,0,0,0.3);
-white-space: nowrap; 
-overflow: hidden;
-
-/* Safari and Chrome  */
-overflow-x:-webkit-marquee;
--webkit-marquee-direction: backwards;
--webkit-marquee-style: scroll;
--webkit-marquee-speed: fast;
--webkit-marquee-increment: small;
--webkit-marquee-repetition: infinite;
-
-/* W3C  */
-overflow-x: marquee-line;
-marquee-direction: forward;
-marquee-style: scroll;
-marquee-speed: fast;
-marquee-play-count: infinite;
-}
-
-			a {
-				color: #2194CE;
-				text-decoration: none;
-			}
-
-			h1 {
-				margin-top: 30px;
-				margin-bottom: 40px;
-				font-size: 25px;
-				font-weight: normal;
-			}
-
-			h2 {
-				font-size: 20px;
-				font-weight: normal;
-			}
-
-			#panel {
-				position: absolute;
-				width: 310px;
-				height: 100%;
-				resize: both;
-				overflow: scroll;
-				background: #fafafa;
-			}
-
-				#panel #list {
-					padding: 0px 20px;
-					line-height: 18px;
-				}
-
-				#panel #list .link {
-					color: #2194CE;
-					text-decoration: none;
-					resize: both;
-					cursor: pointer;
-				}
-
-				#panel #list .selected {
-					color: #ff0000;
-				}
-
-					#panel #list .link:hover {
-						text-decoration: underline;
-					}
-
-			#viewer {
-				position: absolute;
-				left: 310px;
-				width: -webkit-calc(100% - 310px); /* Safari */
-				width: calc(100% - 310px);
-				height: 100%;
-				resize: both;
-				border: 0px;
-			}
-
-			#button {
-				position: fixed;
-				top: 20px;
-				right: 20px;
-				padding: 8px;
-				color: #fff;
-				background-color: #555;
-				opacity: 0.7;
-			}
-
-				#button:hover {
-					cursor: pointer;
-					opacity: 1;
-				}
-
-		</style>
-	</head>
-	<body>
-		<div id="panel">
-			<div id="list">
-				<h1><a href="http://threejs.org">three.js</a> / examples</h1>
-			</div>
-		</div>
-
-
-<article><iframe id="viewer" width="670" allowfullscreen></iframe>
-
-		<script>
-
-		var files = {
-			"webgl": [
-				"webgl_animation_cloth",
-				"webgl_animation_skinning_blending",
-				"webgl_animation_skinning_morph",
-				"webgl_buffergeometry",
-				"webgl_buffergeometry_custom_attributes_particles",
-				"webgl_buffergeometry_lines",
-				"webgl_buffergeometry_lines_indexed",
-				"webgl_buffergeometry_particles",
-				"webgl_buffergeometry_drawcalls",
-				"webgl_buffergeometry_rawshader",
-				"webgl_buffergeometry_uint",
-				"webgl_camera",
-				"webgl_camera_logarithmicdepthbuffer",
-				"webgl_custom_attributes",
-				"webgl_custom_attributes_lines",
-				"webgl_custom_attributes_particles",
-				"webgl_custom_attributes_particles2",
-				"webgl_custom_attributes_particles3",
-				"webgl_decals",
-				"webgl_effects_anaglyph",
-				"webgl_effects_parallaxbarrier",
-				"webgl_effects_stereo",
-				"webgl_geometries",
-				"webgl_geometries2",
-				"webgl_geometry_colors",
-				"webgl_geometry_colors_blender",
-				"webgl_geometry_colors_lookuptable",
-				"webgl_geometry_convex",
-				"webgl_geometry_cube",
-				"webgl_geometry_dynamic",
-				"webgl_geometry_extrude_shapes",
-				"webgl_geometry_extrude_shapes2",
-				"webgl_geometry_extrude_splines",
-				"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_terrain",
-				"webgl_geometry_terrain_fog",
-				"webgl_geometry_terrain_raycast",
-				"webgl_geometry_text",
-				"webgl_geometry_text2",
-				"webgl_gpgpu_birds",
-				"webgl_hdr",
-				"webgl_helpers",
-				"webgl_interactive_buffergeometry",
-				"webgl_interactive_cubes",
-				"webgl_interactive_cubes_gpu",
-				"webgl_interactive_cubes_ortho",
-				"webgl_interactive_draggablecubes",
-				"webgl_interactive_lines",
-				"webgl_interactive_particles",
-				"webgl_interactive_raycasting_pointcloud",
-				"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_assimp2json",
-				"webgl_loader_awd",
-				"webgl_loader_babylon",
-				"webgl_loader_collada",
-				"webgl_loader_collada_keyframe",
-				"webgl_loader_collada_skinning",
-				"webgl_loader_collada_kinematics",
-				"webgl_loader_ctm",
-				"webgl_loader_ctm_materials",
-				"webgl_loader_gltf",
-				"webgl_loader_json_blender",
-				"webgl_loader_json_objconverter",
-				"webgl_loader_msgpack",
-				"webgl_loader_obj",
-				"webgl_loader_obj_mtl",
-				"webgl_loader_pdb",	
-				"webgl_loader_ply",
-				"webgl_loader_scene",
-				"webgl_loader_stl",
-				"webgl_loader_utf8",
-				"webgl_loader_vrml",
-				"webgl_loader_vtk",
-				"webgl_lod",
-				"webgl_marchingcubes",
-				"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_envmaps",
-				"webgl_materials_grass",
-				"webgl_materials_lightmap",
-				"webgl_materials_normalmap",
-				"webgl_materials_normaldisplacementmap",
-				"webgl_materials_parallaxmap",
-				"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_texture_pvrtc",
-				"webgl_materials_texture_tga",
-				"webgl_materials_video",
-				"webgl_materials_wireframe",
-				"webgl_mirror",
-				"webgl_modifier_subdivision",
-				"webgl_modifier_tessellation",
-				"webgl_morphnormals",
-				"webgl_morphtargets",
-				"webgl_morphtargets_horse",
-				"webgl_morphtargets_human",
-				"webgl_morphtargets_md2",
-				"webgl_morphtargets_md2_control",
-				"webgl_multiple_canvases_circle",
-				"webgl_multiple_canvases_complex",
-				"webgl_multiple_canvases_grid",
-				"webgl_multiple_views",
-				"webgl_nearestneighbour",
-				"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_postprocessing_advanced",
-				"webgl_postprocessing_dof",
-				"webgl_postprocessing_dof2",
-				"webgl_postprocessing_godrays",
-				"webgl_postprocessing_crossfade",
-				"webgl_postprocessing_glitch",
-				"webgl_rtt",
-				"webgl_sandbox",
-				"webgl_shader",
-				"webgl_shader_lava",
-				"webgl_shader2",
-				"webgl_shaders_ocean",
-				"webgl_shading_physical",
-				"webgl_shaders_sky",
-				"webgl_shaders_tonemapping",
-				"webgl_shaders_vector",
-				"webgl_shadowmap",
-				"webgl_shadowmap_performance",
-				"webgl_shadowmap_viewer",
-				"webgl_shadowmesh",
-				"webgl_sprites",
-				"webgl_terrain_dynamic",
-				"webgl_test_memory",
-				"webgl_test_memory2",
-				"webgl_trails",
-				"webgl_video_panorama_equirectangular"
-			],
-			"webgldeferred": [
-				"webgldeferred_animation",
-				"webgldeferred_arealights",
-				"webgldeferred_pointlights"
-			],
-			"vr": [
-				"vr_cubes",
-				"vr_video"
-			],
-			"css3d": [
-				"css3d_molecules",
-				"css3d_panorama",
-				"css3d_periodictable",
-				"css3d_sandbox",
-				"css3d_sprites",
-				"css3d_youtube"
-			],
-			"css3d stereo": [
-				"css3dstereo_periodictable",
-			],
-			"misc": [
-				"misc_animation_keys",
-				"misc_controls_deviceorientation",
-				"misc_controls_fly",
-				"misc_controls_orbit",
-				"misc_controls_pointerlock",
-				"misc_controls_trackball",
-				"misc_controls_transform",
-				"misc_lights_test",
-				"misc_lookat",
-				"misc_fps",
-				"misc_sound",
-				"misc_ubiquity_test",
-				"misc_ubiquity_test2",
-				"misc_uv_tests"
-			],
-			"canvas": [
-				"canvas_ascii_effect",
-				"canvas_camera_orthographic",
-				"canvas_camera_orthographic2",
-				"canvas_effects_stereo",
-				"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_particles",
-				"canvas_interactive_voxelpainter",
-				"canvas_lights_pointlights",
-				"canvas_lines",
-				"canvas_lines_colors",
-				"canvas_lines_dashed",
-				"canvas_lines_sphere",
-				"canvas_materials",
-				"canvas_materials_depth",
-				"canvas_materials_normal",
-				"canvas_materials_reflection",
-				"canvas_materials_video",
-				"canvas_morphtargets_horse",
-				"canvas_particles_floor",
-				"canvas_particles_random",
-				"canvas_particles_shapes",
-				"canvas_particles_sprites",
-				"canvas_particles_waves",
-				"canvas_performance",
-				"canvas_sandbox"
-			],
-			"raytracing": [
-				"raytracing_sandbox"
-			],
-			"software": [
-				"software_geometry_earth",
-				"software_sandbox"
-			],
-			"svg": [
-				"svg_sandbox"
-			]
-		};
-
-		//
-
-		var list = document.getElementById( 'list' );
-		var viewer = document.getElementById( 'viewer' );
-
-		var container = document.createElement( 'div' );
-		list.appendChild( container );
-
-		var button = document.createElement( 'div' );
-		button.id = 'button';
-		button.textContent = 'View source';
-		button.addEventListener( 'click', function ( event ) {
-
-			var array = location.href.split( '/' );
-			array.pop();
-
-			window.open( 'view-source:' + array.join( '/' ) + '/' + selected + '.html' );
-
-		}, false );
-		button.style.display = 'none';
-		document.body.appendChild( button );
-
-		var divs = {};
-		var selected = null;
-
-		for ( var key in files ) {
-
-			var section = files[ key ];
-
-			var div = document.createElement( 'h2' );
-			div.textContent = key;
-			container.appendChild( div );
-
-			for ( var i = 0; i < section.length; i ++ ) {
-
-				( function ( file ) {
-
-					var name = file.split( '_' );
-					name.shift();
-					name = name.join( ' / ' );
-
-					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 ] );
-
-			}
-
-		}
-
-		var load = function ( file ) {
-
-			if ( selected !== null ) divs[ selected ].className = 'link';
-
-			divs[ file ].className = 'link selected';
-
-			window.location.hash = file;
-			viewer.src = file + '.html';
-			viewer.focus();
-
-			button.style.display = '';
-
-			selected = file;
-
-		};
-
-		if ( window.location.hash !== '' ) {
-
-			load( window.location.hash.substring( 1 ) );
-
-		}
-
-		</script><div class="marquee"><p>refresh fix by cyborg</p></div></article>
-
-	</body>
-</html>

+ 1 - 2
src/Three.js

@@ -3,8 +3,7 @@
  */
  */
 
 
 var THREE = { REVISION: '72dev' };
 var THREE = { REVISION: '72dev' };
-// I've added this again because it fixes android support for stock browser on blacklisted devices
-// but it completely fixes refresh errors with my modified index_mobile.html
+// I've added these lines again because it fixes android support for stock browser many blacklisted devices
 // it is to be considered a temporary workaroud until the real cause is found
 // it is to be considered a temporary workaroud until the real cause is found
 // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating