カスタマイズ用の情報
・主要な構成ファイル
-
master.html
マスター用ページ
ここでプレイヤーに送るOfferを生成
プレイヤーのAnswerを登録して接続を確立する。
-
player.html
プレイヤー用ページ
マスター用ページとの接続を確立後、部屋ページを読みこむ
-
roomconf.js
部屋の設定ファイル
部屋に表示する地形やギミックはここで定義する。
-
scene.html
部屋ページ
実際のカスタマイズはroomconf.js側にあり
ここは./roomconfという名前でインポートしているだけ。
-
client.js
アバターチャットのクライアント側処理の実装本体
-
p2p-client.js
WebRTCの通信処理
プレイヤー用ページ側ではマスターとの接続用と
他のプレイヤーとの接続用に2つのインスタンスを生成している。
-
resources.js
デフォルトアバターとアニメーションファイルの設定
-
gimickcodes.js
マスター用ページのギミック呼び出しのショートカット定義
・所作を追加する手順
-
1.assets/animations以下にmixamo形式のfbxアニメーションファイルを追加する。
-
2.resources.jsのANIMATION_MAPにアニメーションの定義追加。
-
3.dic_ANIMATION_NAMEに表示される名前追加
-
4.ループしない場合はdic_nonloop_animationに追加
・環境背景を追加する場合
-
1.hdri画像を用意する
-
2.assets/texture以下に1を配置
-
3.roomconf.jsのresolve_gimmickにあるhdri_系のギミックを追加する。
コードはこんな感じ
window.hide_sky();
window.show_hdri("asset/texture/追加したhdriファイル名");
-
4.gimickcodes.jsに3で追加したギミックを追加する。
・BGMを追加したい場合
-
1.mp3形式の音源ファイルを用意する。
-
2.assets/bgm以下に1のファイルを配置する。
-
3.roomconf.jsのinit_light_settingsの最後に読み込みコードを追加する
こんな感じ
prepare_bgm("__bgm_4","asset/bgm/追加したファイル名")
第一引数は再生時に使う名前
-
4.roomconf.jsのresolve_gimmickにあるbgm_系のギミックを追加する。
こんな感じ
}else if(code=="bgm_4_start"){
play_bgm("__bgm_4");
}else if(code=="bgm_4_end"){
stop_bgm("__bgm_4");
・部屋ページを追加する手順
-
1.roomconf.jsをコピーして部屋ページ用のroomconfを作る。
-
2.記述を変更してその部屋の地形やギミックを定義する。
-
3.scene.htmlをコピーして部屋ページ用のhtmlを作る。
-
4.html側の./roomconfのインポート元を1で作った実際の設定ファイルに変える。
-
5.チャット入力でgoto:コマンドで3のhtmlを指定するとその部屋に移動するボタンを表示する。
・主要なプレイヤー側グローバル変数
roomconf側で使うものを説明
iframeの内側なので開発ツールからだと参照できないので注意
-
the_renderer
three.jsのレンダラー
-
the_scene
three.jsで表示しているシーンのルートオブジェクト
three.jsの3Dオブジェクトを追加する場合は
the_scene.add(オブジェクト);
のようにして追加する。
-
myplayer
自分の3Dオブジェクトのルート
-
dic_player
他のプレイヤーの辞書
キーは接続ID
-
p2p_client
他のプレイヤーとの接続オブジェクト
-
sig_p2p_client
マスターとの接続オブジェクト