[V0_FILE]typescriptreact:file="next-blocks.tsx" type="code-project" project="Next.js Conf 2024" "use client" import { Canvas, useThree } from "@react-three/fiber" import { OrbitControls, Environment } from "@react-three/drei" import { useRef, useState, useEffect } from "react" import * as THREE from "three" const isMobile = () => { if (typeof window === 'undefined') return false return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) } const BoxWithEdges = ({ position }) => { return ( ) } const BoxLetter = ({ letter, position }) => { const group = useRef() const getLetterShape = (letter) => { const shapes = { N: [ [1,0,0,0,1], [1,1,0,0,1], [1,0,1,0,1], [1,0,0,1,1], [1,0,0,0,1], ], E: [ [1,1,1], [1,0,0], [1,1,0], [1,0,0], [1,1,1], ], X: [ [1,0,0,0,1], [0,1,0,1,0], [0,0,1,0,0], [0,1,0,1,0], [1,0,0,0,1], ], T: [ [1,1,1], [0,1,0], [0,1,0], [0,1,0], [0,1,0], ], } return shapes[letter] || shapes['N'] // Default to 'N' if letter is not found } const letterShape = getLetterShape(letter) return ( {letterShape.map((row, i) => row.map((cell, j) => { if (cell) { let xOffset = j * 0.5 - (letter === 'T' ? 1 : letter === 'E' ? 0.5 : letter === 'X' || letter === 'N' ? 1 : 0.75) if (letter === 'N') { if (j === 0) { xOffset = -0.5; } else if (j === 1) { xOffset = 0; } else if (j === 2) { xOffset = 0.25; } else if (j === 3) { xOffset = 0.5; } else if (j === 4) { xOffset = 1; } } if (letter === 'X') { if (j === 0) { xOffset = -1; } else if (j === 1) { xOffset = -0.75; } else if (j === 2) { xOffset = -0.25; } else if (j === 3) { xOffset = 0.25; } else if (j === 4) { xOffset = 0.5; } } return ( ) } return null }) )} ) } const Scene = () => { const orbitControlsRef = useRef() const [isMobileDevice, setIsMobileDevice] = useState(false) useEffect(() => { setIsMobileDevice(isMobile()) }, []) return ( <> ) } export default function Component() { return (

) }