Object Texture Change

Group of components to give user the ability to change the texture of the object by simple interaction with menu and texture definition within the groups code. Images are provided through additional option component. However this approach requires further preparation of asset.
In this tech example you can see that the object retains shadows in less lit areas. That is accomplished through additional layer called Ambient Occlusion or AO for short. This layer holds shadow information in form of texture that is then applied again after texture of the object has been changed. This layer is also in definition of GLTF format and can be easily integrated with 3D software of your choice.
To change the texture, point your left hand controller in direction of the object. In this case, head of monkey. Press trigger button and you will be presented with texture thumbnail options. Using your right hand controller, you can interact with the menu and by pressing right hand trigger button, you will confirm your choice.


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-texture object="Suzanne" dom-id="imageBox">
        <three-option texture="/vr/vr_assets/tech-demo/object-texture/Monkey_texture_1.png" thumbnail="/vr/vr_assets/tech-demo/object-texture/Monkey_texture_1_thumb.jpg"></three-option>
        <three-option texture="/vr/vr_assets/tech-demo/object-texture/Monkey_texture_2.png" thumbnail="/vr/vr_assets/tech-demo/object-texture/Monkey_texture_2_thumb.jpg"></three-option>
        <three-option texture="/vr/vr_assets/tech-demo/object-texture/Monkey_texture_3.png" thumbnail="/vr/vr_assets/tech-demo/object-texture/Monkey_texture_3_thumb.jpg"></three-option>
        <three-option texture="/vr/vr_assets/tech-demo/object-texture/Monkey_texture_4.png" thumbnail="/vr/vr_assets/tech-demo/object-texture/Monkey_texture_4_thumb.jpg"></three-option>
        <three-option texture="/vr/vr_assets/tech-demo/object-texture/Monkey_texture_5.png" thumbnail="/vr/vr_assets/tech-demo/object-texture/Monkey_texture_5_thumb.jpg"></three-option>

        <three-gltf path="/vr/vr_assets/tech-demo/object-texture/" name="monkey_shading_v2.glb" offset="0,0,-5"></three-gltf>
        <three-canvas-texture dom-id="canvasbox" width="1.3" height="0.3" hires></three-canvas-texture>
      </three-group-texture>

    </three-mesh-group>
  </scene-vr>
</scene-clock>