Me gustaría aplicar una imagen como mapa de desplazamiento en un modelo 3D, pero colocar y escalar la imagen de desplazamiento para que se aplique a una parte específica del mapa UV.

He logrado esto en Blender usando coordenadas de textura así: mapa de desplazamiento de blender. Tengo entendido que esta posición se basa en el mapa UV, que puede ver aquí. La sección naranja resaltada es donde necesito aplicar el desplazamiento.

El resultado final que busco es que los usuarios dibujen un diseño en un lienzo html y apliquen ese diseño al modelo como un "grabado". Ver ejemplo de la aplicación.

Así es como se ve mi código en este momento

 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> ); };