setup.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. Title: Three.jsのセットアップ
  2. Description: three.jsの開発環境のセットアップ方法
  3. TOC: セットアップ
  4. これはthree.jsの連載記事の1つです。
  5. 最初の記事は[Three.jsの基礎知識](threejs-fundamentals.html)でした。
  6. まだ読んでない人はそこから読んでみるといいかもしれません。
  7. 先に進む前に開発環境のセットアップの話をする必要があります。特にセキュリティ上の理由から、WebGLはハードディスクから直接画像を扱う事ができません。開発をするためにはWebサーバーを利用する必要があります。幸運な事に開発用のWebサーバーをセットアップし利用する事は非常に簡単です。
  8. まず最初にこのサイト全体を[このリンク](https://github.com/gfxfundamentals/threejsfundamentals/archive/gh-pages.zip)からダウンロードする事ができます。
  9. ダウンロードしたらzipファイルをダブルクリックで解凍して下さい。
  10. 次にシンプルなWebサーバーの1つをダウンロードします。
  11. ユーザーインターフェースのあるWebサーバーをお望みなら[Servez](https://greggman.github.io/servez)があります。
  12. {{{image url="resources/servez.gif" className="border" }}}
  13. ファイルを解凍してフォルダを指定し、"Start"をクリックしてからブラウザで[`http://localhost:8080/`](http://localhost:8080/)を表示するか、またはサンプルを閲覧したい場合は[`http://localhost:8080/threejs`](http://localhost:8080/threejs)にアクセスして下さい。
  14. Servezのサービスを停止するにはstopを選ぶか、Servezを終了します。
  15. コマンドラインが好きな方は(私はそうしてる)、別の方法として[node.js](https://nodejs.org)を使う事もできます。
  16. ダウンロードしてインストールし、コマンドプロンプト / コンソール / ターミナルウィンドウを開きます。WindowsのNode.jsインストーラーで追加した場合、"Node Command Prompt"を選択する必要があります。
  17. [`servez`](https://github.com/greggman/servez-cli)をインストールするには、次のように入力します。
  18. npm -g install servez
  19. もしMacを使ってる場合は以下を入力します。
  20. sudo npm -g install servez
  21. 次に以下を入力します。
  22. servez path/to/folder/where/you/unzipped/files
  23. または、私と同じであれば以下を入力します。
  24. cd path/to/folder/where/you/unzipped/files
  25. servez
  26. そして、以下のように表示されるはずです。
  27. {{{image url="resources/servez-response.png" }}}
  28. ブラウザで[`http://localhost:8080/`](http://localhost:8080/)にアクセスして下さい。
  29. もしパスを指定しなかった場合、servezは現在のフォルダをserveします。
  30. これらのオプションが好きでない場合、[他にもたくさんのシンプルなサーバーがあります](https://stackoverflow.com/questions/12905426/what-is-a-faster-alternative-to-pythons-servez-or-simplehttpserver)。
  31. これでサーバーのセットアップが完了したので[テクスチャ](threejs-textures.html)のページに移動しましょう。