123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427 |
- <!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="clearSearchButton"></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 clearSearchButton = document.getElementById( 'clearSearchButton' );
- 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' );
- }
- };
- clearSearchButton.onclick = function ( ) {
- filterInput.value = '';
- updateFilter( files, tags );
- filterInput.focus();
- };
- 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 ) {
- string = string.replace( /[.*+?^${}()|[\]\\]/g, '\\$&' ); // https://stackoverflow.com/a/6969486/5250847
- return '(?=.*' + string.split( ' ' ).join( ')(?=.*' ) + ')'; // match all words, in any order
- }
- 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>
|