1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="../../../" />
<script src="list.js"></script>
<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>Node.js 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 externsion before loading.</p>
<code>File name externsion: 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>
|
