How to render text on top of material from list of materials?

Hi, I tried to render the key text on top of each stenography keyboard key with React Three Fiber. I was not able to do so yet without losing the outline of the key in a different material and colour. Here is the source code I have developed thus far: https://github.com/CosmicDNA/touchscreen-stenography-keyboard.

But the problem is converting from THREE object to a pair of nodes <meshLambertMaterial /> while keeping the same functionality has not been straight forward. This issue can be spotted at https://github.com/CosmicDNA/touchscreen-stenography-keyboard/blob/fcda31313b1b9295eda3f444a92295b22f95bcef/src/components/Key.js#L57

Where:

  const material1 = new THREE.MeshLambertMaterial({ color: THREE.Color.NAMES.antiquewhite, wireframe: false })
  const material2 = new THREE.MeshLambertMaterial({ color: THREE.Color.NAMES.gray, wireframe: false })
  const materials = [material1, material2]

And the mesh is rendered with:

  <mesh
    // eslint-disable-next-line react/no-unknown-property
    material={materials}
    // eslint-disable-next-line react/no-unknown-property
    position={[0, -lateral, 0]}
    onPointerDown={onPointerDown}
    onPointerUp={onPointerUp}
  >
    {/* eslint-disable-next-line react/no-unknown-property */}
    <extrudeGeometry args={[shape, extrudeSettings]}/>
  </mesh>

The strategy I would like to use to render the text on each key is taken from one of the examples at React Three Fiber website examples https://codesandbox.io/s/0z8i2c where the material is textured with <RenderTexture />:

      <meshStandardMaterial>
        <RenderTexture attach="map" anisotropy={16}>
          <Text font={suspend(inter).default} ref={textRef} fontSize={4} color="#555">
            hello
          </Text>
        </RenderTexture>
      </meshStandardMaterial>

Any ideas on how to achieve this without losing the gray outline?

pmndrs / react-three-fiber

How to render text on top of material from list of materials? #3183