javascript
/
three.js
mirror de https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483
							<!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.ico" />
	<link rel="stylesheet" type="text/css" href="../files/main.css">
	<!-- console sandbox -->
	<script src="../build/three.min.js" async defer></script>
</head>

<body>
	<div id="panel">

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

			<div id="sections">
				<span class="selected">docs</span>
				<a href="../examples/#webgl_animation_cloth">examples</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="exitSearchButton"></div>
				<select id="language">
					<option value="en">en</option>
					<option value="ar">ar</option>
					<option value="zh">中文</option>
				</select>
			</div>
			<div id="content"></div>
		</div>

	</div>

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

	<script src="list.js"></script>

	<script>

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

		// Localisation

		var language = 'en';

		if (/^(api|manual|examples)/.test(hash)) {

			var hashLanguage = /^(api|manual|examples)\/(en|ar|zh)\//.exec(hash);

			if (hashLanguage === null) {

				// Route old non-localised api links

				window.location.hash = hash.replace(/^(api|manual|examples)/, '$1/en');

			} else {

				language = hashLanguage[2];

			}

		}

		//

		var languageSelect = document.getElementById('language');
		languageSelect.value = language;
		languageSelect.addEventListener('change', function (event) {

			setLanguage(this.value);

		});

		function setLanguage(value) {

			language = value;

			createNavigation();
			updateFilter();
			autoChangeUrlLanguage(language);

		}

		var panel = document.getElementById('panel');
		var content = document.getElementById('content');
		var expandButton = document.getElementById('expandButton');
		var exitSearchButton = document.getElementById('exitSearchButton');
		var panelScrim = document.getElementById('panelScrim');
		var filterInput = document.getElementById('filterInput');
		var iframe = document.querySelector('iframe');

		var pageProperties = {};
		var titles = {};
		var categoryElements = [];

		var navigation;

		// Functionality for hamburger button (on small devices)

		expandButton.onclick = function (event) {

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

		};

		panelScrim.onclick = function (event) {

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

		};


		// Functionality for search/filter input field
		filterInput.onfocus = function (event) {

			panel.classList.add('searchFocused');

		};

		filterInput.onblur = function (event) {

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

				panel.classList.remove('searchFocused');

			}

		};

		exitSearchButton.onclick = function (event) {

			filterInput.value = '';
			updateFilter();
			panel.classList.remove('searchFocused');

		};

		filterInput.oninput = function (event) {

			updateFilter();

		};

		// Activate content and title change on browser navigation

		window.onpopstate = createNewIframe;

		// Create the navigation panel and configure the iframe

		createNavigation();
		createNewIframe();

		// Navigation Panel

		function createLink(pageName, pageURL) {

			var link = document.createElement('a');
			link.href = pageURL + '.html';
			link.textContent = pageName;
			link.setAttribute('target', 'viewer');
			link.addEventListener('click', function (event) {

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

				window.location.hash = pageURL;
				panel.classList.remove('open');


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

					item.classList.remove('selected');

				});

				link.classList.add('selected');

			});

			return link;

		}

		function createNavigation() {

			if (navigation !== undefined) {

				content.removeChild(navigation);

			}

			// Create the navigation panel using data from list.js

			navigation = document.createElement('div');
			content.appendChild(navigation);

			var localList = list[language];

			for (var section in localList) {

				// Create sections

				var categories = localList[section];

				var sectionHead = document.createElement('h2');
				sectionHead.textContent = section;
				navigation.appendChild(sectionHead);

				for (var category in categories) {

					// Create categories

					var pages = categories[category];

					var categoryContainer = document.createElement('div');
					navigation.appendChild(categoryContainer);

					var categoryHead = document.createElement('h3');
					categoryHead.textContent = category;
					categoryContainer.appendChild(categoryHead);

					var categoryContent = document.createElement('ul');
					categoryContainer.appendChild(categoryContent);

					for (var pageName in pages) {

						// Create page links

						var pageURL = pages[pageName];

						// Localisation

						var listElement = document.createElement('li');
						categoryContent.appendChild(listElement);

						var linkElement = createLink(pageName, pageURL);
						listElement.appendChild(linkElement);

						// Gather the main properties for the current subpage

						pageProperties[pageName] = {
							section: section,
							category: category,
							pageURL: pageURL,
							linkElement: linkElement
						};

						// Gather the document titles (used for easy access on browser navigation)

						titles[pageURL] = pageName;

					}

					// Gather the category elements for easy access on filtering

					categoryElements.push(categoryContent);

				}

			}

		}

		// Auto change language url. If a reader open a document in English, when he click "zh", the document he read will auto change into Chinese version

		function autoChangeUrlLanguage(language) {

			var hash = location.hash;
			if (hash === '') return;
			var docType = hash.substr(0, hash.indexOf('/') + 1);
			var docLink = hash.substr(hash.indexOf('/') + 1);
			docLink = docLink.substr(docLink.indexOf('/'));
			location.href = docType + language + docLink;

		}

		// Filtering

		function updateFilter() {

			// (uncomment the following line and the "Query strings" section, if you want query strings):
			// updateQueryString();

			var regExp = new RegExp(filterInput.value, 'gi');

			for (var pageName in pageProperties) {

				var linkElement = pageProperties[pageName].linkElement;
				var categoryClassList = linkElement.parentElement.classList;
				var filterResults = pageName.match(regExp);

				if (filterResults && filterResults.length > 0) {

					// Accentuate matching characters

					for (var i = 0; i < filterResults.length; i++) {

						var result = filterResults[i];

						if (result !== '') {

							pageName = pageName.replace(result, '<b>' + result + '</b>');

						}

					}

					categoryClassList.remove('hidden');
					linkElement.innerHTML = pageName;

				} else {

					// Hide all non-matching page names

					categoryClassList.add('hidden');

				}

			}

			displayFilteredPanel();

		}

		function displayFilteredPanel() {

			// Show/hide categories depending on their content
			// First check if at least one page in this category is not hidden

			categoryElements.forEach(function (category) {

				var pages = category.children;
				var pagesLength = pages.length;
				var sectionClassList = category.parentElement.classList;

				var hideCategory = true;

				for (var i = 0; i < pagesLength; i++) {

					var pageClassList = pages[i].classList;

					if (!pageClassList.contains('hidden')) {

						hideCategory = false;

					}

				}

				// If and only if all page names are hidden, hide the whole category

				if (hideCategory) {

					sectionClassList.add('hidden');

				} else {

					sectionClassList.remove('hidden');

				}

			});

		}

		// Routing

		function setUrlFragment(pageName) {

			// Handle navigation from the subpages (iframes):
			// First separate the memeber (if existing) from the page name,
			// then identify the subpage's URL and set it as URL fragment (re-adding the member)

			var splitPageName = decomposePageName(pageName, '.', '.');

			var currentProperties = pageProperties[splitPageName[0]];

			if (currentProperties) {

				window.location.hash = currentProperties.pageURL + splitPageName[1];

				createNewIframe();

			}

		}

		function createNewIframe() {

			// Change the content displayed in the iframe
			// First separate the member part of the fragment (if existing)

			var hash = window.location.hash.substring(1);
			var splitHash = decomposePageName(hash, '.', '#');

			// Creating a new Iframe instead of assigning a new src is
			// a cross-browser solution to allow normal browser navigation;
			// - only assigning a new src would result in two history states each time.

			// Note: iframe.contentWindow.location.replace(hash) should work, too,
			// but it doesn't work in Edge with links from the subpages!

			var oldIframe;
			var subtitle;

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

			if (hash) {

				iframe.src = splitHash[0] + '.html' + splitHash[1];
				subtitle = titles[splitHash[0]] + splitHash[1] + ' – ';

			} else {

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

			}

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

		}

		function decomposePageName(pageName, oldDelimiter, newDelimiter) {

			// Helper function for separating the member (if existing) from the pageName
			// For example: 'Geometry.morphTarget' can be converted to
			// ['Geometry', '.morphTarget'] or ['Geometry', '#morphTarget']
			// Note: According RFC 3986 no '#' allowed inside of an URL fragment!

			var parts = [];

			var dotIndex = pageName.indexOf(oldDelimiter);

			if (dotIndex !== - 1) {

				parts = pageName.split(oldDelimiter);
				parts[1] = newDelimiter + parts[1];

			} else {

				parts[0] = pageName;
				parts[1] = '';

			}

			return parts;

		}

		//

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

	</script>

</body>

</html>