Gallery Image Tag

This group of components have been inspired by gallery idea. images hanging on the wall usually have a small tag in their close proximity to inform viewer about the author and name of said art piece. In VR this presents a challenge of readability for these small tags. And so the tags rather having them next to image. they will appear in front of left hand controller.
point your left hand controller in the direction of image panel and press trigger button. Small semitransparent pane will appear in from of it to provide you with information. Contents of these panels are provided in text from as JSON object through tag parameter of component linked to the image.
Image and tag are two separate components giving you the option to just have informative images in your scene without the additional information.


Left trigger – Image tag
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-gltf-ui-group>
        <three-mesh-image offset="-5,2,2" rotation="90,0,240" path="/vr/vr_assets/tech-demo/gallery/" name="test_image_2.jpg" ratio="3:2" size="5" visible></three-mesh-image>
        <three-canvas-tag dom-id="canvasbox" width="0.8" height="0.2" tag='{"headline":"Toronto Downtown","author":"Ondrej Blazek"}' hires></three-canvas-tag>
      </three-gltf-ui-group>
      ...
    </three-mesh-group>
  </scene-vr>
</scene-clock>