You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

426 lines
9.1 KiB

2 years ago
<!DOCTYPE html>
<html lang="en">
<head>
<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">
<link rel="shortcut icon" href="../files/favicon_white.ico" media="(prefers-color-scheme: dark)"/>
<link rel="shortcut icon" href="../files/favicon.ico" media="(prefers-color-scheme: light)" />
<link rel="stylesheet" type="text/css" href="../files/main.css">
</head>
<body>
<div id="panel">
<div id="header">
<h1><a href="https://threejs.org">three.js</a></h1>
<div id="sections">
<a href="../docs/index.html#manual/introduction/Creating-a-scene">docs</a>
<span class="selected">examples</span>
</div>
<div id="expandButton"></div>
</div>
<div id="panelScrim"></div>
<div id="contentWrapper">
<div id="inputWrapper">
<input placeholder="" type="text" id="filterInput" autocorrect="off" autocapitalize="off" spellcheck="false" />
<div id="exitSearchButton"></div>
</div>
<div id="content">
<img id="previewsToggler" src="./files/thumbnails.svg" width="20" height="20" />
</div>
</div>
</div>
<iframe id="viewer" name="viewer" allow="fullscreen; xr-spatial-tracking;"></iframe>
<a id="button" target="_blank"><img src="../files/ic_code_black_24dp.svg"></a>
<script>
const panel = document.getElementById( 'panel' );
const content = document.getElementById( 'content' );
const viewer = document.getElementById( 'viewer' );
const filterInput = document.getElementById( 'filterInput' );
const exitSearchButton = document.getElementById( 'exitSearchButton' );
const expandButton = document.getElementById( 'expandButton' );
const viewSrcButton = document.getElementById( 'button' );
const panelScrim = document.getElementById( 'panelScrim' );
const previewsToggler = document.getElementById( 'previewsToggler' );
const sectionLink = document.querySelector( '#sections > a' );
const sectionDefaultHref = sectionLink.href;
const links = {};
const validRedirects = new Map();
const container = document.createElement( 'div' );
let selected = null;
init();
async function init() {
content.appendChild( container );
viewSrcButton.style.display = 'none';
const files = await ( await fetch( 'files.json' ) ).json();
const tags = await ( await fetch( 'tags.json' ) ).json();
for ( const key in files ) {
const category = files[ key ];
const header = document.createElement( 'h2' );
header.textContent = key;
header.setAttribute( 'data-category', key );
container.appendChild( header );
for ( let i = 0; i < category.length; i ++ ) {
const file = category[ i ];
const link = createLink( file, tags[ file ] );
container.appendChild( link );
links[ file ] = link;
validRedirects.set( file, file + '.html' );
}
}
if ( window.location.hash !== '' ) {
const file = window.location.hash.substring( 1 );
// use a predefined map of redirects to avoid untrusted URL redirection due to user-provided value
if ( validRedirects.has( file ) === true ) {
selectFile( file );
viewer.src = validRedirects.get( file );
viewer.style.display = 'unset';
}
}
if ( viewer.src === '' ) {
viewer.srcdoc = document.getElementById( 'PlaceholderHTML' ).innerHTML;
viewer.style.display = 'unset';
}
filterInput.value = extractQuery();
if ( filterInput.value !== '' ) {
panel.classList.add( 'searchFocused' );
updateFilter( files, tags );
} else {
updateLink( '' );
}
// Events
filterInput.onfocus = function ( ) {
panel.classList.add( 'searchFocused' );
};
filterInput.onblur = function ( ) {
if ( filterInput.value === '' ) {
panel.classList.remove( 'searchFocused' );
}
};
exitSearchButton.onclick = function ( ) {
filterInput.value = '';
updateFilter( files, tags );
panel.classList.remove( 'searchFocused' );
};
filterInput.addEventListener( 'input', function () {
updateFilter( files, tags );
} );
expandButton.addEventListener( 'click', function ( event ) {
event.preventDefault();
panel.classList.toggle( 'open' );
} );
panelScrim.onclick = function ( event ) {
event.preventDefault();
panel.classList.toggle( 'open' );
};
previewsToggler.onclick = function ( event ) {
event.preventDefault();
content.classList.toggle( 'minimal' );
};
// iOS iframe auto-resize workaround
if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
viewer.style.width = getComputedStyle( viewer ).width;
viewer.style.height = getComputedStyle( viewer ).height;
viewer.setAttribute( 'scrolling', 'no' );
}
}
function createLink( file, tags ) {
const external = Array.isArray( tags ) && tags.includes( 'external' ) ? ' <span class="tag">external</span>' : '';
const template = `
<div class="card">
<a href="${ file }.html" target="viewer">
<div class="cover">
<img src="screenshots/${ file }.jpg" loading="lazy" width="400" />
</div>
<div class="title">${ getName( file ) }${ external }</div>
</a>
</div>
`;
const link = createElementFromHTML( template );
link.querySelector( 'a[target="viewer"]' ).addEventListener( 'click', function ( event ) {
if ( event.button !== 0 || event.ctrlKey || event.altKey || event.metaKey ) return;
selectFile( file );
} );
return link;
}
function selectFile( file ) {
if ( selected !== null ) links[ selected ].classList.remove( 'selected' );
links[ file ].classList.add( 'selected' );
window.location.hash = file;
viewer.focus();
viewer.style.display = 'unset';
panel.classList.remove( 'open' );
selected = file;
// Reveal "View source" button and set attributes to this example
viewSrcButton.style.display = '';
viewSrcButton.href = 'https://github.com/mrdoob/three.js/blob/master/examples/' + selected + '.html';
viewSrcButton.title = 'View source code for ' + getName( selected ) + ' on GitHub';
}
function escapeRegExp( string ) {
return string.replace( /[.*+?^${}()|[\]\\]/g, '\\$&' ); // https://stackoverflow.com/a/6969486/5250847
}
function updateFilter( files, tags ) {
let v = filterInput.value.trim();
v = v.replace( /\s+/gi, ' ' ); // replace multiple whitespaces with a single one
if ( v !== '' ) {
window.history.replaceState( {}, '', '?q=' + v + window.location.hash );
} else {
window.history.replaceState( {}, '', window.location.pathname + window.location.hash );
}
const exp = new RegExp( escapeRegExp( v ), 'gi' );
for ( const key in files ) {
const section = files[ key ];
for ( let i = 0; i < section.length; i ++ ) {
filterExample( section[ i ], exp, tags );
}
}
layoutList( files );
updateLink( v );
}
function updateLink( search ) {
// update docs link
if ( search ) {
const link = sectionLink.href.split( /[?#]/ )[ 0 ];
sectionLink.href = `${link}?q=${search}`;
} else {
sectionLink.href = sectionDefaultHref;
}
}
function filterExample( file, exp, tags ) {
const link = links[ file ];
if ( file in tags ) file += ' ' + tags[ file ].join( ' ' );
const res = file.replace( /_+/g, ' ' ).match( exp );
if ( res && res.length > 0 ) {
link.classList.remove( 'hidden' );
} else {
link.classList.add( 'hidden' );
}
}
function getName( file ) {
const name = file.split( '_' );
name.shift();
return name.join( ' / ' );
}
function layoutList( files ) {
for ( const key in files ) {
let collapsed = true;
const section = files[ key ];
for ( let i = 0; i < section.length; i ++ ) {
const file = section[ i ];
if ( links[ file ].classList.contains( 'hidden' ) === false ) {
collapsed = false;
break;
}
}
const element = document.querySelector( 'h2[data-category="' + key + '"]' );
if ( collapsed ) {
element.classList.add( 'hidden' );
} else {
element.classList.remove( 'hidden' );
}
}
}
function extractQuery() {
const search = window.location.search;
if ( search.indexOf( '?q=' ) !== - 1 ) {
return decodeURI( search.slice( 3 ) );
}
return '';
}
function createElementFromHTML( htmlString ) {
const div = document.createElement( 'div' );
div.innerHTML = htmlString.trim();
return div.firstChild;
}
</script>
<template id="PlaceholderHTML">
<!DOCTYPE html>
<html lang="en">
<head>
<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">
<link rel="stylesheet" type="text/css" href="../files/main.css">
<style>
html, body {
height: 100%;
}
body {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}
</style>
</head>
<body>
Select an example from the sidebar
</body>
</html>
</template>
</body>
</html>