Translations: Japanese
FPS/TPS viewpoint switching
Starting with [email protected], custom elements can be added to the UI for 2D.
This feature can be used to switch between FPS (first person viewpoint) and TPS (third person viewpoint).
Adding custom elements
Using the newly added gui2dSlots in the options parameter of VerseThree.start,
Add buttons to the UI for 2D.
const res = await VerseThree.start(
adapter,
scene,
...
{
presetAvatars: PRESET_AVATARS,
// Passing custom elements as HTML strings
gui2dSlots: document.querySelector("#gui2d-slots").innerHTML,
...
},
);
<body>
...
<template id="gui2d-slots">
<button slot="after" class="custom-button" id="toggle-fps">...</button>
</template>
</body>
Implementation of FPS/TPS switching button
When you receive the results from VerseThree.start, the custom element is already generated,
Set the behavior of the button.
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()]);
// The objects that can be used to adjust the camera position are different in pure three.js and A-FRAME, so use adapter.getHead() to get them
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);
}
};
// Add the same process for when avatars are changed.
adapter.addAvatarChangedListener((avatar) => {
if (!adapter.getRenderer().xr.isPresenting) {
f();
}
});
document.querySelector("#toggle-fps").addEventListener(
"click",
() => {
isFirstPerson = !isFirstPerson;
f();
},
false,
);
}