import { Suspense, useState } from "react"; import { Canvas } from "@react-three/fiber"; import { OrbitControls, AsciiRenderer, useGLTF, Environment, } from "@react-three/drei"; import { Button } from "@/components/ui/button"; import { Label } from "@/components/ui/label"; import { Slider } from "@/components/ui/slider"; import { Checkbox } from "@/components/ui/checkbox"; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; interface ModelProps { scale: number; rotation: [number, number, number]; modelUrl: string; position: [number, number, number]; } function Model({ scale, rotation, modelUrl, position, }: ModelProps) { const { scene } = useGLTF(modelUrl); return ( ); } const models = [ { name: "Logo", url: "https://danielcodepen.s3.us-east-1.amazonaws.com/figma.fbx.glb", baseScale: 0.8, position: [0, -0.2, 0] as [number, number, number], }, { name: "Computer", url: "https://danielcodepen.s3.us-east-1.amazonaws.com/apple_macintosh.glb", baseScale: 0.05, position: [0, -0.3, 0] as [number, number, number], }, { name: "Plant", url: "https://danielcodepen.s3.us-east-1.amazonaws.com/pothos_house_plant.glb", baseScale: 5, position: [0, -0.75, 0] as [number, number, number], }, { name: "Shiba", url: "https://danielcodepen.s3.us-east-1.amazonaws.com/shiba.glb", baseScale: 1, position: [0, 0, 0] as [number, number, number], }, { name: "Crystal", url: "https://danielcodepen.s3.us-east-1.amazonaws.com/crystal_stone_rock.glb", baseScale: 2, position: [0, 0, 0] as [number, number, number], }, ]; export default function App() { const [selectedModel, setSelectedModel] = useState( models[0].url, ); const [userScale, setUserScale] = useState(1); const [creditsOpen, setCreditsOpen] = useState(false); const [asciiSettings, setAsciiSettings] = useState({ resolution: 0.22, characters: " .:-=+*#%@", fgColor: "#ffffff", bgColor: "#007BE5", invert: false, }); const resetSettings = () => { setAsciiSettings({ resolution: 0.22, characters: " .:-=+*#%@", fgColor: "#ffffff", bgColor: "#007BE5", invert: false, }); setUserScale(1); }; const handleModelChange = (newModelUrl: string) => { // Clear GLTF cache for the previous model to prevent loading issues if (selectedModel && selectedModel !== newModelUrl) { useGLTF.clear(selectedModel); } setSelectedModel(newModelUrl); }; // Get the current model's base scale const currentModel = models.find( (model) => model.url === selectedModel, ); const finalScale = (currentModel?.baseScale || 1) * userScale; return (

{/* Custom CSS for white slider */} {/* 3D Canvas - Full Screen */}

{/* Left Panel - Model Selection */}

{models.map((model) => ( ))}

{/* Right Panel - Controls - Vertically Centered */}

{/* Presets */}

Presets

{[ { name: ".:-=+*#%@", chars: " .:-=+*#%@" }, { name: ".-+*#", chars: " .-+*#" }, ].map((preset) => ( ))}

{/* Resolution */}

Resolution setAsciiSettings((prev) => ({ ...prev, resolution: value, })) } min={0.05} max={0.5} step={0.01} className="w-full slider-white" />

{asciiSettings.resolution.toFixed(3)}

{/* Scale Control */}

Scale setUserScale(value)} min={0.1} max={3} step={0.1} className="w-full slider-white" />

{userScale.toFixed(2)}

{/* Invert Toggle */}

setAsciiSettings((prev) => ({ ...prev, invert: checked as boolean, })) } className="border-white/30" /> Invert colors

{/* Reset Button */} {/* Credits as underlined text - closer to Reset */}

); }

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Explore

Build