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])
<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
//current state demo
https://codesandbox.io/p/github/felipev3d/fiber/main?workspaceId=911c31da-889f-4f45-8470-70ad1bae8688