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.
170 lines
5.3 KiB
170 lines
5.3 KiB
3 years ago
|
<!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>
|
||
|
|
To solve this, run files from a local web server. This allows you to access your page as:
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
<code>http://localhost/yourFile.html</code>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
While it is also possible to change browser security settings instead of running a local server,
|
||
|
|
we do not recommend that approach. Doing so may open your device up to vulnerabilities, if the
|
||
|
|
same browser is used for regular web surfing. Use of a local server is standard practice in
|
||
|
|
web development, and we explain how to install and use a local server below.
|
||
|
|
</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>
|