- install vite -npm create vite@latest -- --template react clien
- install packages
- npm install three @react-three/fiber @react-three/drei maath valtio react-color framer-motion
- setup tailwind
4)folder structure :src -components -pages -Home.jsx - main page
-customizer.jsx - the entirety of the app funcitonalities be contained in the two pages :canvas
5)now lets create homepage import motion, AnimatePresence from 'framer-motion' import useSnapshot from valtio - grate react state library import {headContainerAnimation,etc} from '../config/motion
//how valtio works -create new folder store - index.js import { proxy } from "valtio"; const state = proxy({ //think it as a react context whatever here can be utilize in whole application intro: true, color: "#EFBD48", isLogoTexture: true, isFullTexture: false, logoDecal: "./threejs.png", fullDecal: "./threejs.png",
//this all are empty default values }); export default state;
import this states in Home file. HOW TO USE IT?
const Home = () => { const snap = useSnapshot(state); //one current snapshot of that state return(
6)we wrap everthing in : this is component by framer motion tha's going to allow us to enable the animation of the component that have been removed from the tree.
IN WHICH WE can write if we are on home page - {snap.intro && (render home page data -> <motion.div> -> regular div but with some animations )}
code -
{snap.intro && (
<motion.section className="home" {...slideAnimation("left")}>
<motion.header>
</motion.header>
</motion.section>
)}
7)now we need button which takes us customization page from homepage. for that we can create component and we can export it from index.js file to homepage
-we pass some props to button <CustomButton type="filled" title="Customize it" handleClick={() => (state.intro = false)} //updating state in valtio (no react rule breaking here) customStyles="w-fit px-4 py-2.5 font-bold text=sm" />
//we have two types of buttons
8)lets create customizer
-WE FIRST WRAP everything in -AND inside that we check are we on a home page or customizer for that we have to acces state.
const Customizer = () => { const snap = useSnapshot(state) return {!snap.intro && ( rest of the code we show )} };
9)canvas
import { Canvas } from "@react-three/fiber"; import { Environment, Center } from "@react-three/drei";
now we have to use couple of three.js components inside canvas 1)backdrop - is back yellowish colour 2)CameraRig- for camera 3)Shirt.jsx-actual model
we runr afce in all this components for now and import all of them in index.js inside canvas folder
10)now lets start building canvas first step is to wrap it inside
<Canvas>
<ambientLight intensity={0.5} />//threejs
<Environment preset="city" />//threejs
<CameraRig>
<Backdrop />
<Center>
<Shirt />
</Center>
</CameraRig>
</Canvas>
11)now lets turn shirt into real 3d model
//3d model const {nodes, materials} = useGLTF={'/shirt_baked.glb'}