Guidance on Blending Materials in Three.js React Fiber for a Stitching Effect

I’m currently working on a project that involves creating a decent upholstered cushion effect using Three.js with React Fiber.

For context, I initially considered using Verge3D for its ease in exporting desired Blender shaders. However, I decided to move away from Verge3D to develop a configurator that’s more integrated with React and can leverage libraries designed specifically for Three.js and React Fiber. This decision was driven by the need for a more customizable and scalable solution within the React ecosystem.

Here’s the setup:

  • The cushion’s material is meshPhysicalMaterial with fabric texture maps.
  • The stitching pattern also uses meshPhysicalMaterial, including texture maps for the stitches, with UV mapping for proper texture alignment.
  • I’ve encountered challenges in blending these materials to achieve the desired visual effect where the stitching integrates seamlessly with the fabric.

. I’m seeking advice on:

  • Enhancing the blend between materials for a seamless effect.
  • Best practices for using meshPhysicalMaterial in such scenarios, especially in a React Fiber context.

Any insights, suggestions, or experiences with similar challenges would be greatly appreciated.

Thank you for your time and help!

verge3d Result (verge3d is a threejs forked Project )

 const stProps = useMemo(() => {

    return {
      map: stColor,
      normalMap: stNormal,
      blending: THREE.NormalBlending,
      transparent: true,
      side: THREE.FrontSide,
      opacity: 0.9,
      alphaTest: 0.5,
      alphaMap: stNormal,
      normalMapType: THREE.NormalBlending,
      alphaToCoverage: true,

  }, [stColor, stNormal])

 scale={[1.0003, 1.0003, 1.0003]} // to avoid clipping in overlay
 <meshPhysicalMaterial {...stProps} />

my current results with three js


//current state demo