Inicio Explorar Axuda
Iniciar sesión
javascript
/
three.js
réplica de https://github.com/tazdij/three.js.git
2
0
Fork 0
Ficheiros Incidencias 0 Wiki
Explorar o código

Examples: Mobile friendly.

Mr.doob %!s(int64=10) %!d(string=hai) anos
pai
812338ae48
achega
85a9ce57e8
Modificáronse 3 ficheiros con 152 adicións e 63 borrados
Unificar vista Mostrar estatísticas de Diff
  1. 34 36
      docs/index.html
  2. 1 1
      editor/index.html
  3. 117 26
      examples/index.html

+ 34 - 36
docs/index.html
Ver ficheiro 

@@ -2,9 +2,10 @@
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
-		<title>three.js - documentation</title>
 
+		<title>three.js / documentation</title>
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 		<style>
 
+
 
 			@font-face {
 
 			@font-face {
 
 				font-family: 'inconsolata';
 
 				font-family: 'inconsolata';
 
 				src: url('files/inconsolata.woff') format('woff');
 
 				src: url('files/inconsolata.woff') format('woff');
 
@@ -12,18 +13,13 @@
 
 				font-style: normal;
 
 				font-style: normal;
 
 			}
 
 			}
 
 
 
-			*{
 
-				box-sizing: border-box;
 
-			}
 
-
 
 			html {
 
 			html {
 
 				height: 100%;
 
 				height: 100%;
 
 			}
 
 			}
 
 
 
 			body {
 
 			body {
 
 				background-color: #ffffff;
 
 				background-color: #ffffff;
 
-				margin: 0;
 
-				padding: 0 0 0 260px;
 
+				margin: 0px;
 
 				height: 100%;
 
 				height: 100%;
 
 				color: #555;
 
 				color: #555;
 
 				font-family: 'inconsolata';
 
 				font-family: 'inconsolata';
 
@@ -37,7 +33,7 @@
 
 				text-decoration: none;
 
 				text-decoration: none;
 
 			}
 
 			}
 
 
 
-			#panel	{
 
+			#panel {
 
 				position: fixed;
 
 				position: fixed;
 
 				left: 0px;
 
 				left: 0px;
 
 				width: 260px;
 
 				width: 260px;
 
@@ -79,8 +75,10 @@
 
 				}
 
 				}
 
 
 
 			#viewer {
 
 			#viewer {
 
+				position: absolute;
 
 				border: 0px;
 
 				border: 0px;
 
-				width: 100%;
 
+				left: 260px;
 
+				width: calc(100% - 260px);
 
 				height: 100%;
 
 				height: 100%;
 
 				overflow: auto;
 
 				overflow: auto;
 
 			}
 
 			}
 
@@ -133,6 +131,8 @@
 
 				font-weight: bold;
 
 				font-weight: bold;
 
 			}
 
 			}
 
 
 
+			/* mobile */
 
+
 
 			#expandButton {
 
 			#expandButton {
 
 				display: none;
 
 				display: none;
 
 				position: absolute;
 
 				position: absolute;
 
@@ -142,22 +142,22 @@
 
 				height: 32px;
 
 				height: 32px;
 
 			}
 
 			}
 
 
 
-			#expandButton span {
 
-				height: 1px;
 
-				background-color: #2194CE;
 
-				width: 16px;
 
-				position: absolute;
 
-				left: 8px;
 
-				top: 10px;
 
-			}
 
+				#expandButton span {
 
+					height: 2px;
 
+					background-color: #2194CE;
 
+					width: 16px;
 
+					position: absolute;
 
+					left: 8px;
 
+					top: 10px;
 
+				}
 
 
 
-			#expandButton span:nth-child(1) {
 
-				top: 16px;
 
-			}
 
+				#expandButton span:nth-child(1) {
 
+					top: 16px;
 
+				}
 
 
 
-			#expandButton span:nth-child(2) {
 
-				top: 22px;
 
-			}
 
+				#expandButton span:nth-child(2) {
 
+					top: 22px;
 
+				}
 
 
 
 			@media all and ( max-width: 640px ) {
 
 			@media all and ( max-width: 640px ) {
 
 				#panel{
 
 				#panel{
 
@@ -171,18 +171,24 @@
 
 					overflow: hidden;
 
 					overflow: hidden;
 
 					border-bottom: 1px solid #dedede;
 
 					border-bottom: 1px solid #dedede;
 
 				}
 
 				}
 
+				#panel h1{
 
+					margin-top: 20px;
 
+					margin-bottom: 20px;
 
+				}
 
 				#content{
 
 				#content{
 
 					overflow: auto;
 
 					overflow: auto;
 
 					position: absolute;
 
 					position: absolute;
 
 					left: 0;
 
 					left: 0;
 
-					top: 120px;
 
+					top: 90px;
 
 					right: 0;
 
 					right: 0;
 
 					bottom: 0;
 
 					bottom: 0;
 
 				}
 
 				}
 
 				#viewer{
 
 				#viewer{
 
 					position: absolute;
 
 					position: absolute;
 
 					left: 0;
 
 					left: 0;
 
-					top: 48px;
 
+					top: 56px;
 
+					width: 100%;
 
+					height: calc(100% - 56px);
 
 				}
 
 				}
 
 				#expandButton{
 
 				#expandButton{
 
 					display: block;
 
 					display: block;
 
@@ -190,13 +196,6 @@
 
 				#panel.collapsed{
 
 				#panel.collapsed{
 
 					height: 56px;
 
 					height: 56px;
 
 				}
 
 				}
 
-				#panel h1{
 
-					margin-top: 20px;
 
-					margin-bottom: 20px;
 
-				}
 
-				#content{
 
-					top: 90px;
 
-				}
 
 			}
 
 			}
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
@@ -213,8 +212,7 @@
 
 				<input type="text" id="filterInput" placeholder="Type to filter"/>
 
 				<input type="text" id="filterInput" placeholder="Type to filter"/>
 
 				<a href="#" id="clearFilterButton" >x</a>
 
 				<a href="#" id="clearFilterButton" >x</a>
 
 			</div>
 
 			</div>
 
-			<div id="content" >
 
-			</div>
 
+			<div id="content"></div>
 
 		</div>
 
 		</div>
 
 		<iframe id="viewer"></iframe>
 
 		<iframe id="viewer"></iframe>
 
 
 
@@ -224,9 +222,9 @@
 
 			var viewer = document.getElementById( 'viewer' );
 
 			var viewer = document.getElementById( 'viewer' );
 
 
 
 			var expandButton = document.getElementById( 'expandButton' );
 
 			var expandButton = document.getElementById( 'expandButton' );
 
-			expandButton.addEventListener( 'click', function( e ) {
 
+			expandButton.addEventListener( 'click', function ( event ) {
 
 				panel.classList.toggle( 'collapsed' );
 
 				panel.classList.toggle( 'collapsed' );
 
-				e.preventDefault();
 
+				event.preventDefault();
 
 			} );
 
 			} );
 
 
 
 			var filterInput = document.getElementById( 'filterInput' );
 
 			var filterInput = document.getElementById( 'filterInput' );

+ 1 - 1
editor/index.html
Ver ficheiro 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js editor</title>
 
+		<title>three.js / editor</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 	</head>
 
 	</head>

+ 117 - 26
examples/index.html
Ver ficheiro 

@@ -1,8 +1,9 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
 	<head>
 
 	<head>
 
-		<title>three.js - examples</title>
 
 		<meta charset="utf-8">
 
 		<meta charset="utf-8">
 
+		<title>three.js / examples</title>
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
 		<style>
 
 		<style>
 
 
 
 			@font-face {
 
 			@font-face {
 
@@ -12,11 +13,18 @@
 
 				font-style: normal;
 
 				font-style: normal;
 
 			}
 
 			}
 
 
 
+			html {
 
+				height: 100%;
 
+			}
 
+
 
 			body {
 
 			body {
 
 				background-color: #ffffff;
 
 				background-color: #ffffff;
 
 				margin: 0px;
 
 				margin: 0px;
 
+				height: 100%;
 
+				color: #555;
 
 				font-family: 'inconsolata';
 
 				font-family: 'inconsolata';
 
 				font-size: 15px;
 
 				font-size: 15px;
 
+				line-height: 18px;
 
 				overflow: hidden;
 
 				overflow: hidden;
 
 			}
 
 			}
 
 
 
@@ -25,51 +33,54 @@
 
 				text-decoration: none;
 
 				text-decoration: none;
 
 			}
 
 			}
 
 
 
-			h1 {
 
-				margin-top: 30px;
 
-				margin-bottom: 40px;
 
-				font-size: 25px;
 
-				font-weight: normal;
 
-			}
 
-
 
-			h2 {
 
-				font-size: 20px;
 
-				font-weight: normal;
 
-			}
 
-
 
 			#panel {
 
 			#panel {
 
-				position: absolute;
 
+				position: fixed;
 
+				left: 0px;
 
 				width: 310px;
 
 				width: 310px;
 
 				height: 100%;
 
 				height: 100%;
 
-				overflow: scroll;
 
+				overflow: auto;
 
 				background: #fafafa;
 
 				background: #fafafa;
 
 			}
 
 			}
 
 
 
-				#panel #list {
 
+				#panel h1 {
 
+					margin-top: 30px;
 
+					margin-bottom: 40px;
 
+					margin-left: 20px;
 
+					font-size: 25px;
 
+					font-weight: normal;
 
+				}
 
+
 
+				#panel h2 {
 
+					font-size: 20px;
 
+					font-weight: normal;
 
+				}
 
+
 
+				#panel #content {
 
 					padding: 0px 20px;
 
 					padding: 0px 20px;
 
 					line-height: 18px;
 
 					line-height: 18px;
 
 				}
 
 				}
 
 
 
-				#panel #list .link {
 
+				#panel #content .link {
 
 					color: #2194CE;
 
 					color: #2194CE;
 
 					text-decoration: none;
 
 					text-decoration: none;
 
 					cursor: pointer;
 
 					cursor: pointer;
 
 				}
 
 				}
 
 
 
-				#panel #list .selected {
 
+				#panel #content .selected {
 
 					color: #ff0000;
 
 					color: #ff0000;
 
 				}
 
 				}
 
 
 
-					#panel #list .link:hover {
 
+					#panel #content .link:hover {
 
 						text-decoration: underline;
 
 						text-decoration: underline;
 
 					}
 
 					}
 
 
 
 			#viewer {
 
 			#viewer {
 
 				position: absolute;
 
 				position: absolute;
 
+				border: 0px;
 
 				left: 310px;
 
 				left: 310px;
 
 				width: calc(100% - 310px);
 
 				width: calc(100% - 310px);
 
 				height: 100%;
 
 				height: 100%;
 
-				border: 0px;
 
+				overflow: auto;
 
 			}
 
 			}
 
 
 
 			#button {
 
 			#button {
 
@@ -87,14 +98,85 @@
 
 					opacity: 1;
 
 					opacity: 1;
 
 				}
 
 				}
 
 
 
+			/* mobile */
 
+
 
+			#expandButton {
 
+				display: none;
 
+				position: absolute;
 
+				right: 20px;
 
+				top: 12px;
 
+				width: 32px;
 
+				height: 32px;
 
+			}
 
+
 
+				#expandButton span {
 
+					height: 2px;
 
+					background-color: #2194CE;
 
+					width: 16px;
 
+					position: absolute;
 
+					left: 8px;
 
+					top: 10px;
 
+				}
 
+
 
+				#expandButton span:nth-child(1) {
 
+					top: 16px;
 
+				}
 
+
 
+				#expandButton span:nth-child(2) {
 
+					top: 22px;
 
+				}
 
+
 
+			@media all and ( max-width: 640px ) {
 
+				#panel{
 
+					position: absolute;
 
+					left: 0;
 
+					top: 0;
 
+					height: 480px;
 
+					width: 100%;
 
+					right: 0;
 
+					z-index: 100;
 
+					overflow: hidden;
 
+					border-bottom: 1px solid #dedede;
 
+				}
 
+				#panel h1{
 
+					margin-top: 20px;
 
+					margin-bottom: 20px;
 
+				}
 
+				#content{
 
+					overflow: auto;
 
+					position: absolute;
 
+					left: 0;
 
+					top: 60px;
 
+					right: 0;
 
+					bottom: 0;
 
+				}
 
+				#viewer{
 
+					position: absolute;
 
+					left: 0;
 
+					top: 56px;
 
+					width: 100%;
 
+					height: calc(100% - 56px);
 
+				}
 
+				#expandButton{
 
+					display: block;
 
+				}
 
+				#panel.collapsed{
 
+					height: 56px;
 
+				}
 
+			}
 
+
 
 		</style>
 
 		</style>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 
 
-		<div id="panel">
 
-			<div id="list">
 
-				<h1><a href="http://threejs.org">three.js</a> / examples</h1>
 
-			</div>
 
+		<div id="panel" class="collapsed">
 
+			<h1><a href="http://threejs.org">three.js</a> / examples</h1>
 
+			<a id="expandButton" href="#" >
 
+				<span></span>
 
+				<span></span>
 
+				<span></span>
 
+			</a>
 
+			<div id="content"></div>
 
 		</div>
 
 		</div>
 
 		<iframe id="viewer" allowfullscreen></iframe>
 
 		<iframe id="viewer" allowfullscreen></iframe>
 
 
 
@@ -363,9 +445,17 @@
 
 
 
 		//
 
 		//
 
 
 
-		var list = document.getElementById( 'list' );
 
+		var content = document.getElementById( 'content' );
 
 		var viewer = document.getElementById( 'viewer' );
 
 		var viewer = document.getElementById( 'viewer' );
 
 
 
+		var expandButton = document.getElementById( 'expandButton' );
 
+		expandButton.addEventListener( 'click', function ( event ) {
 
+			panel.classList.toggle( 'collapsed' );
 
+			event.preventDefault();
 
+		} );
 
+
 
+		// iOS8 workaround
 
+
 
 		if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
 
 		if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
 
 
 
 			viewer.addEventListener( 'load', function ( event ) {
 
 			viewer.addEventListener( 'load', function ( event ) {
 
@@ -378,7 +468,7 @@
 
 		}
 
 		}
 
 
 
 		var container = document.createElement( 'div' );
 
 		var container = document.createElement( 'div' );
 
-		list.appendChild( container );
 
+		content.appendChild( container );
 
 
 
 		var button = document.createElement( 'div' );
 
 		var button = document.createElement( 'div' );
 
 		button.id = 'button';
 
 		button.id = 'button';
 
@@ -418,6 +508,7 @@
 
 					div.textContent = name;
 
 					div.textContent = name;
 
 					div.addEventListener( 'click', function () {
 
 					div.addEventListener( 'click', function () {
 
 
 
+						panel.classList.toggle( 'collapsed' );
 
 						load( file );
 
 						load( file );
 
 
 
 					} );
 
 					} );