diff --git a/reactt/shirt/src/App.jsx b/reactt/shirt/src/App.jsx index e393343..6274f38 100644 --- a/reactt/shirt/src/App.jsx +++ b/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 ( + +
+ + {"Let's"} + + +
+ +
+ + {"do it"} + + +
+
+ ) +} + export default function App() { return ( + diff --git a/reactt/shirt/src/Model.jsx b/reactt/shirt/src/Model.jsx index daf9704..8bf0fe7 100644 --- a/reactt/shirt/src/Model.jsx +++ b/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 + + 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 } useGLTF.preload('/models/ShirtBaked2.glb')