@verseengine/verse-three-ui

v1.0.2

Published

3 years ago

VerseEngine's GUI

Downloads

0High
0Medium
0Low

verseengine

vr 3d metaverse

verse-three-ui

VerseEngine's GUI.

Example

npm run example

Installation

npm

npm install @verseengine/three-move-controller @verseengine/three-touch-controller @verseengine/three-xr-controller @verseengine/verse-three-ui

CDN (ES Mobules)

<script
      async
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/es-module-shims.min.js"
    ></script>
<script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
      "@verseengine/three-touch-controller": "https://cdn.jsdelivr.net/npm/@verseengine/three-touch-controller/dist/esm/index.js",
      "@verseengine/three-move-controller": "https://cdn.jsdelivr.net/npm/@verseengine/three-move-controller/dist/esm/index.js",
      "@verseengine/three-xr-controller": "https://cdn.jsdelivr.net/npm/@verseengine/three-xr-controller/dist/esm/index.js",
      "verse-three-ui": "https://cdn.jsdelivr.net/npm/@verseengine/verse-three-ui/dist/esm/index.js"
    }
  }
</script>

Usage

import { register as registerUI } from "verse-three-ui";
import {
  register as registerUI,
  Gui2DElement,
  Gui3D,
  Gui3DVisibleSwitcher,
} from "verse-three-ui";

registerUI();

function setup() {
  const gui2d = document.querySelector("gui-2d") as Gui2DElement;
  gui2d.setAttribute("bgm-type", isIOS() ? "toggle" : "slider");
  gui2d.setGuiHandlers(guiHandlers);
  guiHandlers.addModifiedListener(() => gui2d.updateStates());
  
  const gui3d = new Gui3D({
    isMirrorDisabled: false,
    isMicDisabled: false,
    isBgmDisabled: false,
    isVoiceDisabled: false,
  });
  container.add(gui3d.object3D);
  gui3d.setGuiHandlers(guiHandlers);
  guiHandlers.addModifiedListener(() => gui3d.updateStates());
  clickableObjects.push(...gui3d.clickableObjects);
  gui3DSwitcher = new Gui3DVisibleSwitcher(renderer.xr, gui3d.object3D, camera);


  const clock = new THREE.Clock();
  renderer.setAnimationLoop(() => {
   ...
 
    const dt = clock.getDelta();
    gui3DSwitcher?.tick(dt);
  });
}

if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", setup);
} else {
  setup();
}

<body>
  <gui-2d />
</body>

Custom Buttons

<style>
  .custom-button > span {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
  }
</style>
<gui-2d>
  <button slot="before" class="custom-button" onclick="alert('A')">
    <span>A</span>
  </button>
  <button slot="before" class="custom-button" onclick="alert('B')">
    <span>B</span>
  </button>
  <button slot="after" class="custom-button" onclick="alert('a')">
    <span>a</span>
  </button>
  <button slot="after" class="custom-button" onclick="alert('b')">
    <span>b</span>
  </button>
</gui-2d>

Reference

API Reference

Link

gui-2d

Configuration UI for non-VR.

gui-2d Parameters

| parameter | type | description | | --------- | ------- | ------------------------------------------------ | | avatar-disabled | boolean | Hide Avatar button | | preset-avatar-only | boolean | Only avatars in a preset list can be selected. | | bgm-type | toggle or slider | For cross origin's source, there is no way to adjust the volume in iOS Safari. (GainNode is not available in Mac Safari but can be changed with Audio.volume) | | bgm-disabled | boolean | Hide BGM button | | mic-disabled | boolean | Hide Mic button | | voice-disabled | boolean | Hide Voice button | | mirror-disabled | boolean | Hide Mirror button | | lang | 'en'(default) or 'ja' or 'zh' | Language | | css-src | string | path to Custom CSS |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme