I tried to add some png on 3d model using rtf(React Three Fiber). Here is my code
import React from 'react';
import { Decal, useGLTF, useTexture } from '@react-three/drei';
export function MaleMannequin({ tattooImage, ...props }) {
const { nodes, materials } = useGLTF('models/male_mannequin.glb');
const tattooTexture = tattooImage ? useTexture(tattooImage) : null;
return (
<group {...props} dispose={null} scale={[0.1, 0.1, 0.1]}>
<mesh geometry={nodes.FinalBaseMesh.geometry} material={materials['default']} rotation={[Math.PI / 2, 0, 0]}>
{/* Apply the tattoo texture as a Decal */}
<Decal
position={[0, -0.2, 0.5]} // Adjust as necessary
rotation={[0, 0, 0]} // Adjust as necessary
scale={0.75} // Adjust as necessary
map={tattooTexture}
polygonOffsetFactor={-1} // This can help with z-fighting issues
/>
</mesh>
</group>
);
}
useGLTF.preload('models/male_mannequin.glb');
It gives the following warning and doesn't render image on model.
Warning: Internal React error: Expected static flag was missing. Please notify the React team.
tattooImage comes from parent as props. Any one who can help me?
I made another model and used Decal of React Three fiber. It renders image. I'd like to add PNG or JPEG on a specific part of the model body.