Showroom project aims at car manufacturers. Through virtual reality, user has the ability to experience the car in very different way. Be able to customize the colors of the car, rims and accessories. Seeing their choices in real life size and environments that their car will be most at home.

---

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-core-group>
        <three-camera-perspective></three-camera-perspective>
        <three-camera-orbit></three-camera-orbit>
        <scene-vr-controller controller-id="1" controller-name="right" armed="false"></scene-vr-controller>
        <scene-vr-controller controller-id="0" controller-name="left" armed="false"></scene-vr-controller>
        <three-raycaster right-index="1" left-index="0"></three-raycaster>
      </three-core-group>

      <three-canvas-group>
        <three-canvas-altmenu
          dom-id="canvasbox" width="0.3" height="0.4"
          row-location="/vr/vr_assets/icons/altnav/location.png"
          row-hdr="/vr/vr_assets/icons/altnav/world.png"
          row-tools="/vr/vr_assets/icons/altnav/tools.png"
          icon-exit="/vr/vr_assets/icons/navigation/open-door.png"
          default hires>
        </three-canvas-altmenu>
      </three-canvas-group>

      <three-env-group>
        <three-gltf-marker path="/vr/vr_assets/shared/" name="indicator.glb" dynamic></three-gltf-marker>
        <three-gltf-floor
          path="/vr/vr_assets/project/car_kia/" 
          name="AutoTunnel_Floor.glb" 
          link="main" 
          thumbnail="/vr/vr_assets/icons/alphabet/a.png"
          offset="4,0,0"
          default>
        </three-gltf-floor>
      </three-env-group>

      <three-light-group>
        <three-light-hemi sky-color="#FFFFFF" ground-color="#FFFFFF" intensity="0.7"></three-light-hemi>
        <three-light-direct color="#FFFFFF" offset="0,4,0" intensity="0.8"></three-light-direct>
      </three-light-group>

      <three-mesh-group>
        <three-gltf path="/vr/vr_assets/project/car_kia/" name="AutoTunnel.glb"></three-gltf>
        <three-gltf path="/vr/vr_assets/project/car_kia/" name="AutoTunnel_Sky.glb"></three-gltf>
      </three-mesh-group>

      <three-mesh-group offset="0,-0.1,0">
        <three-gltf path="/vr/vr_assets/project/car_kia/" name="part_engine-clean.glb"></three-gltf>
        <three-gltf path="/vr/vr_assets/project/car_kia/" name="part_glass-lights.glb"></three-gltf>
        <three-gltf path="/vr/vr_assets/project/car_kia/" name="part_plastic-shields.glb"></three-gltf>
        <three-gltf path="/vr/vr_assets/project/car_kia/" name="part_tires-breaks.glb"></three-gltf>
        <three-gltf path="/vr/vr_assets/project/car_kia/" name="part_trims.glb"></three-gltf>

        <three-group-color objects="'body'" colors="'#9d9d9f','#F2320C','#264184','#334039','#ffffff','#080808','#66F21B'">
          <three-gltf path="/vr/vr_assets/project/car_kia/" name="Stinger7_OuterPaint.glb"></three-gltf>
          <three-canvas-color dom-id="canvasbox" width="0.92" height="0.19" hires></three-canvas-color>
        </three-group-color>

        <three-group-object>
          <three-canvas-thumbnail dom-id="canvasbox" width="1.05" height="0.3" hires></three-canvas-thumbnail>
          <three-gltf path="/vr/vr_assets/project/car_kia/rims/" name="Rims_KIA_Orig.glb" visible="true" thumbnail="/vr/vr_assets/project/car_kia/rims_thumb/thumb_kia_orig.jpg"></three-gltf>
          <three-gltf path="/vr/vr_assets/project/car_kia/rims/" name="Rims_ALT_AudiA7.glb" visible="false" thumbnail="/vr/vr_assets/project/car_kia/rims_thumb/thumb_kia_audi-A7.jpg"></three-gltf>
          <three-gltf path="/vr/vr_assets/project/car_kia/rims/" name="Rims_ALT_AudiTT.glb" visible="false" thumbnail="/vr/vr_assets/project/car_kia/rims_thumb/thumb_kia_audi-tt.jpg"></three-gltf>
          <three-gltf path="/vr/vr_assets/project/car_kia/rims/" name="Rims_ALT_DB11.glb" visible="false" thumbnail="/vr/vr_assets/project/car_kia/rims_thumb/thumb_kia_DB11.jpg"></three-gltf>
        </three-group-object>
      </three-mesh-group>

    </scene-vr>
  </scene-clock>