Troika 3D Extruded Text

[robksawyer]

Is it possible to extrude Troika text? I'm currently working on it at https://codesandbox.io/s/troika-3d-text-via-react-three-fiber-95yw6?file=/src/index.js, but I haven't had any luck yet.

[robksawyer]

After messing around a bit, I realized that all I needed to do for a basic extrude is to duplicate it. I ended up using the following. Any other suggestions appreciated though.

{Array.from(Array(depth).keys()).map(i => (
          <text
            key={`text-${i}`}
            position-z={-180 - i}
            rotation={rotation}
            {...opts}
            text={text}
            font={opts.font}
            anchorX="center"
            anchorY="middle"
          >
            <meshPhongMaterial attach="material" color={opts.color[2]} />
          </text>
        ))}

[drcmda]

i dont think you can extrude it (?) what you want is three's generic textgeometry. troika is for fast, responsive sdf fonts.

[stephencorwin]

Duplicating seems like a heavy approach since it will create many components and have potentially a large perf impact.

I was scanning Troika briefly and it looks like they suggest using a "DepthMaterial". There is a companion packages called troika-three-utils to help with this.

Troika's createDerivedMaterial(baseMaterial, options) utility handles all that complexity, letting you "extend" a built-in Material's shaders via a declarative interface. The resulting material is prototype-chained to the base material so it picks up changes to its properties. It has methods for generating depth and distance materials so your shader modifications can be reflected in shadow maps.

This only fakes the depth though. Actually extruding might involve having to retrieve the geometry created.

[robksawyer]

@stephencorwin I totally agree, thanks for the research. I've been messing around for a bit and it's not exactly straight forward to implement using react-three-fiber. Any ideas?

I've taken a stab at it here:
https://codesandbox.io/s/troika-3d-text-via-react-three-fiber-54psf?file=/src/index.js

I've tried about five different ways and one recurring issue is the following.

TypeError
Cannot set property customDepthMaterial of #<Text> which has only a getter

Some research:

• TypeScript #11
• https://threejs.org/docs/#api/en/materials/MeshDepthMaterial

[drcmda]

i think you should move this discussion to troika directly. if cDM is a getter internally you can't set it from outside, it would need a patch on troikas side.