<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>three.js / documentation</title> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <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 { color: #454545; font-size: 18px; font-weight: normal; margin-top: 20px; margin-left: 20px; } h3 { color: #666; font-size: 16px; font-weight: normal; margin-top: 20px; margin-left: 20px; } a { color: #2194CE; text-decoration: none; } #panel { position: fixed; left: 0px; width: 260px; height: 100%; overflow: auto; background: #fafafa; } #panel ul { list-style-type: none; padding: 0px; margin-left: 20px; } #viewer { position: absolute; border: 0px; left: 260px; width: calc(100% - 260px); height: 100%; overflow: auto; } .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; } #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: 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; } } </style> </head> <body> <div id="panel" class="collapsed"> <h1><a href="http://threejs.org">three.js</a> / docs</h1> <a id="expandButton" href="#"> <span></span> <span></span> <span></span> </a> <div class="filterBlock" > <input type="text" id="filterInput" placeholder="Type to filter"/> <a href="#" id="clearFilterButton" >x</a> </div> <div id="content"></div> </div> <iframe id="viewer"></iframe> <script src="list.js"></script> <script> var panel = document.getElementById( 'panel' ); var viewer = document.getElementById( 'viewer' ); var expandButton = document.getElementById( 'expandButton' ); expandButton.addEventListener( 'click', function ( event ) { panel.classList.toggle( 'collapsed' ); event.preventDefault(); } ); var filterInput = document.getElementById( 'filterInput' ); var clearFilterButton = document.getElementById( 'clearFilterButton' ); var DELIMITER = '/'; var MEMBER_DELIMITER = '.'; var nameCategoryMap = {}; var sections = []; var content = document.getElementById( 'content' ); for ( var section in list ) { var h2 = document.createElement( 'h2' ); h2.textContent = section; content.appendChild( h2 ); for ( var category in list[ section ] ) { var div = document.createElement( 'div' ); var h3 = document.createElement( 'h3' ); h3.textContent = category; div.appendChild( h3 ); var ul = document.createElement( 'ul' ); div.appendChild( ul ); for ( var i = 0; i < list[ section ][ category ].length; i ++ ) { var page = list[ section ][ category ][ i ]; var li = document.createElement( 'li' ); var a = document.createElement( 'a' ); a.setAttribute( 'href', '#' ); ( function( s, c, p ) { a.addEventListener( 'click', function( e ) { goTo( s, c, p ); e.preventDefault(); } ) } )( section, category, page[ 0 ] ) a.textContent = page[ 0 ]; li.appendChild( a ); ul.appendChild( li ); nameCategoryMap[page[0]] = { section: section, category: category, name: page[0], element: a }; } content.appendChild( div ); sections.push( ul ); } } panel.appendChild( content ) function layoutList() { sections.forEach( function( el ) { var collapsed = true; Array.prototype.slice.apply( el.children ).forEach( function( item ) { if( !item.classList.contains( 'filtered' ) ) { collapsed = false; return; } } ); if( collapsed ) { el.parentElement.classList.add( 'filtered' ); } else { el.parentElement.classList.remove( 'filtered' ); } } ); } filterInput.addEventListener( 'input', function( e ) { updateFilter(); } ); clearFilterButton.addEventListener( 'click', function( e ) { filterInput.value = ''; updateFilter(); e.preventDefault(); } ); function updateFilter() { var exp = new RegExp( filterInput.value, 'gi' ); for( var j in nameCategoryMap ) { var res = nameCategoryMap[ j ].name.match( exp ); if( res && res.length > 0 ) { nameCategoryMap[ j ].element.parentElement.classList.remove( 'filtered' ); var str = nameCategoryMap[ j ].name; for( var i = 0; i < res.length; i++ ) { str = str.replace( res[ i ], '<b>' + res[ i ] + '</b>' ); } nameCategoryMap[ j ].element.innerHTML = str; } else { nameCategoryMap[ j ].element.parentElement.classList.add( 'filtered' ); nameCategoryMap[ j ].element.textContent = nameCategoryMap[ j ].name; } } layoutList(); } function encodeUrl( path ) { return path.replace(/\ \/\ /g, '.').replace(/\ /g, '_'); } function decodeUrl( path ) { return path.replace(/_/g, ' ').replace(/\./g, ' / '); } // Page loading function goTo( section, category, name, member ) { var parts, location; // Fully resolve links that only provide a name if(arguments.length == 1) { // Resolve links of the form 'Class.member' if(section.indexOf(MEMBER_DELIMITER) !== -1) { parts = section.split(MEMBER_DELIMITER) section = parts[0]; member = parts[1]; } location = nameCategoryMap[section]; if (!location) return; section = location.section; category = location.category; name = location.name; } var title = 'three.js - documentation - ' + section + ' - ' + name; var url = encodeUrl(section) + DELIMITER + encodeUrl( category ) + DELIMITER + encodeUrl(name) + (!!member ? MEMBER_DELIMITER + encodeUrl(member) : ''); window.location.hash = url; window.document.title = title; viewer.src = pages[ section ][ category ][ name ] + '.html' + (!!member ? '#'+member : ''); panel.classList.add( 'collapsed' ); } function goToHash() { var hash = window.location.hash.substring( 1 ).split(DELIMITER); var member = hash[2].split(MEMBER_DELIMITER) goTo( decodeUrl(hash[0]), decodeUrl(hash[1]), decodeUrl(member[0]), decodeUrl(member.length > 1 ? member[1] : '') ); } window.addEventListener( 'hashchange', goToHash, false ); if ( window.location.hash.length > 0 ) goToHash(); console.log([ ' __ __', ' __/ __\\ / __\\__ ____ _____ _____', '/ __/ /\\/ / /___\\/ ____\\/ _____\\/ _____\\', '\\/_ __/ / _ / / __/ / __ / / __ /_ __ _____', '/ / / / / / / / / / / / ___/ / ___/\\ _\\/ __\\/ _____\\', '\\/__/ \\/__/\\/__/\\/__/ \\/_____/\\/_____/\\/__/ / / / ___/', ' / __/ / \\__ \\', ' \\/____/\\/_____/' ].join('\n')); </script> <script src="../build/three.min.js"></script> </body> </html>