EditableMeshTransmissionMaterial.tsx

import { MeshTransmissionMaterial } from "@react-three/drei";
import { types } from "@theatre/core";
import { useCurrentSheet } from "@theatre/r3f";
import { useEffect, useRef, useState } from "react";

const EditableMeshTransmissionMaterial: typeof MeshTransmissionMaterial & {
  theatreKey: string;
} = ({ theatreKey, ...props }) => {
  const ref = useRef<JSX.IntrinsicElements["meshTransmissionMaterial"]>(null!);
  const sheet = useCurrentSheet();
  const [values, setValues] = useState({});
  useEffect(() => {
    const object = sheet?.object(theatreKey, {
      roughness: types.number(props.roughness ?? 0, { range: [0, 10] }),
      thickness: types.number(props.thickness ?? 0, { range: [0, 10] }),
      transmission: types.number(props.transmission ?? 0, { range: [0, 10] }),
      chromaticAberration: types.number(props.chromaticAberration ?? 0, {
        range: [0, 10],
      }),
      metalness: types.number(props.metalness ?? 0, { range: [0, 10] }),
      clearcoat: types.number(props.clearcoat ?? 0, { range: [0, 10] }),
      distortion: types.number(props.distortion ?? 0, { range: [0, 10] }),
      distortionScale: types.number(props.distortionScale ?? 0, {
        range: [0, 10],
      }),
      temporalDistortion: types.number(props.temporalDistortion ?? 0, {
        range: [0, 10],
      }),
    });
    console.log(ref.current, props);
    object?.onValuesChange((values) => {
      for (const [key, value] of Object.entries(values)) {
        ref.current[key] = value; // THIS IS NOT WORKING
      }
      // setValues(values); THIS IS WORKING
      ref.current.needsUpdate = true;
    });
    return () => sheet?.detachObject(theatreKey);
  }, [sheet, theatreKey]);
  return <MeshTransmissionMaterial ref={ref} {/*...values*/} />;
};

export default EditableMeshTransmissionMaterial;