Group of components to give user the ability to change the color of the object by simple interaction with menu and even color definition within the components code. 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 color 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 color, 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 color options. Using your right hand controller, you can interact with the menu and by pressing right hand trigger button, you will confirm your choice.

---

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-color objects="'Suzanne','Doors'" colors="'#77B4E0','#E08482','#6CE0D3','#E0A855','#60E089'">
        <three-gltf path="/vr/vr_assets/tech-demo/object-color/" name="monkey_shading.glb" offset="0,0,-5"></three-gltf>
        <three-canvas-color dom-id="canvasbox" width="0.67" height="0.19" hires></three-canvas-color>
      </three-group-color>
    </three-mesh-group>
  </scene-vr>
</scene-clock>