feat: added 3d text in r3f

reactt/shirt/src/App.jsx

@@ -1,13 +1,52 @@
 import { Suspense } from 'react';
 import { Canvas } from "@react-three/fiber";
-import { OrbitControls } from '@react-three/drei'
+import { Center, OrbitControls, Text3D } from '@react-three/drei'
 import { Model } from "./Model";
 
+function MiddleText() {
+    return (
+        <group position={[0, -0.45, 0.6]}>
+            <Center position={[0, 1, 1]}>
+                <Text3D
+                    font="https://threejs.org/examples/fonts/helvetiker_bold.typeface.json"
+                    size={0.30}
+                    height={0.03}
+                    curveSegments={10}
+                    bevelEnabled
+                    bevelThickness={0.005}
+                    bevelSize={0.003}
+                    bevelSegments={4}
+                >
+                    {"Let's"}
+                    <meshStandardMaterial color={0xffd700} roughness={0.35} metalness={0.15} />
+                </Text3D>
+            </Center>
+
+            <Center position={[0, 0.6, 1]}>
+                <Text3D
+                    font="https://threejs.org/examples/fonts/helvetiker_bold.typeface.json"
+                    size={0.30}
+                    height={0.03}
+                    curveSegments={10}
+                    bevelEnabled
+                    bevelThickness={0.005}
+                    bevelSize={0.003}
+                    bevelSegments={4}
+                >
+                    {"do it"}
+                    <meshStandardMaterial color={0xffffff} roughness={0.35} metalness={0.15} />
+                </Text3D>
+            </Center>
+        </group>
+    )
+}
+
 export default function App() {
     return (
         <Canvas camera={{ position: [0, 0, 5], fov: 45 }}>
             <Suspense fallback={null}>
                 <Model />
+                <MiddleText />
             </Suspense>
             <ambientLight intensity={0.8} />
             <directionalLight position={[3, 4, 5]} intensity={1.2} />

reactt/shirt/src/Model.jsx

@@ -1,8 +1,24 @@
 import { useGLTF } from '@react-three/drei'
+import { useMemo } from 'react'
+import * as THREE from 'three'
 
 export function Model() {
     const { scene } = useGLTF('/models/ShirtBaked2.glb')
-    return <primitive object={scene} scale={5} position={[0, -1, 0]} />
+
+    const yellowShirtScene = useMemo(() => {
+        const clonedScene = scene.clone(true)
+
+        clonedScene.traverse((child) => {
+            if (child.isMesh && child.material) {
+                child.material = child.material.clone()
+                child.material.color = new THREE.Color(0xffd700)
+            }
+        })
+
+        return clonedScene
+    }, [scene])
+
+    return <primitive object={yellowShirtScene} scale={5} position={[0, -1, 0]} />
 }
 
 useGLTF.preload('/models/ShirtBaked2.glb')