2

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.

1
  • I found a solution to display an image on surfaces. However, the warning still interferes with me. Commented Oct 31, 2024 at 13:10

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.