Translations: English
FPS/TPS視点の切り替え
[email protected]から、2D用UIにカスタム要素が追加可能になりました。
この機能を使ったFPS(一人称視点), TPS(三人称視点)の切り替えを実装します。
カスタム要素の追加
VerseThree.startのoptionsパラメータに新しく追加されたgui2dSlotsを使って、
2D用UIにボタンを追加します。
const res = await VerseThree.start(
adapter,
scene,
...
{
presetAvatars: PRESET_AVATARS,
// HTML文字列としてカスタム要素を渡す
gui2dSlots: document.querySelector("#gui2d-slots").innerHTML,
...
},
);
<body>
...
<template id="gui2d-slots">
<button slot="after" class="custom-button" id="toggle-fps">...</button>
</template>
</body>
FPS/TPS切り替えボタンの実装
VerseThree.startから結果を受け取ったときには既にカスタム要素が生成されているので、
ボタンの挙動を設定します。
const res = await VerseThree.start(
...
);
setupToggleFPS(adapter, res.player);
function setupToggleFPS(adapter, player) {
let isFirstPerson = true;
const f = () => {
if (isFirstPerson) {
player.avatar.setFirstPersonMode([adapter.getCamera()]);
// ピュアなthree.jsとA-FRAMEではカメラの位置調整に使うことができるオブジェクトが異なるので、adapter.getHead()で取得する
adapter.getHead().position.set(0, player.avatar.getHeadHeight(), 0);
adapter.getHead().parent.rotation.set(0, 0, 0);
} else {
player.avatar.setThirdPersonMode([adapter.getCamera()]);
adapter
.getHead()
.position.set(0.0, player.avatar.getHeadHeight() + 0.2, 2.0);
adapter.getHead().parent.rotation.set(-0.2, 0, 0);
}
};
// アバターが変更されたタイミングにも同様の処理を追加
adapter.addAvatarChangedListener((avatar) => {
if (!adapter.getRenderer().xr.isPresenting) {
f();
}
});
document.querySelector("#toggle-fps").addEventListener(
"click",
() => {
isFirstPerson = !isFirstPerson;
f();
},
false,
);
}