jThree
WebGLDay 10

Sublime Text3 でローカルPC上にjThreeの開発環境を作る

More than 3 years have passed since last update.


エントリをアップしてまもなくjThreeがv2.0.7→v2.1.0とバージョンアップしたので、v2.1.0向けに修正した記事を、以下にアップしています。


http://takemikami.com/2014/12/17/Sublime-Text3-PCjThreev210.html


jQueryで手軽にWebGLを扱えるjThree。

WebベースのjThreeエディタを使うと、ブラウザ上でコードを書いてすぐに試す事が出来て便利ですが。

やはり、手元のPC上で開発出来る環境がある方が、

自分の好きなエディタを使ったり、モデルデータをおいたりなど自由度が高くなります。

このエントリでは、Sublime Text3のSublimeServerプラグインを使って、

ローカルPC上にjThreeの開発環境を作る手順を紹介します。

jThree Editor

http://editor.jthree.jp/


SublimeText3とSublimeServerの設定

まずは、Sublime Text3とSublimeServerのインストールと設定を行います。

①以下のサイトから、利用しているOSのバイナリをダウンロードして、インストールします。

Sublime Text 3

http://www.sublimetext.com/3

②Sublime Text 3を起動します。

③以下のサイトに記載されている「import〜」のコードを、「View→Show Console」で表示された入力エリアに貼り付けます。

Package Control

https://sublime.wbond.net/installation

スクリーンショット 2014-12-09 22.53.29.png

スクリーンショット 2014-12-09 22.55.09.png

いろいろメッセージがでて、しばらくすると完了します。

④「Tools→Command Pallete」で「package cont…」と入力すると、候補に「Package Controll: Install Package」が出てくるので選択。

次のパッケージ検索の入力欄に「sublimeserver」と入力、「SublimeServer」を選択して、インストールを実行します。

スクリーンショット 2014-12-09 22.56.31.png

スクリーンショット 2014-12-09 23.08.33.png

⑤「Tools→SublimeServer→Start SublimeServer」を選択して、SublimeServerを起動します。

⑥ブラウザを起動してhttp://localhost:8080/にアクセスして以下のように表示されていればOKです。

スクリーンショット 2014-12-09 23.13.59.png


jThreeのライブラリのダウンロード・サンプル表示

次に、jThreeのライブラリをダウンロードし、添付のサンプルを表示させます。

①以下のサイトから、「jThree v2.0.7をダウンロード」をクリックして「jThree.zip」をダウンロード、適当なディレクトリに展開します。

jThree

http://jthree.jp/

②Sublime Text3で「File→Open」を選び、「jThree.zip」を展開したディレクトリを開きます。

③ブラウザのhttp://localhost:8080/を再読み込みすると、以下のように表示されるので「jThree2.0.7→sample」と選びます。

スクリーンショット 2014-12-09 23.19.37.png

④以下のようなサンプルが表示されればOKです。

スクリーンショット 2014-12-09 23.25.49.png

もちろん、以下のようなURLから他のサンプルも参照できます。

http://localhost:8080/jThree2.0.7/sample/mobilevr.html

http://localhost:8080/jThree2.0.7/sample/control.html

http://localhost:8080/jThree2.0.7/sample/oculus.html

http://localhost:8080/jThree2.0.7/sample/webar.html


jThreeエディタで作成したファイルをローカルで動かす

次にjThreeエディタで作成したファイルをダウンロードして、ローカルPC上で動かしてみます。

①以下のURLからjThreeエディタの初期状態のデモを表示し、「DL」メニューをクリックして「WebGLEditor.zip」ファイルをダウンロードします。

jThreeエディタ(初期デモ雛形)

http://editor.jthree.jp/?id=JtHWxQ

②「WebGLEditor.zip」を展開して、各ファイルをjThree.zip」を展開したディレクトリに配置します。

スクリーンショット 2014-12-09 23.31.14.png

③jThreeエディタと、ダウンロードしたファイルではディレクトリ構成が異なっていたり、バージョンが異なっていたりするので、以下のように修正します。


index.html

<script src="libs/jthree/2.1/jThree.min.js"></script>

 →<script src="script/jThree.min.js"></script>
<script src="libs/stats/1.2/jThree.Stats.js"></script>
 →<script src="plugin/jThree.Stats.js"></script>
<script src="libs/trackball/1.4/jThree.Trackball.js"></script>
 →<script src="plugin/jThree.Trackball.js"></script>


index.goml

<camera style="cameraFar: 100000; position: 6 13 20; lookAtY: 7;" />

 →<camera style="position: 6 13 20; lookAtY: 7;" />
<light type="Amb" style="lightColor: #222;" />
 →<light type="Amb" style="light-color: #222;" />

④ブラウザでhttp://localhost:8080/jThree2.0.7/にアクセスすると、jThreeエディタで表示されていたものと同様のサンプルを確認することができます(バージョンの差異で挙動の違いはありますが)

スクリーンショット 2014-12-09 23.47.12.png

※MMDモデル・モーションやテクスチャなどを利用した作品をローカルに持ってくる場合は、使用しているデータをローカルPC上に配置する必要があります。


jThreeエディタ以外のMMDモデルを表示する

最後に、せっかくローカルPC上に環境を作ったので、jThreeエディタに含まれていないMMDモデルを表示してみることにします。

なんと都合が良いことに、

前日のAdventCalendarのR-tenPさんがMMDモデルを配布されているので、それを表示してみます。

【MMD】虎視眈々【カメラ、モデル配布】

http://www.nicovideo.jp/watch/sm24835196

①入手したMMDモデルのファイルを、各ファイルをjThree.zip」を展開したディレクトリに配置します。

②以下のように、index.htmlにMMDプラグインを追加します。


index.html

<script src="plugin/jThree.MMD.js"></script>


③以下のように、index.gomlを変更し、MMDモデルを呼び出します(mmdタグのmodel属性は、配置したpmxファイルを指定して下さい)。


index.goml(削除部分)

  <mesh geo="#geo0" mtl="#mtl1" />

<mesh geo="#geo0" mtl="#mtl1" style="positionX: 7;" />
<mesh geo="#geo0" mtl="#mtl1" style="positionX: -7;" />

<mesh geo="#geo0" mtl="#mtl1" style="positionY: 7;" />
<mesh geo="#geo0" mtl="#mtl1" style="position: 7 7 0;" />
<mesh geo="#geo0" mtl="#mtl1" style="position: -7 7 0;" />

<obj style="positionY: 14;">
<mesh geo="#geo0" mtl="#mtl1" />
<mesh geo="#geo0" mtl="#mtl1" style="positionX: 7;" />
<mesh geo="#geo0" mtl="#mtl1" style="positionX: -7;" />
</obj>



index.goml(追記部分)

  <mmd id="" model="./V-Style/Corde_V-Style_v1.0/Corde_V-Style_1.0.pmx" style="position: 0 0 0;"></mmd>


④ブラウザを再読み込みすると以下のように、読み込んだモデルが表示されます。

スクリーンショット 2014-12-10 23.21.29.png

jThreeエディタの説明の記載とパスが異なる等の注意点はあるものの、

このようにローカルPC上に環境を作っておくと、

読み込ませるリソースの切り替えなどの作業もしやすくなるので、

みなさんも、このような環境を作ってみてjThreeで遊んでみてはいかがでしょうか。