Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 1d8d621e 编写于 作者: M Mr.doob 提交者： GitHub
浏览文件
操作

Merge pull request #10460 from looeee/manual/running_locally_update 

Updated manual's "running things locally" and "Detecting WebGL and browser compatibility" pages
上级 194c2e7a a732e568
隐藏空白更改
内联 并排
Showing with 193 addition and 114 deletion
docs/manual/introduction/Detecting-WebGL-and-browser-compatibility.html
浏览文件 @ 1d8d621e
......@@ -10,22 +10,24 @@
<body>
<h1>[name]</h1><br />
<p>
Even those this is becming less and less of a problem, some devices or browsers may not support WebGL.
Here is how to check if it is supported and display a warning to the user if it is not.
Even though this is becoming less and less of a problem, some devices or browsers may still not support WebGL.
The following method allows you to check if it is supported and display a message to the user if it is not.
</p>
<h2>A solution</h2>
<p>In order to detect webgl compatibility and gracefully inform the user you can add <a href="https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js">https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js</a> to your javascript and use this example to avoid even attempting to render anything:</p>
<p>
Add [link:https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js]
to your javascript and run the following before attempting to render anything.
</p>
<pre><code>if (Detector.webgl) {
init();
animate();
} else {
var warning = Detector.getWebGLErrorMessage();
document.getElementById('container').appendChild(warning);
}
</code></pre>
<code>
if (Detector.webgl) {
init();
animate();
} else {
var warning = Detector.getWebGLErrorMessage();
document.getElementById('container').appendChild(warning);
}
</code>
</body>
......
docs/manual/introduction/How-to-run-thing-locally.html
浏览文件 @ 1d8d621e
......@@ -8,107 +8,184 @@
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1><br />
<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 (accessed as <code>file:///example</code>).</p>
<h1>[name]</h1>
<div>
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).
</div>
<h2>Content loaded from external files</h2>
<p>If you load models or textures from external files, due to browsers' "<a href="http://en.wikipedia.org/wiki/Same_origin_policy">same origin policy</a>" security restrictions, loading from a file system will fail with a security exception.</p>
<p>There are two ways how to solve this:</p>
<ol>
<li><p>Change security for local files in a browser (access page as <code>file:///example</code>)</p></li>
<li><p>Run files from a local server (access page as <code>http://localhost/example</code>)</p></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.</p>
<hr>
<h3>Change local files security policy</h3>
<h4>Safari</h4>
<p>Enable the develop menu using the preferences panel, under Advanced -&gt; "Show develop menu in menu bar"</p>
<p>Then from the safari "Develop" menu, select "Disable local file restrictions", it is also worth noting safari has some odd behaviour with caches, so it is advisable to use the "Disable caches" option in the same menu; if you are editing &amp; debugging using safari.</p>
<h4>Chrome</h4>
<p>Close all running Chrome instances first. The important word here is 'all'.</p>
<p>On Windows, you may check for Chrome instances using the Windows Task Manager. Alternatively, if you see a Chrome icon in the system tray, then you may open its context menu and click 'Exit'. This should close all Chrome instances.</p>
<p>Then start the Chrome executable with a command line flag:</p>
<pre><code>chrome --allow-file-access-from-files
</code></pre>
<p>On Windows, probably the easiest is probably to create a special shortcut icon which has added the flag given above (right-click on shortcut -&gt; properties -&gt; target).</p>
<p>On Mac OSX, you can do this with</p>
<pre><code>open /Applications/Google\ Chrome.app --args --allow-file-access-from-files
</code></pre>
<h4>Firefox</h4>
<ol>
<li>Go to <code>about:config</code>
</li>
<li>Find <code>security.fileuri.strict_origin_policy</code> parameter</li>
<li>Set it to <code>false</code>
</li>
</ol>
<hr>
<h3>Run local server</h3>
<p>The simplest probably is to use Python's built-in http server. </p>
<p>If you have <a href="http://python.org/">Python</a> installed, it should be enough to run this from a command line:</p>
<div class="highlight highlight-source-shell"><pre><span class="pl-c"><span class="pl-c">#</span> Python 2.x</span>
python -m SimpleHTTPServer</pre></div>
<div class="highlight highlight-source-shell"><pre><span class="pl-c"><span class="pl-c">#</span> Python 3.x</span>
python -m http.server</pre></div>
<p>This will serve files from the current directory at localhost under port 8000:</p>
<p>http://localhost:8000/</p>
<p>If you have Ruby installed, you can get the same result running this instead:</p>
<div class="highlight highlight-source-shell"><pre>ruby -r webrick -e <span class="pl-s"><span class="pl-pds">"</span>s = WEBrick::HTTPServer.new(:Port =&gt; 8000, :DocumentRoot =&gt; Dir.pwd); trap('INT') { s.shutdown }; s.start<span class="pl-pds">"</span></span></pre></div>
<p>PHP also has a built-in web server, starting with php 5.4.0:</p>
<div class="highlight highlight-source-shell"><pre>php -S localhost:8000</pre></div>
<p>Node.js has a simple HTTP server package. To install:</p>
<div class="highlight highlight-source-shell"><pre>npm install http-server -g</pre></div>
<p>To run:</p>
<div class="highlight highlight-source-shell"><pre>http-server <span class="pl-c1">.</span></pre></div>
<p>Other simple alternatives are <a href="http://stackoverflow.com/q/12905426/24874">discussed here</a> on Stack Overflow.</p>
<p>Of course, you can use any other regular full-fledged web server like <a href="http://www.apachefriends.org/en/xampp.html">Apache</a> or <a href="http://nginx.org/">nginx</a>.</p>
<p>Example with lighttpd, which is a very lightweight general purpose webserver (on MAC OSX):</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 in <a href="http://redmine.lighttpd.net/projects/lighttpd/wiki/TutorialConfiguration">this</a> page.</li>
<li>In the conf file, change the server.document-root with the directory you want to serve</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> </body>
<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>Change local files security policy</h2>
<div>
<h4>Safari</h4>
<div>
<p>
Enable the develop menu using the preferences panel, under Advanced -&gt; "Show develop menu
in menu bar".
</p>
<p>
Then from the safari "Develop" menu, select "Disable local file restrictions", it is also
worth noting safari has some odd behaviour with caches, so it is advisable to use the
"Disable caches" option in the same menu; if you are editing &amp; debugging using safari.
</p>
</div>
<h4>Chrome</h4>
<div>
<p>Close all running Chrome instances first. The important word here is 'all'.</p>
<p>
On Windows, you may check for Chrome instances using the Windows Task Manager.
Alternatively, if you see a Chrome icon in the system tray, then you may open its context
menu and click 'Exit'. This should close all Chrome instances.
</p>
<p>Then start the Chrome executable with a command line flag:</p>
<code>chrome --allow-file-access-from-files</code>
<p>
On Windows, probably the easiest is probably to create a special shortcut icon which has
added the flag given above (right-click on shortcut -&gt; properties -&gt; target).
</p>
<p>On Mac OSX, you can do this with</p>
<code>open /Applications/Google\ Chrome.app --args --allow-file-access-from-files</code>
</div>
<h4>Firefox</h4>
<div>
<ol>
<li>
In the address bar, type <code>about:config</code>
</li>
<li>
Find the <code>security.fileuri.strict_origin_policy</code> parameter
</li>
<li>
Set it to <em>false</em>
</li>
</ol>
</div>
</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>
<h4>Running a Python server</h4>
<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>
<h4>Running a Ruby server</h4>
<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>
<h4>Running a PHP server</h4>
<div>
<p>PHP also has a built-in web server, starting with php 5.4.0:</p>
<code>php -S localhost:8000</code>
</div>
<h4>Running a Node.js server</h4>
<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>
<h4>Running lighttpd on Mac</h4>
<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].
page.
</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>
<p>
Other simple alternatives are [link:http://stackoverflow.com/q/12905426/24874 discussed here]
on Stack Overflow.
</p>
</div>
</body>
</html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或