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

Questions
,
1

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 )
image

image
image1291×956 117 KB

 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])

 <mesh  
 key={index}
 geometry={obj.geometry}
 position={obj.position}
 rotation={obj.rotation}
 scale={[1.0003, 1.0003, 1.0003]} // to avoid clipping in overlay
 >
 <meshPhysicalMaterial {...stProps} />
 </mesh>

my current results with three js

image
image787×618 40.9 KB

image

//current state demo
https://codesandbox.io/p/github/felipev3d/fiber/main?workspaceId=911c31da-889f-4f45-8470-70ad1bae8688