WEBサイトに3DCGモデルビューアーを設置できるthree.js用ライブラリ

three.jsで３Dモデルを出力できるWEB３Dビューアーを作成しました。
Blender他３DCGソフトで作成したモデルデータをWEBページ上で表示することができます。Google CardBoardのような形式のスマホ型のVRヘッドセットで自作モデルを眺めることができます。

なんで作ったか？

世の中sketchfabとかニコニ立体とかいろいろあるけどなんかどれも使いづらいと思って、WEB3Dの勉強も兼ねて作り始めた。
主なモチベーションとしては下記です。
１）自分のサイトに３Dビューアーをおいて作った3Dモデルギャラリーをつくって展示したかった
２）VR空間で作った自作モデルを眺めたかった

主な機能：

・collada（.dae）のデータの表示

カメラコントロール
再生ボタンを押すと、マウス操作（PC）、ジェスチャー操作（スマホ）が可能。押すとON/OFF切り替え。
ブラウザでページスクロールなどとかぶって閲覧操作をじゃましないための機能。
回転・・・左ドラッグ（PC）/スライド（スマホ）
拡大・・・中ホイール（PC)/ピンチイン（スマホ）
移動・・・右ドラッグ（PC）/三つ指スライド（スマホ）

スマホVR対応
スマホの３軸センサーを利用したスマホVR、Google Cardboardでなら見られる。押すとON/OFF切り替え。

全画面表示
ただしWEBVRはまだ未対応なんでOculusで見れない。押すとON/OFF切り替え。

ターンテーブル
モデルを自動回転する。押すとON/OFF切り替え。

three.jsのバージョン７７

ダウンロード

3Dmodelviewer

1 ファイル 86.11 KB

ダウンロード

使い方

3Dモデルのエクスポート

blenderでcollada形式で出力する
blenderのエクスポートで透過マテリアルについては下記の追記が必要です。

collada形式での透過の処理について

transparencyタグの上にtransparentタグで透過マテリアル情報を追記します。
下記ソースの「emi_lace-sampler」という名前は、daeファイル内でのマテリアル情報で、daeエクスポーターで自動につけられるエイリアス名です。透過処理をしたいマテリアル名を出力されたdaeファイル内から探し出す必要があります。ちょっとこれが面倒です。透過PNG、透過マテリアルを使わない場合は気にしなくて大丈夫です。

以下エクスポートしたdaeファイル内のソース。xml形式になってます。

//透過PNGの場合
<transparent> //追記する
<texture texture="emi_lace-sampler" texcoord="UVTex"/> //追記する
</transparent> //追記する
<transparency>
<float sid="transparency">1</float>
</transparency>

//透過マテリアルの場合
<transparent> //追記する
<color>1 1 1 0.8</color> //追記する
</transparent> //追記する
<transparency>
<float sid="transparency">0.8</float>
</transparency>

ビューアーの設置方法

ライブラリ用のCSS（vrViewer.css）をheadタグ内に記載します。

Body内に記述します。canvas-frameというIDのdivに3Dモデルを表示します。canvas-frameというIDは変更しても構いません。

今後の展望

今後気が向いたら更新していきます。。。
・obj形式、json形式、mmd形式の対応
・アニメーションへの対応
・VRヘッドセット（WEBVR API）対応
・いずれAIを搭載して勝手に動いたりして遊べるように。。。
・その他余裕があればいろいろ

おまけ：daeをダウンロードされないように

.htaccessに下記を記載して、daeのフォルダにアップします。
#画像の直リンクを禁止する
SetEnvIf REFERER “^http://hoge\.com” OK
Order Deny,Allow
Deny from all
Allow from env=OK