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