reactjstypescriptthree.jsreact-three-fiberreact-three-drei

Type '{}' is missing the following properties from type MeshTransmissionMaterial


I am trying to use the MeshTransmissionMaterial from react-three-drei library, but when using it I get this error:

Type '{}' is missing the following properties from type 'Pick<Omit<MeshTransmissionMaterialType, "args"> & { transmissionSampler?: boolean; backside?: boolean; backsideThickness?: number; resolution?: number; backsideResolution?: number; samples?: number; background?: Color | Texture; }, "attach" | ... 134 more ... | "backsideResolution">': distortionScale, temporalDistortionts(2739)

Here is my code, very simple:

    <mesh ref={ref}>
      <icosahedronGeometry args={[2, 200]} />
      <MeshTransmissionMaterial /> // error
    </mesh>

import:

import { MeshTransmissionMaterial } from '@react-three/drei';

I think I should be able to use this material without any props, but it seems like trying to use any prop on this object gives me the same error anyway (Type [myProp] is missing the following...) What could be wrong here?


Solution

  • <MeshTransmissionMaterial distortionScale={0} temporalDistortion={0} />
    

    Turns out MeshTransmissionMaterial requires these two props I added above.