I would like to apply an image as a displacement map on a 3D model, but position and scale the displacement image so that it is applied to a specific part of the UV map.

I have achieved this in Blender using texture coordinates like so: blender displacement map. My understanding is that this position is based off the UV map, which you can see here. The highlighted orange section is where I need to apply the displacement.

The end result I am after is having users draw a design in html canvas, and apply that design to the model as an 'engraving'. See example of the app.

This is how my code looks at the moment

const ModelWrapper: React.FC<ModelProps> = ({
  shape,
  variant,
  material,
  engraving,
}) => {
  const group = useRef<THREE.Group>(null);
  const { nodes } = useGLTF(variant.modelUrl) as unknown as GLTFResult;

  const selectedMaterial = useMemo(() => {
    const displacementMap = new THREE.TextureLoader().load(engraving.imageUrl);
    displacementMap.flipY = false;
    return new THREE.MeshStandardMaterial({
      color: material.baseColor ?? '#ffffbb',
      roughness: Number(material.roughness) ?? 0.01,
      metalness: Number(material.metallic) ?? 1,
      displacementMap: displacementMap,
      displacementScale: -0.0002,
    });
  }, [material, engraving]);

  return (
    <group ref={group} dispose={null}>
      <mesh geometry={nodes[shape.name].geometry}>
        <meshStandardMaterial
          color={selectedMaterial.color}
          roughness={selectedMaterial.roughness}
          metalness={selectedMaterial.metalness}
          displacementMap={selectedMaterial.displacementMap}
          displacementScale={selectedMaterial.displacementScale}
        />
      </mesh>
    </group>
  );
};