samien
/
three.js
mirror de https://github.com/mrdoob/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693
							<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>three.js docs</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">
		<!-- console sandbox -->
		<script type="module">
			import * as THREE from '../build/three.module.js';
			window.THREE = THREE;
		</script>
	</head>
	<body>
		<div id="panel">

			<div id="header">
				<h1><a href="https://threejs.org">three.js</a></h1>

				<div id="sections">
					<span class="selected">docs</span>
					<a href="../manual/">manual</a>
				</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="searchResults" style="display: none;"></div>
				<div id="content"><!--NAV_PLACEHOLDER--></div>
			</div>

		</div>

		<iframe id="viewer" name="viewer"></iframe>

		<script>

		// Handle legacy URLs from old documentation structure
		( function handleLegacyURLs() {

			const hash = window.location.hash;

			if ( hash.startsWith( '#api/' ) || hash.startsWith( '#examples/' ) ) {

				const mappings = {

					'3DMLoader': 'Rhino3dmLoader',

					'BufferGeometryUtils': 'module-BufferGeometryUtils',
					'CameraUtils': 'module-CameraUtils',
					'SceneUtils': 'module-SceneUtils',
					'SkeletonUtils': 'module-SkeletonUtils',
					'UniformsUtils': 'module-UniformsUtils',

					'DefaultLoadingManager': 'LoadingManager',
					'Interpolations': 'module-Interpolations',

					'Animation': 'global',
					'BufferAttributeUsage': 'global',
					'Core': 'global',
					'CustomBlendingEquations': 'global',
					'Materials': 'global',
					'Textures': 'global'
				};

				const parts = hash.split( '/' );
				let className = parts[ parts.length - 1 ];

				if ( className ) {

					if ( className in mappings ) className = mappings[ className ];

					window.location.hash = className;

				}

			}

		} )();

		const panel = document.getElementById( 'panel' );
		const content = document.getElementById( 'content' );
		const expandButton = document.getElementById( 'expandButton' );
		const clearSearchButton = document.getElementById( 'clearSearchButton' );
		const panelScrim = document.getElementById( 'panelScrim' );
		const filterInput = document.getElementById( 'filterInput' );
		let iframe = document.getElementById( 'viewer' );

		const pageLinks = {};
		let navigation;
		let isUserClick = false;
		let searchData;

		fetch( 'search.json' )
			.then( response => response.json() )
			.then( data => {

				searchData = data;

				if ( filterInput.value !== '' ) {

					updateFilter();

				}

			} )
			.catch( err => console.error( 'Failed to load search data:', err ) );

		init();

		function init() {

			expandButton.onclick = function ( event ) {

				event.preventDefault();
				panel.classList.toggle( 'open' );

			};

			panelScrim.onclick = function ( event ) {

				event.preventDefault();
				panel.classList.toggle( 'open' );

			};

			filterInput.onfocus = function () {

				panel.classList.add( 'searchFocused' );

			};

			filterInput.onblur = function () {

				if ( filterInput.value === '' ) {

					panel.classList.remove( 'searchFocused' );

				}

			};

			filterInput.oninput = function () {

				updateFilter();

			};

			clearSearchButton.onclick = function () {

				filterInput.value = '';
				updateFilter();
				filterInput.focus();

			};

			window.onpopstate = createNewIframe;

			setupNavigation();
			createNewIframe();

			filterInput.value = extractQuery();

			if ( filterInput.value !== '' ) {

				panel.classList.add( 'searchFocused' );

			}

		}

		// Navigation Panel

		function setupNavigation() {

			navigation = content;

			const selectedPage = window.location.hash.substring( 1 );

			const links = navigation.querySelectorAll( 'a' );

			links.forEach( link => {

				const href = link.getAttribute( 'href' );

				if ( href && href.includes( '.html' ) ) {

					const match = href.match( /^([^#]+\.html)(#.*)?$/ );
					if ( ! match ) return;

					const htmlFile = match[ 1 ];
					const anchor = match[ 2 ] || '';
					const pageName = htmlFile.replace( /\.html$/, '' );
					const fullPageName = pageName + anchor.replace( '#', '.' );
					const pageURL = 'pages/' + htmlFile;

					link.setAttribute( 'href', pageURL + anchor );
					link.setAttribute( 'target', 'viewer' );
					link.addEventListener( 'click', function ( event ) {

						if ( event.button !== 0 || event.ctrlKey || event.altKey || event.metaKey ) return;

						event.preventDefault();
						isUserClick = true;
						window.location.hash = fullPageName;
						panel.classList.remove( 'open' );

						navigation.querySelectorAll( 'a' ).forEach( function ( item ) {

							item.classList.remove( 'selected' );

						} );

						link.classList.add( 'selected' );

					} );

					pageLinks[ fullPageName ] = {
						linkElement: link,
						pageURL: pageURL,
						anchor: anchor,
						href: href
					};

					if ( ! pageLinks[ pageName ] ) {

						pageLinks[ pageName ] = {
							linkElement: link,
							pageURL: pageURL,
							anchor: '',
							href: htmlFile
						};

					}

					if ( fullPageName === selectedPage || pageName === selectedPage ) {

						link.classList.add( 'selected' );
						scrollIntoViewVertical( link );

					}

				}

			} );

		}

		function scrollIntoViewVertical( element ) {

			const container = document.getElementById( 'content' );
			const elementTop = element.offsetTop;
			const elementHeight = element.offsetHeight;
			const viewportHeight = window.innerHeight;

			// Scroll to center the element vertically using viewport height
			const scrollTop = elementTop - ( viewportHeight / 2 ) + ( elementHeight / 2 );
			container.scrollTop = scrollTop;

		}

		function extractQuery() {

			const search = window.location.search;

			if ( search.indexOf( '?q=' ) !== - 1 ) {

				return decodeURI( search.slice( 3 ) );

			}

			return '';

		}

		function escapeRegExp( string ) {

			string = string.replace( /[.*+?^${}()|[\]\\]/g, '\\$&' );
			return '(?=.*' + string.split( ' ' ).join( ')(?=.*' ) + ')';

		}

		function updateFilter() {

			let v = filterInput.value.trim();
			v = v.replace( /\s+/gi, ' ' );

			const searchResults = document.getElementById( 'searchResults' );
			const content = document.getElementById( 'content' );

			if ( v !== '' ) {

				window.history.replaceState( {}, '', '?q=' + v + window.location.hash );

				// Show search results, hide navigation
				searchResults.style.display = 'block';
				content.style.display = 'none';

				if ( searchData === undefined ) {

					searchResults.innerHTML = '<div style="padding: 16px; color: #999;">Loading search data...</div>';
					return;

				}

				const regExp = new RegExp( escapeRegExp( v ), 'gi' );
				const highlightRegExp = new RegExp( v.replace( /[.*+?^${}()|[\]\\]/g, '\\$&' ), 'gi' );

				// Search through all categories
				const results = [];
				for ( const category in searchData ) {

					const items = searchData[ category ];
					for ( const item of items ) {

						if ( item.title.match( regExp ) ) {

							results.push( { ...item, category } );

						}

					}

				}

				// Display results
				if ( results.length > 0 ) {

					// Group results by class
					const grouped = {};
					results.forEach( item => {

						const parts = item.title.split( /[#~]/ );
						const className = parts[ 0 ];
						const memberName = parts[ 1 ];

						if ( ! grouped[ className ] ) {

							grouped[ className ] = {
								class: null,
								members: [],
								category: item.category
							};

						}

						// Convert title to hash: "BoxHelper#update" -> "BoxHelper.update"
						const fullHash = item.title.replace( /[#~]/g, '.' );

						if ( memberName ) {

							if ( memberName.match( regExp ) ) {

								grouped[ className ].members.push( {
									name: memberName,
									hash: fullHash,
									kind: item.kind
								} );

							}

						} else {

							grouped[ className ].class = {
								name: className,
								hash: fullHash
							};

						}

					} );

					// Helper function to highlight matching text
					function highlightMatch( text, regExp ) {

						return text.replace( regExp, match => `<strong>${match}</strong>` );

					}

					// Group by category
					const byCategory = {};
					for ( const className in grouped ) {

						const group = grouped[ className ];
						const category = group.category || 'Other';

						if ( ! byCategory[ category ] ) {

							byCategory[ category ] = {};

						}

						byCategory[ category ][ className ] = group;

					}

					// Render grouped results with category headers
					const currentHash = window.location.hash.substring( 1 );
					let html = '';

					const categories = Object.keys( searchData );
					for ( const category of categories ) {

						if ( ! byCategory[ category ] ) continue;

						html += `<h2>${category}</h2>`;

						for ( const className in byCategory[ category ] ) {

							const group = byCategory[ category ][ className ];

							if ( group.class ) {

								html += '<div class="search-result-group">';
								const selectedClass = group.class.hash === currentHash ? ' selected' : '';
								const highlightedName = highlightMatch( group.class.name, highlightRegExp );
								html += `<a href="#${group.class.hash}" class="search-result-class${selectedClass}">${highlightedName}</a>`;

							}

							if ( group.members.length > 0 ) {

								if ( ! group.class ) {

									html += '<div class="search-result-group">';
									html += `<a href="#${className}" class="search-result-class">${className}</a>`;

								}

								group.members.forEach( member => {

									const selectedClass = member.hash === currentHash ? ' selected' : '';
									const highlightedName = highlightMatch( member.name, highlightRegExp );
									const suffix = member.kind === 'function' ? '()' : '';
									html += `<a href="#${member.hash}" class="search-result-member${selectedClass}">.${highlightedName}${suffix}</a>`;

								} );

							}

							if ( group.class || group.members.length > 0 ) {

								html += '</div>';

							}

						}

					}

					searchResults.innerHTML = html;

					// Add click handlers to update selection
					searchResults.querySelectorAll( 'a' ).forEach( link => {

						link.addEventListener( 'click', function () {

							// Remove selected class from all links
							searchResults.querySelectorAll( 'a' ).forEach( item => {

								item.classList.remove( 'selected' );

							} );
							// Add selected class to clicked link
							link.classList.add( 'selected' );

						} );

					} );

				} else {

					searchResults.innerHTML = '<div style="padding: 16px; color: #999;">No results found.</div>';

				}

			} else {

				window.history.replaceState( {}, '', window.location.pathname + window.location.hash );

				// Hide search results, show navigation
				searchResults.style.display = 'none';
				content.style.display = 'block';

				// Highlight and scroll to current page in navigation
				const currentHash = window.location.hash.substring( 1 );
				if ( currentHash ) {

					// Extract the base page name (before the first dot for members)
					const basePage = currentHash.split( '.' )[ 0 ];

					// Find and highlight the link in navigation
					const pageInfo = pageLinks[ basePage ];
					if ( pageInfo ) {

						// Remove selected class from all links
						navigation.querySelectorAll( 'a' ).forEach( function ( item ) {

							item.classList.remove( 'selected' );

						} );

						// Add selected class to current page
						pageInfo.linkElement.classList.add( 'selected' );

						// Scroll the link into view
						scrollIntoViewVertical( pageInfo.linkElement );

					}

				}

			}

		}

		// Routing

		function createNewIframe() {

			const hash = window.location.hash.substring( 1 );

			// Parse hash: "global.Break" -> pageName: "global", anchor: "#Break"
			// or "BoxHelper" -> pageName: "BoxHelper", anchor: ""
			let pageName, anchor;
			const dotIndex = hash.indexOf( '.' );

			if ( dotIndex !== - 1 ) {

				pageName = hash.substring( 0, dotIndex );
				anchor = '#' + hash.substring( dotIndex + 1 );

			} else {

				pageName = hash;
				anchor = '';

			}

			let subtitle = '';

			const oldIframe = iframe;
			iframe = oldIframe.cloneNode();

			iframe.style.display = 'none';

			// Try to find the page link - first with full hash (e.g., "global.Break"), then without anchor
			const fullPageName = hash;
			let pageLink = pageLinks[ fullPageName ] || pageLinks[ pageName ];

			// If not found and hash doesn't contain a dot, try TSL.{hash} or global.{hash}
			if ( ! pageLink && dotIndex === - 1 && hash ) {

				pageLink = pageLinks[ 'TSL.' + hash ] || pageLinks[ 'global.' + hash ];

				// Update the hash to the full path
				if ( pageLink ) {

					const prefix = pageLinks[ 'TSL.' + hash ] ? 'TSL' : 'global';
					window.history.replaceState( {}, '', window.location.pathname + window.location.search + '#' + prefix + '.' + hash );

				}

			}

			if ( hash && pageLink ) {

				iframe.onload = function () {

					iframe.style.display = 'unset';

					// Intercept clicks on internal documentation links in the iframe
					setupIframeLinks();

				};

				// Use the stored anchor if available, otherwise use the parsed one
				const iframeAnchor = pageLink.anchor || anchor;
				iframe.src = pageLink.pageURL + iframeAnchor;
				subtitle = hash + ' – ';

				// Update navigation selection and scroll into view
				navigation.querySelectorAll( 'a' ).forEach( function ( item ) {

					item.classList.remove( 'selected' );

				} );

				if ( pageLink.linkElement ) {

					pageLink.linkElement.classList.add( 'selected' );

					// Only scroll if this is not a user click (user clicks handle their own smooth scrolling)
					if ( ! isUserClick ) {

						scrollIntoViewVertical( pageLink.linkElement );

					}

					isUserClick = false;

				}

			} else {

				iframe.src = '';
				subtitle = '';

			}

			document.body.replaceChild( iframe, oldIframe );
			document.title = subtitle + 'three.js docs';

		}

		function setupIframeLinks() {

			try {

				// Get the iframe's document
				const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

				// Find all links in the iframe
				const links = iframeDoc.querySelectorAll( 'a' );

				links.forEach( function ( link ) {

					link.addEventListener( 'click', function ( event ) {

						const href = link.getAttribute( 'href' );

						// Only handle relative links to .html files (with or without anchors)
						if ( href && ! href.startsWith( 'http' ) && href.includes( '.html' ) ) {

							event.preventDefault();

							// Parse href: "global.html#Break" -> "global.Break" or "Light.html" -> "Light"
							const match = href.match( /^([^#]+\.html)(#.*)?$/ );
							if ( match ) {

								const htmlFile = match[ 1 ];
								const anchor = match[ 2 ] || '';
								const pageName = htmlFile.replace( /\.html$/, '' );
								// Convert to dot notation: "global.html#Break" -> "global.Break"
								const fullHash = pageName + anchor.replace( '#', '.' );

								// Update the parent page's hash
								window.location.hash = fullHash;

							}

						}

					} );

				} );

			} catch ( e ) {

				// Ignore cross-origin errors
				console.error( 'Could not set up iframe links:', e );

			}

		}

		//

		console.log( [
			'    __     __',
			' __/ __\\  / __\\__   ____   _____   _____',
			'/ __/  /\\/ /  /___\\/ ____\\/ _____\\/ _____\\',
			'\\/_   __/ /   _   / /  __/ / __  / / __  /_   __   _____',
			'/ /  / / /  / /  / /  / / /  ___/ /  ___/\\ _\\/ __\\/ _____\\',
			'\\/__/  \\/__/\\/__/\\/__/  \\/_____/\\/_____/\\/__/ /  / /  ___/',
			'                                         / __/  /  \\__  \\',
			'                                         \\/____/\\/_____/'
		].join( '\n' ) );

		</script>

	</body>

</html>