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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
							<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<base href="../../../" />
		<script src="page.js"></script>
		<link type="text/css" rel="stylesheet" href="page.css" />
	</head>
	<body>
		<h1>[name]</h1>
		<p>
			If you use just procedural geometries and don't load any textures, webpages should work
			straight from the file system, just double-click on HTML file in a file manager and it
			should appear working in the browser (you'll see <em>file:///yourFile.html</em> in the address bar).
		</p>

		<h2>Content loaded from external files</h2>
		<div>
			<p>
				If you load models or textures from external files, due to browsers' [link:http://en.wikipedia.org/wiki/Same_origin_policy same origin policy]
			 	security restrictions, loading from a file system will fail with a security exception.
		 	</p>

			<p>There are two ways to solve this:</p>

			<ol>
				<li>
					Change security for local files in a browser. This allows you to access your page as: <code>file:///yourFile.html</code>
				</li>
				<li>
					Run files from a local web server. This allows you to access your page as: <code>http://localhost/yourFile.html</code>
				</li>
			</ol>

			<p>
				If you use option 1, be aware that you may open yourself to some vulnerabilities if using
				the same browser for a regular web surfing. You may want to create a separate browser
				profile / shortcut used just for local development to be safe. Let's go over each option in turn.
			</p>
		</div>


		<h2>Run a local server</h2>
		<div>
			<p>
				Many programming languages have simple HTTP servers built in. They are not as full featured as
				production servers such as [link:https://www.apache.org/ Apache] or [link:https://nginx.org NGINX], however they should be sufficient for testing your
				three.js application.
			</p>
			
			<h3>Plugins for popular code editors</h3>
			<div>
				<p>Some code editors have plugins which will spawn a simple server on demand.</p>
				<ul>
					<li>[link:https://marketplace.visualstudio.com/items?itemName=yandeu.five-server Five Server] for Visual Studio Code.</li>
					<li>[link:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer Live Server] for Visual Studio Code.</li>
					<li>[link:https://atom.io/packages/atom-live-server Live Server] for Atom.</li>
				</ul>
			</div>

			<h3>Servez</h3>
			<div>
				<p>
					[link:https://greggman.github.io/servez Servez] is a simple server with a GUI.
				</p>
			</div>

			<h3>Node.js five-server</h3>
			<div>
				<p>Development server with live reload capability. To install:</p>
				<code>
# Remove live-server (if you have it)
npm -g rm live-server

# Install five-server
npm -g i five-server

# Update five-server (from time to time)
npm -g i five-server@latest
				</code>

				<p>To run (from your local directory):</p>
				<code>five-server . -p 8000</code>
			</div>

			<h3>Node.js http-server</h3>
			<div>
				<p>Node.js has a simple HTTP server package. To install:</p>
				<code>npm install http-server -g</code>

				<p>To run (from your local directory):</p>
				<code>http-server . -p 8000</code>
			</div>

			<h3>Python server</h3>
			<div>
				<p>
					If you have [link:http://python.org/ Python] installed, it should be enough to run this
					from a command line (from your working directory):
				</p>
				<code>
//Python 2.x
python -m SimpleHTTPServer

//Python 3.x
python -m http.server
				</code>

				<p>This will serve files from the current directory at localhost under port 8000, i.e in the address bar type:</p>

				<code>http://localhost:8000/</code>
			</div>

			<h3>Ruby server</h3>
			<div>
				<p>If you have Ruby installed, you can get the same result running this instead:</p>
				<code>
ruby -r webrick -e "s = WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot => Dir.pwd); trap('INT') { s.shutdown }; s.start"
				</code>
			</div>

			<h3>PHP server</h3>
			<div>
				<p>PHP also has a built-in web server, starting with php 5.4.0:</p>
				<code>php -S localhost:8000</code>
			</div>

			<h3>Lighttpd</h3>
			<div>
				<p>
					Lighttpd is a very lightweight general purpose webserver. We'll cover installing it on OSX with
					HomeBrew here. Unlike the other servers discussed here, lighttpd is a full fledged production
					ready server.
				</p>

				<ol>
					<li>
						Install it via homebrew
						<code>brew install lighttpd</code>
					</li>
					<li>
						Create a configuration file called lighttpd.conf in the directory where you want to run
						your webserver. There is a sample [link:http://redmine.lighttpd.net/projects/lighttpd/wiki/TutorialConfiguration here].
					 </li>
					<li>
						In the conf file, change the server.document-root to the directory you want to serve files from.
					</li>
					<li>
						Start it with
						<code>lighttpd -f lighttpd.conf</code>
					</li>
					<li>
						Navigate to http://localhost:3000/ and it will serve static files from the directory you
						chose.
					</li>
				</ol>
			</div>
			<h3>IIS</h3>
			<div>
				<p>If you are using Microsoft IIS as web server. Please add a MIME type settings regarding .fbx extension before loading.</p>
				<code>File name extension: fbx        MIME Type: text/plain</code>
				<p>By default, IIS blocks .fbx, .obj files downloads. You have to configure IIS to enable these kind of files can be download.</p>
			</div>
			<p>
				Other simple alternatives are [link:http://stackoverflow.com/q/12905426/24874 discussed here]
				on Stack Overflow.
			</p>
		</div>

	</body>
</html>