This component group will give user the option to switch between predefined sets of objects. In web development the closest feature would be image carousel. User is able to browse through set of carefully crafted objects that live in the same space as all their alternatives. From that set only one is visible and thus active. Users are able to interact only with visible objects.
This group of components combines these objects with user interface. This way user is able to interact or customize the object to their liking. This example has two sets of rims from which user is able to select from.
Point your left hand in direction any of four rims in this scene and press trigger button. Menu with additional options will appear and you can make your selection by pointing your right hand controller and pressing trigger button to confirm your selection.

---

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-object offset="1,0.01,-6" rotation="0,-45,0">
        <three-canvas-thumbnail dom-id="canvasbox" width="0.55" height="0.3" hires></three-canvas-thumbnail>
        <three-gltf path="/vr/vr_assets/tech-demo/carousel/" name="Audi_v15_RimsOnly.glb" visible="true" thumbnail="/vr/vr_assets/tech-demo/carousel/rim_black_thumbnail.jpg"></three-gltf>
        <three-gltf path="/vr/vr_assets/tech-demo/carousel/" name="Audi_v15_RimsOnlyOrig.glb" visible="false" thumbnail="/vr/vr_assets/tech-demo/carousel/rim_original_thumbnail.jpg"></three-gltf>
      </three-group-object>
    </three-mesh-group>
    ...
  </scene-vr>
</scene-clock>