123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152 |
- <!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=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 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>
|