DopeVR

Animations

Animations are part of GLTF file format. You can export them as part of your object and then access them by their names. You have option of triggering animation as loop repeat or only once. There animation modifiers that can be mixed into your existing animation by the amount of your choosing.
In this case the group of components gives the user ability to reach into the file and link them to UI element which user then can interact. In this case the UI servers as a switchboard for those animations and character will smoothly transition from one animation to another.
To make selection. Point your left hand in direction of the character. Press trigger button on your left controller and menu with numeric icons will appear. Point your right hand controller in the direction of the menu and you will see a dot. Rolling over those options, they will switch to their hover state and by pressing your right hand trigger you will confirm your selection.

Left trigger – Options menu
Left trigger + Right trigger – Interact with menu
Left squeeze – Options / Exit menu
Right trigger – Next location
Right trigger + squeeze – Confirm new location

Code sample

--- Header ---

<link rel="stylesheet" href="/vr/vr_css/styles.css">
<script type="module" src="/vr/vr_build/dopevr-core.esm.js"></script>
<script nomodule src="/vr/vr_build/dopevr-core.js"></script>

--- Body ---

<scene-dom id="main-vr-dom"></scene-dom>
<scene-clock clock-name="rand1" app-fps="100">
  <scene-vr dom-id="renderbox">
    ...
    <three-mesh-group>
      ...
      <three-group-animation offset="0,0,-3" rotation="0,180,0" dom-id="imageBox">
        <three-gltf-animated path="/vr/vr_assets/tech-demo/animations/" name="person.glb"></three-gltf-animated>
        <three-canvas-thumbnail dom-id="canvasbox" width="1.3" height="0.3" hires></three-canvas-thumbnail>

        <three-proxy type="cube" size="0.4,1.8,0.2"></three-proxy>
        <three-option link="agree" thumbnail="/vr/vr_assets/icons/numbers/1.png"></three-option>
        <three-option link="headShake" thumbnail="/vr/vr_assets/icons/numbers/2.png"></three-option>
        <three-option link="idle" thumbnail="/vr/vr_assets/icons/numbers/3.png"></three-option>
        <three-option link="run" thumbnail="/vr/vr_assets/icons/numbers/4.png"></three-option>
        <three-option link="walk" thumbnail="/vr/vr_assets/icons/numbers/5.png"></three-option>
      </three-group-animation>
      ...
    </three-mesh-group>
  </scene-vr>
</scene-clock>