import React, { useRef, useState, Suspense } from "react"; import { Canvas, useFrame } from "@react-three/fiber"; import { OrbitControls, Html, useGLTF } from "@react-three/drei"; // NOTE: This is a single-file React component ready to drop into a React + Vite/Next project. // Tailwind CSS is used for styling (no imports here). // Dependencies (install): // react, react-dom, @react-three/fiber, @react-three/drei, three, tailwindcss // Optional UI libs: shadcn/ui (used conceptually), but this file uses basic HTML + Tailwind. // --- Mock product data --- const PRODUCTS = [ { id: 1, title: "Aurora Jacket", price: 89, color: "#1f2937", size: ["S", "M", "L", "XL"], }, { id: 2, title: "Nimbus Hoodie", price: 59, color: "#111827", size: ["S", "M", "L"], }, { id: 3, title: "Breeze Tee", price: 25, color: "#ef4444", size: ["S", "M", "L", "XL"], }, ]; // --- Simple rotating 3D product using primitives --- function RotatingCloth({ color = "#888", product = {} }) { const ref = useRef(); useFrame((state, delta) => (ref.current.rotation.y += delta * 0.6)); return ( {/* torso-like shape */} {/* sleeves */} {/* neckline highlight */} ); } // --- 3D Viewer wrapper --- function ProductViewer({ product }) { return (

Loading 3D...}>

); } // --- Simple cart logic --- function useCart() { const [items, setItems] = useState([]); function add(product, size = "M") { setItems((prev) => { const found = prev.find((p) => p.id === product.id && p.size === size); if (found) { return prev.map((p) => (p === found ? { ...p, qty: p.qty + 1 } : p)); } return [...prev, { ...product, size, qty: 1 }]; }); } function remove(index) { setItems((prev) => prev.filter((_, i) => i !== index)); } function total() { return items.reduce((s, i) => s + i.price * i.qty, 0); } return { items, add, remove, total }; } export default function ClothShopApp() { const [selected, setSelected] = useState(PRODUCTS[0]); const { items, add, remove, total } = useCart(); const [openCart, setOpenCart] = useState(false); return (

3D

Aether Cloth

Modern 3D clothing store

{/* Left: 3D viewer + details */}

{selected.title} ${selected.price}

A modern staple designed for comfort and style. This demo uses simple 3D primitives to represent garments — swap for GLTF models for production.

Size {selected.size.map((s) => ( {s} ))}

Available

{PRODUCTS.map((p) => ( ))}

{/* Feature band */}

Fast shipping

Sustainable fabrics

30-day returns

{/* Right: Product grid */}

Explore

{PRODUCTS.map((p) => (

{/* small embedded canvas for each thumbnail */}

{p.title}

${p.price}

))}

{/* Cart drawer */} {openCart && (

Cart

{items.length === 0 &&

Your cart is empty

} {items.map((it, idx) => (

{it.title} x{it.qty}

Size: {it.size}

${it.price * it.qty}

))}

Total

${total()}

)}

Built with ❤️ — replace the primitives with GLTF/FBX garments for production

); }