Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
javascript
/
three.js
-ын хуулбар https://github.com/tazdij/three.js.git
2
0
Салаа 0
Файлууд Асуудлууд 0 Мэдлэгийн сан
Эх сурвалжийг харах

Design update

Mr.doob 6 жил өмнө
parent
fb5a092c83
commit
0ffd4f0db2
20 өөрчлөгдсөн 363 нэмэгдсэн , 498 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. BIN
      docs/files/inconsolata.woff
  2. 0 213
      docs/index.css
  3. 26 30
      docs/index.html
  4. 58 25
      docs/page.css
  5. 1 2
      docs/page.js
  6. 4 2
      docs/prettify/threejs.css
  7. 3 1
      docs/scenes/bones-browser.html
  8. 3 1
      docs/scenes/geometry-browser.html
  9. 3 1
      docs/scenes/material-browser.html
  10. 1 1
      editor/index.html
  11. BIN
      examples/files/inconsolata.woff
  12. 26 222
      examples/index.html
  13. BIN
      files/RobotoMono-Regular.ttf
  14. BIN
      files/SF-Pro-Text-Regular.otf
  15. 0 0
      files/favicon.ico
  16. 4 0
      files/ic_arrow_drop_down_black_24dp.svg
  17. 4 0
      files/ic_menu_black_24dp.svg
  18. 4 0
      files/ic_mode_edit_black_24dp.svg
  19. 4 0
      files/ic_search_black_24dp.svg
  20. 222 0
      files/main.css

BIN
docs/files/inconsolata.woff
Файл харах


+ 0 - 213
docs/index.css
Файл харах 

@@ -1,213 +0,0 @@
 
-@font-face {
 
-	font-family: 'inconsolata';
 
-	src: url('files/inconsolata.woff') format('woff');
 
-	font-weight: normal;
 
-	font-style: normal;
 
-}
 
-
 
-* {
 
-	box-sizing: border-box;
 
-}
 
-
 
-html {
 
-	height: 100%;
 
-}
 
-
 
-body {
 
-	background-color: #ffffff;
 
-	margin: 0px;
 
-	height: 100%;
 
-	color: #555;
 
-	font-family: 'inconsolata';
 
-	font-size: 15px;
 
-	line-height: 18px;
 
-	overflow: hidden;
 
-}
 
-
 
-h1 {
 
-	margin-top: 30px;
 
-	margin-bottom: 40px;
 
-	font-size: 25px;
 
-	font-weight: normal;
 
-}
 
-
 
-h2 {
 
-	color: #454545;
 
-	font-size: 18px;
 
-	font-weight: normal;
 
-
 
-	margin-top: 20px;
 
-}
 
-
 
-h3 {
 
-	color: #666;
 
-	font-size: 16px;
 
-	font-weight: normal;
 
-
 
-	margin-top: 20px;
 
-}
 
-
 
-a {
 
-	color: #2194CE;
 
-	text-decoration: none;
 
-}
 
-
 
-#panel {
 
-	position: fixed;
 
-	left: 0px;
 
-	width: 260px;
 
-	height: 100%;
 
-	overflow: auto;
 
-	padding: 0px 20px 0px 20px;
 
-	background: #fafafa;
 
-}
 
-
 
-#panel ul {
 
-	list-style-type: none;
 
-	padding: 0px;
 
-}
 
-
 
-iframe {
 
-	position: absolute;
 
-	border: 0px;
 
-	left: 260px;
 
-	width: calc(100% - 260px);
 
-	height: 100%;
 
-	overflow: auto;
 
-}
 
-
 
-.filterBlock {
 
-	position: relative;
 
-}
 
-
 
-.filterBlock p {
 
-	margin: 0;
 
-}
 
-
 
-#filterInput {
 
-	width: 100%;
 
-	padding: 5px;
 
-	font-family: inherit;
 
-	font-size: 15px;
 
-	outline: none;
 
-	border: 1px solid #dedede;
 
-}
 
-
 
-#filterInput:focus{
 
-	border: 1px solid #2194CE;
 
-}
 
-
 
-#clearFilterButton {
 
-	position: absolute;
 
-	right: 6px;
 
-	top: 50%;
 
-	margin-top: -8px;
 
-	width: 16px;
 
-	height: 16px;
 
-	font-size: 14px;
 
-	color: grey;
 
-	text-align: center;
 
-	line-height: 0;
 
-	padding-top: 7px;
 
-	opacity: .5;
 
-}
 
-
 
-#clearFilterButton:hover {
 
-	opacity: 1;
 
-}
 
-
 
-.hidden {
 
-	display: none;
 
-}
 
-
 
-#panel li b {
 
-	font-weight: bold;
 
-}
 
-
 
-/* 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 ) {
 
-
 
-	h1 {
 
-		margin-top: 20px;
 
-		margin-bottom: 20px;
 
-	}
 
-
 
-	#panel {
 
-		position: absolute;
 
-		left: 0;
 
-		top: 0;
 
-		height: 100%;
 
-		width: 100%;
 
-		right: 0;
 
-		z-index: 100;
 
-		overflow: hidden;
 
-		border-bottom: 1px solid #dedede;
 
-	}
 
-
 
-	#content {
 
-		position: absolute;
 
-		left: 0;
 
-		top: 120px;
 
-		right: 0;
 
-		bottom: 0;
 
-		font-size: 17px;
 
-		line-height: 22px;
 
-		padding-left: 20px;
 
-		overflow: auto;
 
-	}
 
-
 
-	#navigation {
 
-		position: absolute;
 
-		left: 0;
 
-		top: 90px;
 
-		right: 0;
 
-		bottom: 0;
 
-		font-size: 17px;
 
-		line-height: 22px;
 
-		overflow: auto;
 
-	}
 
-
 
-	iframe {
 
-		position: absolute;
 
-		left: 0;
 
-		top: 56px;
 
-		width: 100%;
 
-		height: calc(100% - 56px);
 
-	}
 
-
 
-	#expandButton {
 
-		display: block;
 
-	}
 
-
 
-	#panel.collapsed {
 
-		height: 56px;
 
-	}
 
-
 
-}

+ 26 - 30
docs/index.html
Файл харах 

@@ -4,30 +4,30 @@
 
 		<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">
 
-		<link type="text/css" rel="stylesheet" href="index.css">
 
-		<link rel="shortcut icon" href="../favicon.ico" />
 
+		<link rel="shortcut icon" href="../files/favicon.ico" />
 
+		<link rel="stylesheet" type="text/css" href="../files/main.css">
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 
 
 		<div id="panel" class="collapsed">
 
 		<div id="panel" class="collapsed">
 
 
 
-			<h1><a href="http://threejs.org">three.js</a> / docs</h1>
 
+			<div id="header">
 
 
 
-			<a id="expandButton" href="#">
 
-				<span></span>
 
-				<span></span>
 
-				<span></span>
 
-			</a>
 
+				<h1><a href="http://threejs.org">three.js</a></h1>
 
 
 
-			<div class="filterBlock" >
 
-				<input type="text" id="filterInput" placeholder="Type to filter" autocorrect="off" autocapitalize="off" spellcheck="false">
 
-				<a href="#" id="clearFilterButton">x</a>
 
-			</div>
 
+				<img id="expandButton" src="../files/ic_menu_black_24dp.svg">
 
+
 
+				<div id="sections">
 
+					<span class="selected">docs</span> <a href="../examples">examples</a>
 
+				</div>
 
+
 
+				<input type="text" id="filter" autocorrect="off" autocapitalize="off" spellcheck="false">
 
+
 
+				<select id="language">
 
+					<option value="en">en</option>
 
+					<option value="zh">zh</option>
 
+				</select>
 
 
 
-			<div style="text-align:center">
 
-				<br />
 
-				<a href="javascript:setLanguage('en')">en</a> |
 
-				<a href="javascript:setLanguage('zh')">zh</a>
 
 			</div>
 
 			</div>
 
 
 
 			<div id="content"></div>
 
 			<div id="content"></div>
 
@@ -66,9 +66,18 @@
 
 
 
 			//
 
 			//
 
 
 
+			var languageSelect = document.getElementById( 'language' );
 
+			languageSelect.value = language;
 
+			languageSelect.addEventListener( 'change', function ( event ) {
 
+
 
+				setLanguage( this.value );
 
+
 
+			} );
 
+
 
 			function setLanguage( value ) {
 
 			function setLanguage( value ) {
 
 
 
 				language = value;
 
 				language = value;
 
+
 
 				createNavigation();
 
 				createNavigation();
 
 				updateFilter();
 
 				updateFilter();
 
 				autoChangeUrlLanguage( language );
 
 				autoChangeUrlLanguage( language );
 
@@ -77,9 +86,8 @@
 
 
 
 			var panel = document.getElementById( 'panel' );
 
 			var panel = document.getElementById( 'panel' );
 
 			var content = document.getElementById( 'content' );
 
 			var content = document.getElementById( 'content' );
 
-			var clearFilterButton = document.getElementById( 'clearFilterButton' );
 
 			var expandButton = document.getElementById( 'expandButton' );
 
 			var expandButton = document.getElementById( 'expandButton' );
 
-			var filterInput = document.getElementById( 'filterInput' );
 
+			var filterInput = document.getElementById( 'filter' );
 
 			var iframe = document.querySelector( 'iframe' );
 
 			var iframe = document.querySelector( 'iframe' );
 
 
 
 			var pageProperties = {};
 
 			var pageProperties = {};
 
@@ -107,18 +115,6 @@
 
 
 
 			};
 
 			};
 
 
 
-
 
-			// Functionality for filter clear button
 
-
 
-			clearFilterButton.onclick = function ( event ) {
 
-
 
-				event.preventDefault();
 
-
 
-				filterInput.value = '';
 
-				updateFilter();
 
-
 
-			};
 
-
 
 			// Activate content and title change on browser navigation
 
 			// Activate content and title change on browser navigation
 
 
 
 			window.onpopstate = createNewIframe;
 
 			window.onpopstate = createNewIframe;

+ 58 - 25
docs/page.css
Файл харах 

@@ -1,16 +1,25 @@
 
 @font-face {
 
 @font-face {
 
-	font-family: 'inconsolata';
 
-	src: url('files/inconsolata.woff') format('woff');
 
+	font-family: 'RobotoMono';
 
+	src: url('../files/RobotoMono-Regular.ttf');
 
+	font-weight: normal;
 
+	font-style: normal;
 
+}
 
+
 
+@font-face {
 
+	font-family: 'SF-Pro-Text';
 
+	src: url('../files/SF-Pro-Text-Regular.otf');
 
 	font-weight: normal;
 
 	font-weight: normal;
 
 	font-style: normal;
 
 	font-style: normal;
 
 }
 
 }
 
 
 
 body {
 
 body {
 
-	margin: 30px 20px;
 
+	margin: 78px auto;
 
+	padding: 0px 24px;
 
+	max-width: 780px;
 
 	color: #555;
 
 	color: #555;
 
-	font-family: 'inconsolata';
 
-	font-size: 15px;
 
-	line-height: 18px;
 
+	font-family: 'SF-Pro-Text', sans-serif;
 
+	font-size: 16px;
 
+	line-height: 23px;
 
 	tab-size: 4;
 
 	tab-size: 4;
 
 	overflow: auto;
 
 	overflow: auto;
 
 }
 
 }
 
@@ -22,19 +31,18 @@ a {
 
 }
 
 }
 
 
 
 h1 {
 
 h1 {
 
-	color: #333;
 
-	font-size: 25px;
 
+	color: #049EF4;
 
+	font-size: 32px;
 
 	font-weight: normal;
 
 	font-weight: normal;
 
-
 
-	margin-top: 10px;
 
+	line-height: 42px;
 
 }
 
 }
 
 
 
 h2 {
 
 h2 {
 
 	color: #4B0;
 
 	color: #4B0;
 
-	font-size: 18px;
 
-	font-weight: normal;
 
 
 
-	margin-top: 40px;
 
+	font-size: 22px;
 
+	font-weight: normal;
 
+	line-height: 31px;
 
 }
 
 }
 
 
 
 h3 {
 
 h3 {
 
@@ -67,9 +75,6 @@ pre, code {
 
 
 
 code {
 
 code {
 
 	display: block;
 
 	display: block;
 
-	width: -webkit-calc( 100% - 40px );
 
-	width: -moz-calc( 100% - 40px );
 
-	width: calc( 100% - 40px );
 
 	padding: 20px;
 
 	padding: 20px;
 
 	white-space: pre-wrap;
 
 	white-space: pre-wrap;
 
 	background-color: #f9f9f9;
 
 	background-color: #f9f9f9;
 
@@ -104,19 +109,26 @@ strong {
 
 
 
 #button {
 
 #button {
 
 	position: fixed;
 
 	position: fixed;
 
-	top: 20px;
 
-	right: 20px;
 
+	bottom: 16px;
 
+	right: 16px;
 
+
 
 	padding: 8px;
 
 	padding: 8px;
 
-	color: #fff;
 
-	background-color: #555;
 
-	opacity: 0.5;
 
-}
 
+	border-radius: 50%;
 
+	margin-bottom: 0px; /* TODO div sets it to 20px */
 
 
 
-#button:hover {
 
-	cursor: pointer;
 
-	opacity: 1;
 
+	background-color: #dddddd;
 
+	opacity: 0.4;
 
 }
 
 }
 
 
 
+	#button:hover {
 
+		cursor: pointer;
 
+		opacity: 1;
 
+	}
 
+
 
+	#button img {
 
+		display: block;
 
+	}
 
+
 
 a.permalink {
 
 a.permalink {
 
 	float: right;
 
 	float: right;
 
 	margin-left: 5px;
 
 	margin-left: 5px;
 
@@ -141,3 +153,24 @@ sup, sub {
 
 sub {
 
 sub {
 
 	top: 0.4em;
 
 	top: 0.4em;
 
 }
 
 }
 
+
 
+/* mobile */
 
+
 
+@media all and ( max-width: 640px ) {
 
+
 
+	body {
 
+		margin: 14px auto;
 
+		padding: 0px 14px;
 
+		font-size: 14px;
 
+		line-height: 22px;
 
+	}
 
+
 
+	h1 {
 
+		font-size: 26px;
 
+	}
 
+
 
+	h2 {
 
+		font-size: 18px;
 
+		line-height: 25px;
 
+	}
 
+}

+ 1 - 2
docs/page.js
Файл харах 

@@ -97,8 +97,7 @@ function onDocumentLoad( event ) {
 
 
 
 	var button = document.createElement( 'div' );
 
 	var button = document.createElement( 'div' );
 
 	button.id = 'button';
 
 	button.id = 'button';
 
-	button.textContent = 'Edit';
 
-
 
+	button.innerHTML = '<img src="../files/ic_mode_edit_black_24dp.svg">';
 
 	button.addEventListener( 'click', function ( event ) {
 
 	button.addEventListener( 'click', function ( event ) {
 
 
 
 		window.open( 'https://github.com/mrdoob/three.js/blob/dev/docs/' + section + '/' + localizedPath + '.html' );
 
 		window.open( 'https://github.com/mrdoob/three.js/blob/dev/docs/' + section + '/' + localizedPath + '.html' );

+ 4 - 2
docs/prettify/threejs.css
Файл харах 

@@ -10,6 +10,8 @@ pre .dec, code .dec { color: #22c0c4; } /* decimal */
 
 
 
 
 
 pre.prettyprint, code.prettyprint {
 
 pre.prettyprint, code.prettyprint {
 
-	background-color: #f9f9f9;
 
-	font-family: 'inconsolata';
 
+	background-color: #F5F5F5;
 
+	font-family: 'RobotoMono', monospace;
 
+	font-size: 14px;
 
+	line-height: 21px;
 
 }
 
 }

+ 3 - 1
docs/scenes/bones-browser.html
Файл харах 

@@ -49,7 +49,10 @@
 
 			function initScene() {
 
 			function initScene() {
 
 
 
 				gui = new dat.GUI();
 
 				gui = new dat.GUI();
 
+
 
 				scene = new THREE.Scene();
 
 				scene = new THREE.Scene();
 
+				scene.background = new THREE.Color( 0x444444 );
 
+
 
 				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 200 );
 
 				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 200 );
 
 				camera.position.z = 30;
 
 				camera.position.z = 30;
 
 				camera.position.y = 30;
 
 				camera.position.y = 30;
 
@@ -57,7 +60,6 @@
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setPixelRatio( window.devicePixelRatio );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				renderer.setClearColor( 0x000000, 1 );
 
 				document.body.appendChild( renderer.domElement );
 
 				document.body.appendChild( renderer.domElement );
 
 
 
 				orbit = new THREE.OrbitControls( camera, renderer.domElement );
 
 				orbit = new THREE.OrbitControls( camera, renderer.domElement );

+ 3 - 1
docs/scenes/geometry-browser.html
Файл харах 

@@ -46,14 +46,16 @@
 
 			document.getElementById( 'newWindow' ).href += window.location.hash;
 
 			document.getElementById( 'newWindow' ).href += window.location.hash;
 
 
 
 			var gui = new dat.GUI();
 
 			var gui = new dat.GUI();
 
+
 
 			var scene = new THREE.Scene();
 
 			var scene = new THREE.Scene();
 
+			scene.background = new THREE.Color( 0x444444 );
 
+
 
 			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 50 );
 
 			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 50 );
 
 			camera.position.z = 30;
 
 			camera.position.z = 30;
 
 
 
 			var renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 			var renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 			renderer.setPixelRatio( window.devicePixelRatio );
 
 			renderer.setPixelRatio( window.devicePixelRatio );
 
 			renderer.setSize( window.innerWidth, window.innerHeight );
 
 			renderer.setSize( window.innerWidth, window.innerHeight );
 
-			renderer.setClearColor( 0x000000, 1 );
 
 			document.body.appendChild( renderer.domElement );
 
 			document.body.appendChild( renderer.domElement );
 
 
 
 			var orbit = new THREE.OrbitControls( camera, renderer.domElement );
 
 			var orbit = new THREE.OrbitControls( camera, renderer.domElement );

+ 3 - 1
docs/scenes/material-browser.html
Файл харах 

@@ -43,14 +43,16 @@
 
 			document.getElementById( 'newWindow' ).href += window.location.hash;
 
 			document.getElementById( 'newWindow' ).href += window.location.hash;
 
 
 
 			var gui = new dat.GUI();
 
 			var gui = new dat.GUI();
 
+
 
 			var scene = new THREE.Scene();
 
 			var scene = new THREE.Scene();
 
+			scene.background = new THREE.Color( 0x444444 );
 
+
 
 			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 10, 50 );
 
 			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 10, 50 );
 
 			camera.position.z = 30;
 
 			camera.position.z = 30;
 
 
 
 			var renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 			var renderer = new THREE.WebGLRenderer( { antialias: true } );
 
 			renderer.setPixelRatio( window.devicePixelRatio );
 
 			renderer.setPixelRatio( window.devicePixelRatio );
 
 			renderer.setSize( window.innerWidth, window.innerHeight );
 
 			renderer.setSize( window.innerWidth, window.innerHeight );
 
-			renderer.setClearColor( 0x000000, 1 );
 
 			document.body.appendChild( renderer.domElement );
 
 			document.body.appendChild( renderer.domElement );
 
 
 
 			var ambientLight = new THREE.AmbientLight( 0x000000 );
 
 			var ambientLight = new THREE.AmbientLight( 0x000000 );

+ 1 - 1
editor/index.html
Файл харах 

@@ -6,7 +6,7 @@
 
 		<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">
 
 		<link rel="apple-touch-icon" href="images/icon.png">
 
 		<link rel="apple-touch-icon" href="images/icon.png">
 
 		<link rel="manifest" href="manifest.json">
 
 		<link rel="manifest" href="manifest.json">
 
-		<link rel="shortcut icon" href="../favicon.ico" />
 
+		<link rel="shortcut icon" href="../files/favicon.ico" />
 
 	</head>
 
 	</head>
 
 	<body ontouchstart="">
 
 	<body ontouchstart="">
 
 		<link rel="stylesheet" href="css/main.css">
 
 		<link rel="stylesheet" href="css/main.css">

BIN
examples/files/inconsolata.woff
Файл харах


+ 26 - 222
examples/index.html
Файл харах 

@@ -1,91 +1,16 @@
 
 <!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">
 
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
-		<link rel="shortcut icon" href="../favicon.ico" />
 
+		<link rel="shortcut icon" href="../files/favicon.ico" />
 
+		<link rel="stylesheet" type="text/css" href="../files/main.css">
 
 		<style>
 
 		<style>
 
-
 
-			@font-face {
 
-				font-family: 'inconsolata';
 
-				src: url('files/inconsolata.woff') format('woff');
 
-				font-weight: normal;
 
-				font-style: normal;
 
-			}
 
-
 
-			* {
 
-				box-sizing: border-box;
 
-			}
 
-
 
-			html {
 
-				height: 100%;
 
-			}
 
-
 
-			body {
 
-				background-color: #ffffff;
 
-				margin: 0px;
 
-				height: 100%;
 
-				color: #555;
 
-				font-family: 'inconsolata';
 
-				font-size: 15px;
 
-				line-height: 18px;
 
-				overflow: hidden;
 
-			}
 
-
 
-			h1 {
 
-				margin-top: 30px;
 
-				margin-bottom: 40px;
 
-				margin-left: 20px;
 
-				font-size: 25px;
 
-				font-weight: normal;
 
-			}
 
-
 
-			h2 {
 
-				font-size: 20px;
 
-				font-weight: normal;
 
-			}
 
-
 
-			a {
 
-				color: #2194CE;
 
-				text-decoration: none;
 
-			}
 
-
 
-			#panel {
 
-				position: fixed;
 
-				left: 0px;
 
-				width: 310px;
 
-				height: 100%;
 
-				overflow: auto;
 
-				background: #fafafa;
 
-			}
 
-
 
-			#panel #content {
 
-				padding: 0px 20px 20px 20px;
 
-			}
 
-
 
 			#panel #content .link {
 
 			#panel #content .link {
 
-				color: #2194CE;
 
+				display: block;
 
 				text-decoration: none;
 
 				text-decoration: none;
 
 				cursor: pointer;
 
 				cursor: pointer;
 
-				display: block;
 
-			}
 
-
 
-			#panel #content .selected {
 
-				color: #ff0000;
 
-			}
 
-
 
-			#panel #content .link:hover {
 
-				text-decoration: underline;
 
-			}
 
-
 
-			#viewer {
 
-				position: absolute;
 
-				border: 0px;
 
-				left: 310px;
 
-				width: calc(100% - 310px);
 
-				height: 100%;
 
-				overflow: auto;
 
 			}
 
 			}
 
 
 
 			#viewSrcButton {
 
 			#viewSrcButton {
 
@@ -102,142 +27,30 @@
 
 				cursor: pointer;
 
 				cursor: pointer;
 
 				opacity: 1;
 
 				opacity: 1;
 
 			}
 
 			}
 
+		</style>
 
+	</head>
 
+	<body>
 
 
 
-			.filterBlock{
 
-				margin: 20px;
 
-				position: relative;
 
-			}
 
-
 
-			.filterBlock p {
 
-				margin: 0;
 
-			}
 
-
 
-			#filterInput {
 
-				width: 100%;
 
-				padding: 5px;
 
-				font-family: inherit;
 
-				font-size: 15px;
 
-				outline: none;
 
-				border: 1px solid #dedede;
 
-			}
 
-
 
-			#filterInput:focus{
 
-				border: 1px solid #2194CE;
 
-			}
 
-
 
-			#clearFilterButton {
 
-				position: absolute;
 
-				right: 6px;
 
-				top: 50%;
 
-				margin-top: -8px;
 
-				width: 16px;
 
-				height: 16px;
 
-				font-size: 14px;
 
-				color: grey;
 
-				text-align: center;
 
-				line-height: 0;
 
-				padding-top: 7px;
 
-				opacity: .5;
 
-			}
 
-
 
-			#clearFilterButton:hover {
 
-				opacity: 1;
 
-			}
 
-
 
-			.filtered {
 
-				display: none !important;
 
-			}
 
-
 
-			#panel li b {
 
-				font-weight: bold;
 
-			}
 
-
 
-			/* mobile */
 
-
 
-			#expandButton {
 
-				display: none;
 
-				position: absolute;
 
-				right: 20px;
 
-				top: 12px;
 
-				width: 32px;
 
-				height: 32px;
 
-			}
 
+		<div id="panel">
 
 
 
-			#expandButton span {
 
-				height: 2px;
 
-				background-color: #2194CE;
 
-				width: 16px;
 
-				position: absolute;
 
-				left: 8px;
 
-				top: 10px;
 
-			}
 
+			<div id="header">
 
 
 
-			#expandButton span:nth-child(1) {
 
-				top: 16px;
 
-			}
 
+				<h1><a href="http://threejs.org">three.js</a></h1>
 
 
 
-			#expandButton span:nth-child(2) {
 
-				top: 22px;
 
-			}
 
+				<img id="expandButton" src="../files/ic_menu_black_24dp.svg">
 
 
 
-			@media all and ( max-width: 640px ) {
 
-				h1{
 
-					margin-top: 20px;
 
-					margin-bottom: 20px;
 
-				}
 
-				#panel{
 
-					position: absolute;
 
-					left: 0;
 
-					top: 0;
 
-					height: 480px;
 
-					width: 100%;
 
-					right: 0;
 
-					z-index: 100;
 
-					overflow: hidden;
 
-					border-bottom: 1px solid #dedede;
 
-				}
 
-				#content{
 
-					position: absolute;
 
-					left: 0;
 
-					top: 90px;
 
-					right: 0;
 
-					bottom: 0;
 
-					font-size: 17px;
 
-					line-height: 22px;
 
-					overflow: auto;
 
-				}
 
-				#viewer{
 
-					position: absolute;
 
-					left: 0;
 
-					top: 56px;
 
-					width: 100%;
 
-					height: calc(100% - 56px);
 
-				}
 
-				#expandButton{
 
-					display: block;
 
-				}
 
-				#panel.collapsed{
 
-					height: 56px;
 
-				}
 
-			}
 
+				<div id="sections">
 
+					<a href="../docs">docs</a> <span class="selected">examples</span>
 
+				</div>
 
 
 
-		</style>
 
-	</head>
 
-	<body>
 
+				<input type="text" id="filter" autocorrect="off" autocapitalize="off" spellcheck="false"/>
 
 
 
-		<div id="panel">
 
-			<h1><a href="http://threejs.org">three.js</a> / examples</h1>
 
-			<a id="expandButton" href="#">
 
-				<span></span>
 
-				<span></span>
 
-				<span></span>
 
-			</a>
 
-			<div class="filterBlock" >
 
-				<input type="text" id="filterInput" placeholder="Type to filter" autocorrect="off" autocapitalize="off" spellcheck="false"/>
 
-				<a href="#" id="clearFilterButton" >x</a>
 
 			</div>
 
 			</div>
 
+
 
 			<div id="content"></div>
 
 			<div id="content"></div>
 
+
 
 		</div>
 
 		</div>
 
+
 
 		<iframe id="viewer" name="viewer" allowfullscreen allowvr onmousewheel=""></iframe>
 
 		<iframe id="viewer" name="viewer" allowfullscreen allowvr onmousewheel=""></iframe>
 
 
 
 		<script src="files.js"></script>
 
 		<script src="files.js"></script>
 
@@ -256,8 +69,7 @@
 
 		var content = document.getElementById( 'content' );
 
 		var content = document.getElementById( 'content' );
 
 		var viewer = document.getElementById( 'viewer' );
 
 		var viewer = document.getElementById( 'viewer' );
 
 
 
-		var filterInput = document.getElementById( 'filterInput' );
 
-		var clearFilterButton = document.getElementById( 'clearFilterButton' );
 
+		var filterInput = document.getElementById( 'filter' );
 
 
 
 		var expandButton = document.getElementById( 'expandButton' );
 
 		var expandButton = document.getElementById( 'expandButton' );
 
 		expandButton.addEventListener( 'click', function ( event ) {
 
 		expandButton.addEventListener( 'click', function ( event ) {
 
@@ -352,7 +164,7 @@
 
 			// Reveal "View source" button and set attributes to this example
 
 			// Reveal "View source" button and set attributes to this example
 
 			viewSrcButton.style.display = '';
 
 			viewSrcButton.style.display = '';
 
 			viewSrcButton.href = 'https://github.com/mrdoob/three.js/blob/master/examples/' + selected + '.html';
 
 			viewSrcButton.href = 'https://github.com/mrdoob/three.js/blob/master/examples/' + selected + '.html';
 
-			viewSrcButton.title = 'View source code for ' + getName(selected) + ' on GitHub';
 
+			viewSrcButton.title = 'View source code for ' + getName( selected ) + ' on GitHub';
 
 
 
 		}
 
 		}
 
 
 
@@ -370,14 +182,6 @@
 
 
 
 		} );
 
 		} );
 
 
 
-		clearFilterButton.addEventListener( 'click', function( e ) {
 
-
 
-			filterInput.value = '';
 
-			updateFilter();
 
-			e.preventDefault();
 
-
 
-		} );
 
-
 
 		function updateFilter() {
 
 		function updateFilter() {
 
 
 
 			var v = filterInput.value;
 
 			var v = filterInput.value;
 
@@ -414,7 +218,7 @@
 
 
 
 			if ( res && res.length > 0 ) {
 
 			if ( res && res.length > 0 ) {
 
 
 
-				link.classList.remove( 'filtered' );
 
+				link.classList.remove( 'hidden' );
 
 
 
 				for( var i = 0; i < res.length; i++ ) {
 
 				for( var i = 0; i < res.length; i++ ) {
 
 					text = name.replace( res[ i ], '<b>' + res[ i ] + '</b>' );
 
 					text = name.replace( res[ i ], '<b>' + res[ i ] + '</b>' );
 
@@ -424,7 +228,7 @@
 
 
 
 			} else {
 
 			} else {
 
 
 
-				link.classList.add( 'filtered' );
 
+				link.classList.add( 'hidden' );
 
 				link.innerHTML = name;
 
 				link.innerHTML = name;
 
 
 
 			}
 
 			}
 
@@ -450,7 +254,7 @@
 
 
 
 					var file = section[ i ];
 
 					var file = section[ i ];
 
 
 
-					if( !links[ file ].classList.contains( 'filtered' ) ){
 
+					if ( links[ file ].classList.contains( 'hidden' ) === false ){
 
 
 
 						collapsed = false;
 
 						collapsed = false;
 
 						break;
 
 						break;
 
@@ -461,13 +265,13 @@
 
 
 
 				var element = document.querySelector( 'h2[data-category="' + key + '"]' );
 
 				var element = document.querySelector( 'h2[data-category="' + key + '"]' );
 
 
 
-				if( collapsed ){
 
+				if ( collapsed ) {
 
 
 
-					element.classList.add( 'filtered' );
 
+					element.classList.add( 'hidden' );
 
 
 
 				} else {
 
 				} else {
 
 
 
-					element.classList.remove( 'filtered' );
 
+					element.classList.remove( 'hidden' );
 
 
 
 				}
 
 				}

BIN
files/RobotoMono-Regular.ttf
Файл харах


BIN
files/SF-Pro-Text-Regular.otf
Файл харах


+ 0 - 0
favicon.ico → files/favicon.ico
Файл харах


+ 4 - 0
files/ic_arrow_drop_down_black_24dp.svg
Файл харах 

@@ -0,0 +1,4 @@
 
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#000000">
 
+    <path d="M7 10l5 5 5-5z"/>
 
+    <path d="M0 0h24v24H0z" fill="none"/>
 
+</svg>

+ 4 - 0
files/ic_menu_black_24dp.svg
Файл харах 

@@ -0,0 +1,4 @@
 
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#000000">
 
+    <path d="M0 0h24v24H0z" fill="none"/>
 
+    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
 
+</svg>

+ 4 - 0
files/ic_mode_edit_black_24dp.svg
Файл харах 

@@ -0,0 +1,4 @@
 
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#000000">
 
+    <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
 
+    <path d="M0 0h24v24H0z" fill="none"/>
 
+</svg>

+ 4 - 0
files/ic_search_black_24dp.svg
Файл харах 

@@ -0,0 +1,4 @@
 
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#000000">
 
+    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
 
+    <path d="M0 0h24v24H0z" fill="none"/>
 
+</svg>

+ 222 - 0
files/main.css
Файл харах 

@@ -0,0 +1,222 @@
 
+@font-face {
 
+	font-family: 'RobotoMono';
 
+	src: url('../files/RobotoMono-Regular.ttf');
 
+	font-weight: normal;
 
+	font-style: normal;
 
+}
 
+
 
+* {
 
+	box-sizing: border-box; /* don't let padding modify width */
 
+}
 
+
 
+html, body {
 
+	height: 100%;
 
+}
 
+
 
+body {
 
+	margin: 0px;
 
+	overflow: hidden;
 
+
 
+	font-family: 'RobotoMono', monospace;
 
+	font-size: 14px;
 
+	line-height: 23px;
 
+
 
+	background-color: #ffffff;
 
+	color: #555;
 
+}
 
+
 
+a {
 
+	text-decoration: none;
 
+}
 
+
 
+h1 {
 
+	margin-top: 0px; /* reset */
 
+	margin-left: 15px;
 
+	margin-bottom: 20px;
 
+	padding-top: 13px;
 
+
 
+	font-size: 18px;
 
+	font-weight: normal;
 
+}
 
+
 
+h1 a {
 
+	color: #049EF4;
 
+}
 
+
 
+h2 {
 
+	margin-top: 20px;
 
+
 
+	font-size: 14px;
 
+	font-weight: normal;
 
+
 
+	color: #049EF4;
 
+}
 
+
 
+h3 {
 
+	margin: 20px 0 0 0;
 
+
 
+	font-size: 14px;
 
+	line-height: 23px;
 
+	font-weight: 500;
 
+	text-transform: uppercase;
 
+
 
+	color: #9E9E9E;
 
+}
 
+
 
+#panel {
 
+	position: fixed;
 
+	left: 0px;
 
+	width: 300px;
 
+	height: 100%;
 
+	overflow: auto;
 
+
 
+	background: white;
 
+	border-right: 1px solid #f2f2f2;
 
+}
 
+
 
+	#panel #header {
 
+		position: -webkit-sticky;
 
+		position: sticky;
 
+		top: 0;
 
+
 
+		background: white;
 
+	}
 
+
 
+	#panel #expandButton {
 
+		position: absolute;
 
+		right: 14px;
 
+		top: 14px;
 
+		display: none;
 
+	}
 
+
 
+	#panel #sections {
 
+		font-size: 14px;
 
+		padding: 0px 16px;
 
+	}
 
+
 
+		#panel #sections * {
 
+			display: inline-block;
 
+			margin-right: 35px;
 
+			margin-bottom: 12px;
 
+
 
+			font-weight: 500;
 
+
 
+			color: #333333;
 
+		}
 
+
 
+		#panel #sections a {
 
+			color: #9E9E9E;
 
+		}
 
+
 
+	#panel #filter {
 
+		width: 100%;
 
+		height: 40px;
 
+		padding: 0px 48px;
 
+		font-size: 15px;
 
+		outline: none;
 
+		border: 0px; /* reset */
 
+		border-top: 1px solid #f2f2f2;
 
+		border-bottom: 1px solid #f2f2f2;
 
+		background: url( "../files/ic_search_black_24dp.svg" ) no-repeat;
 
+		background-position: 14px center;
 
+	}
 
+
 
+	#panel #language {
 
+		position: absolute;
 
+		top: 98px;
 
+		right: 14px;
 
+		border: 0px;
 
+		font-size: 14px;
 
+		background: url( "ic_arrow_drop_down_black_24dp.svg" ) no-repeat;
 
+		background-position: right center;
 
+		background-color: white;
 
+		padding: 4px 26px 4px 8px;
 
+		-webkit-appearance: none;
 
+		-moz-appearance: none;
 
+		appearance: none;
 
+	}
 
+
 
+		#panel #language:focus {
 
+			outline: none;
 
+		}
 
+
 
+	#panel #content {
 
+		margin: 0px 16px;
 
+	}
 
+
 
+		#panel #content ul {
 
+			list-style-type: none;
 
+			padding: 0px;
 
+			margin: 0px;
 
+		}
 
+
 
+		#panel #content a {
 
+			color: #222222;
 
+		}
 
+
 
+			#panel #content a:hover {
 
+				text-decoration: underline;
 
+			}
 
+
 
+		#panel #content .selected {
 
+			color: #ff0000;
 
+		}
 
+
 
+		#panel #content .hidden {
 
+			display: none !important;
 
+		}
 
+
 
+iframe {
 
+	position: absolute;
 
+	border: 0px;
 
+	left: 300px;
 
+	width: calc(100% - 300px);
 
+	height: 100%;
 
+	overflow: auto;
 
+}
 
+
 
+/* mobile */
 
+
 
+@media all and ( max-width: 640px ) {
 
+
 
+	#panel {
 
+		position: absolute;
 
+		left: 0;
 
+		top: 0;
 
+		height: 100%;
 
+		width: 100%;
 
+		right: 0;
 
+		z-index: 100;
 
+		border-bottom: 1px solid #dedede;
 
+	}
 
+
 
+		#panel #expandButton {
 
+			display: block;
 
+		}
 
+
 
+	/*
 
+	#navigation {
 
+		position: absolute;
 
+		left: 0;
 
+		top: 90px;
 
+		right: 0;
 
+		bottom: 0;
 
+		font-size: 17px;
 
+		line-height: 22px;
 
+		overflow: auto;
 
+	}
 
+	*/
 
+
 
+	iframe {
 
+		position: absolute;
 
+		left: 0;
 
+		top: 92px;
 
+		width: 100%;
 
+		height: calc(100% - 92px);
 
+	}
 
+
 
+	#panel.collapsed {
 
+		height: 92px;
 
+	}
 
+
 
+}