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.
149 lines
7.2 KiB
149 lines
7.2 KiB
<!DOCTYPE html>
|
|
<html lang="ja">
|
|
|
|
<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>
|
|
テクスチャを呼び出さずに、ジオメトリを使うだけならウェブページをファイルシステムからそのまま動かすことができます。ファイルマネージャのHTMLファイルをダブルクリックすると、ブラウザで動作するはずです。(ブラウザのアドレスバーには<em>file:///yourFile.html</em>と表示されているでしょう)
|
|
</p>
|
|
|
|
<h2>外部のファイルからコンテンツを読み込む</h2>
|
|
<div>
|
|
<p>
|
|
外部ファイルからテクスチャやモジュールを読み込む場合、ブラウザのセキュリティ制限によって、ファイルシステムからの読み込みは失敗します。
|
|
</p>
|
|
|
|
<p>これを解決するには2つの方法があります。</p>
|
|
|
|
<ol>
|
|
<li>
|
|
ブラウザのローカルファイルに対するセキュリティ設定を変更することです。これによって、<code>file:///yourFile.html</code>といったローカルのファイルにアクセスできるようになります。
|
|
</li>
|
|
<li>
|
|
もうひとつは、ローカルのサーバからファイルを起動することです。こうすることで、<code>http://localhost/yourFile.html</code>にアクセスできるようになります。
|
|
</li>
|
|
</ol>
|
|
|
|
<p>
|
|
1つ目の方法を使う場合、いつも使用しているブラウザを使用すると、自ら脆弱性を露呈させかねないことに注意してください。念のため、ローカル開発専用のブラウザプロファイル/ショートカットを分けて作成しておいた方が良いかもしれません。それぞれのオプションを順番に紹介します。
|
|
</p>
|
|
</div>
|
|
|
|
|
|
<h2>ローカルでサーバを動かす</h2>
|
|
<div>
|
|
<p>
|
|
ほとんどのプログラム言語は組み込みの簡単なHTTPサーバが使えます。こういった組み込みのサーバは、ApacheやNginxなどの本番用に使用されるサーバと比べると機能が少ないですが、three.jsを試してみるには十分な機能があります
|
|
</p>
|
|
|
|
<h3>コードエディタのプラグイン</h3>
|
|
<div>
|
|
<p>コードエディタの中には、オンデマンドでシンプルなサーバを起動するプラグインがありものがあります</p>
|
|
<ul>
|
|
<li>Visual Studio Codeの[link:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer Live Server]</li>
|
|
<li>Atomの[link:https://atom.io/packages/atom-live-server Live Server]</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h3>Servez</h3>
|
|
<div>
|
|
<p>
|
|
[link:https://greggman.github.io/servez Servez]はGUI で操作できるシンプルなサーバです。
|
|
</p>
|
|
</div>
|
|
|
|
<h3>Node.js http-server</h3>
|
|
<div>
|
|
<p>Node.jsにはシンプルなHTTPサーバーパッケージがあります。インストールするには以下のコマンドを実行してください。</p>
|
|
<code>npm install http-server -g</code>
|
|
|
|
<p>ローカル環境で実行するには以下のようにしてください</p>
|
|
<code>http-server . -p 8000</code>
|
|
</div>
|
|
|
|
<h3>Python server</h3>
|
|
<div>
|
|
<p>
|
|
[link:http://python.org/ Python]がインストールされている場合、作業ディレクトリで以下のようにコマンドライン実行すれば、サーバを動かすことができます。
|
|
</p>
|
|
<code>
|
|
//Python 2.x
|
|
python -m SimpleHTTPServer
|
|
|
|
//Python 3.x
|
|
python -m http.server
|
|
</code>
|
|
|
|
<p>
|
|
このようにすることで、ローカルホストのカレントディレクトリから8000番ポートでファイルが提供されます。提供されるファイルを見るためには、ブラウザのアドレスバーに以下のように入力してください。
|
|
</p>
|
|
|
|
<code>http://localhost:8000/</code>
|
|
</div>
|
|
|
|
<h3>Ruby server</h3>
|
|
<div>
|
|
<p>Rubyがインストールされている環境の場合、代わりに以下のコマンドを実行することでサーバを動かすことができます。</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にも組み込みのwebサーバがあるので、phpの5.4.0で以下のように実行してみてください</p>
|
|
<code>php -S localhost:8000</code>
|
|
</div>
|
|
|
|
<h3>Lighttpd</h3>
|
|
<div>
|
|
<p>
|
|
Lighttpd は非常に軽量な汎用ウェブサーバです。ここではOSXにHomeBrewでインストールする方法を説明します。ここで説明した他のサーバとは異なり、lighttpd は本格的な本番環境に対応したサーバです。
|
|
</p>
|
|
|
|
<ol>
|
|
<li>
|
|
homebrewでLighttpdをインストールする
|
|
<code>brew install lighttpd</code>
|
|
</li>
|
|
<li>
|
|
ウェブサーバを動作させたいディレクトリにlighttpd.confという設定ファイルを作成します。 設定ファイルのサンプルはこちらにあります。: [link:http://redmine.lighttpd.net/projects/lighttpd/wiki/TutorialConfiguration TutorialConfiguration]
|
|
</li>
|
|
<li>
|
|
設定ファイルでserver.document-rootを提供したいファイルが置いてあるディレクトリに変更してください
|
|
</li>
|
|
<li>
|
|
Lighttpdは以下のコマンドで実行できます。
|
|
<code>lighttpd -f lighttpd.conf</code>
|
|
</li>
|
|
<li>
|
|
http://localhost:3000/ に移動すると、選択したディレクトリから静的ファイルを提供します。
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
<h3>IIS</h3>
|
|
<div>
|
|
<p>
|
|
WebサーバにMicrosoft IISを使用している場合ロードする前に.fbx拡張子に関するMIMEタイプの設定を追加してください。
|
|
</p>
|
|
<code>File name extension: fbx MIME Type: text/plain</code>
|
|
<p>
|
|
デフォルトではIISは.fbxや.objのファイルをダウンロードするのをブロックします。そのため、IISがそういったファイル(.fbxなど)をダウンロードできるように設定を変更する必要があります。
|
|
|
|
</p>
|
|
</div>
|
|
<p>
|
|
他のシンプルな方法はStack Overflowで議論されています: [link:http://stackoverflow.com/q/12905426/24874 Simple way]
|
|
</p>
|
|
</div>
|
|
|
|
</body>
|
|
|
|
</html>
|