50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T48b3,'use client'; /* eslint-disable react/no-unknown-property */ import { Suspense, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, type CSSProperties, type ReactNode, type Ref, type RefObject } from 'react'; import { Canvas, useFrame, useLoader, useThree } from '@react-three/fiber'; import { ContactShadows, Environment, useFBX, useGLTF } from '@react-three/drei'; import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'; import * as THREE from 'three'; export type ModelViewerEnvironment = | 'apartment' | 'city' | 'dawn' | 'forest' | 'lobby' | 'night' | 'park' | 'studio' | 'sunset' | 'warehouse' | 'none'; export type ModelViewerIntro = 'rise' | 'spin' | 'fade' | 'none'; export interface ModelViewerHandle { capture: (type?: string) => string | null; } export interface ModelViewerProps { url: string; width?: number | string; height?: number | string; environment?: ModelViewerEnvironment; environmentIntensity?: number; exposure?: number; autoRotate?: boolean; autoRotateSpeed?: number; autoRotateDelay?: number; dragRotate?: boolean; turntable?: boolean; zoom?: boolean; minZoom?: number; maxZoom?: number; hoverTilt?: number; float?: number; shadow?: boolean; shadowOpacity?: number; intro?: ModelViewerIntro; startAngle?: number; tilt?: number; offsetX?: number; offsetY?: number; fit?: number; resetOnDoubleClick?: boolean; className?: string; style?: CSSProperties; onModelLoaded?: () => void; ref?: Ref; } type Settings = { autoRotate: boolean; autoRotateSpeed: number; autoRotateDelay: number; dragRotate: boolean; turntable: boolean; zoom: boolean; minZoom: number; maxZoom: number; hoverTilt: number; float: number; shadow: boolean; shadowOpacity: number; intro: ModelViewerIntro; startAngle: number; tilt: number; offsetX: number; offsetY: number; fit: number; resetOnDoubleClick: boolean; reducedMotion: boolean; }; type Bounds = { scale: number; center: THREE.Vector3; radius: number; floor: number }; type Motion = { yaw: number; pitch: number; yawVelocity: number; pitchVelocity: number; zoom: number; zoomGoal: number; tiltX: number; tiltY: number; tiltGoalX: number; tiltGoalY: number; spinSpeed: number; idle: number; dragging: boolean; intro: number; clock: number; reset: { yaw: number; pitch: number } | null; }; type ModelProps = { url: string; children: (object: THREE.Object3D) => ReactNode }; const FOV = 30; const INTRO_SECONDS = 1.3; const DRAG_SPEED = 0.0065; const PITCH_LIMIT = (65 * Math.PI) / 180; const toRadians = (degrees: number) => (degrees * Math.PI) / 180; const measured = new WeakMap(); const announced = new WeakSet(); const measure = (object: THREE.Object3D): Bounds => { const cached = measured.get(object); if (cached) return cached; const box = new THREE.Box3().setFromObject(object); const extent = box.getSize(new THREE.Vector3()); const center = box.getCenter(new THREE.Vector3()); const scale = 2 / Math.max(extent.x, extent.y, extent.z, 0.0001); const bounds = { scale, center, radius: (extent.length() / 2) * scale, floor: (extent.y / 2) * scale }; measured.set(object, bounds); return bounds; }; const GltfModel = ({ url, children }: ModelProps) => { const { scene } = useGLTF(url, true, true); const object = useMemo(() => scene.clone(true), [scene]); return children(object); }; const FbxModel = ({ url, children }: ModelProps) => { const fbx = useFBX(url); const object = useMemo(() => fbx.clone(true), [fbx]); return children(object); }; const ObjModel = ({ url, children }: ModelProps) => { const obj = useLoader(OBJLoader, url); const object = useMemo(() => obj.clone(true), [obj]); return children(object); }; const Model = ({ url, children }: ModelProps) => { const extension = (url.split('?')[0].split('.').pop() ?? '').toLowerCase(); if (extension === 'fbx') return {children}; if (extension === 'obj') return {children}; return {children}; }; const Exposure = ({ value }: { value: number }) => { const gl = useThree(state => state.gl); const invalidate = useThree(state => state.invalidate); useEffect(() => { gl.toneMapping = THREE.NeutralToneMapping; gl.toneMappingExposure = value; invalidate(); }, [gl, value, invalidate]); return null; }; const Refresh = () => { const invalidate = useThree(state => state.invalidate); useEffect(() => { invalidate(); }); return null; }; const Lighting = ({ environment, intensity }: { environment: ModelViewerEnvironment; intensity: number }) => { const previous = useRef(environment); useEffect(() => { previous.current = environment; }); const fallback = previous.current !== environment && previous.current !== 'none' ? ( ) : null; return ( {environment !== 'none' && } ); }; const Stage = ({ object, settingsRef, visibleRef, onReady }: { object: THREE.Object3D; settingsRef: RefObject; visibleRef: RefObject; onReady?: () => void; }) => { const { camera, gl, size, invalidate } = useThree(); const placeRef = useRef(null); const floatRef = useRef(null); const tiltRef = useRef(null); const spinRef = useRef(null); const fitRef = useRef(null); const bounds = useMemo(() => measure(object), [object]); const motionRef = useRef(null); if (!motionRef.current) { const s = settingsRef.current; motionRef.current = { yaw: toRadians(s.startAngle), pitch: toRadians(s.tilt), yawVelocity: 0, pitchVelocity: 0, zoom: 1, zoomGoal: 1, tiltX: 0, tiltY: 0, tiltGoalX: 0, tiltGoalY: 0, spinSpeed: 0, idle: 0, dragging: false, intro: s.intro === 'none' ? 1 : 0, clock: 0, reset: null }; } const motion = motionRef.current; useEffect(() => { if (announced.has(object)) return; announced.add(object); onReady?.(); }, [object, onReady]); useEffect(() => { const element = gl.domElement; const pointers = new Map(); let pinchStart = 0; let zoomStart = 1; const wake = () => invalidate(); const onDown = (event: PointerEvent) => { const s = settingsRef.current; pointers.set(event.pointerId, { x: event.clientX, y: event.clientY, t: event.timeStamp }); if (pointers.size === 2 && s.zoom) { const [a, b] = [...pointers.values()]; pinchStart = Math.hypot(a.x - b.x, a.y - b.y); zoomStart = motion.zoomGoal; motion.dragging = false; } else if (pointers.size === 1 && s.dragRotate && (event.pointerType !== 'mouse' || event.button === 0)) { motion.dragging = true; motion.yawVelocity = 0; motion.pitchVelocity = 0; element.setPointerCapture?.(event.pointerId); element.style.cursor = 'grabbing'; } motion.idle = 0; wake(); }; const onMove = (event: PointerEvent) => { const s = settingsRef.current; const rect = element.getBoundingClientRect(); if (event.pointerType === 'mouse' || event.pointerType === 'pen') { const nx = ((event.clientX - rect.left) / rect.width) * 2 - 1; const ny = ((event.clientY - rect.top) / rect.height) * 2 - 1; motion.tiltGoalX = ny * s.hoverTilt * 0.6; motion.tiltGoalY = nx * s.hoverTilt; } const last = pointers.get(event.pointerId); if (last) { const dx = event.clientX - last.x; const dy = event.clientY - last.y; const elapsed = Math.max((event.timeStamp - last.t) / 1000, 1 / 240); last.x = event.clientX; last.y = event.clientY; last.t = event.timeStamp; if (pointers.size === 2 && s.zoom && pinchStart > 0) { const [a, b] = [...pointers.values()]; const distance = Math.hypot(a.x - b.x, a.y - b.y); motion.zoomGoal = THREE.MathUtils.clamp((zoomStart * distance) / pinchStart, s.minZoom, s.maxZoom); } else if (motion.dragging) { const m = motion; m.yaw += dx * DRAG_SPEED; m.yawVelocity = m.yawVelocity * 0.4 + ((dx * DRAG_SPEED) / elapsed) * 0.6; if (!s.turntable) { m.pitch = THREE.MathUtils.clamp(m.pitch + dy * DRAG_SPEED, -PITCH_LIMIT, PITCH_LIMIT); m.pitchVelocity = m.pitchVelocity * 0.4 + ((dy * DRAG_SPEED) / elapsed) * 0.6; } m.idle = 0; } } wake(); }; const onUp = (event: PointerEvent) => { const last = pointers.get(event.pointerId); if (last && event.timeStamp - last.t > 80) { motion.yawVelocity = 0; motion.pitchVelocity = 0; } pointers.delete(event.pointerId); if (pointers.size < 2) pinchStart = 0; if (pointers.size === 0) { motion.dragging = false; element.style.cursor = ''; } wake(); }; const onLeave = () => { motion.tiltGoalX = 0; motion.tiltGoalY = 0; wake(); }; const onWheel = (event: WheelEvent) => { const s = settingsRef.current; if (!s.zoom || !(event.ctrlKey || event.metaKey)) return; event.preventDefault(); const m = motion; m.zoomGoal = THREE.MathUtils.clamp(m.zoomGoal * Math.exp(-event.deltaY * 0.01), s.minZoom, s.maxZoom); m.idle = 0; wake(); }; const onDoubleClick = () => { const s = settingsRef.current; if (!s.resetOnDoubleClick) return; const m = motion; const turns = Math.round((m.yaw - toRadians(s.startAngle)) / (Math.PI * 2)); m.reset = { yaw: toRadians(s.startAngle) + turns * Math.PI * 2, pitch: toRadians(s.tilt) }; m.zoomGoal = 1; m.yawVelocity = 0; m.pitchVelocity = 0; m.idle = 0; wake(); }; element.addEventListener('pointerdown', onDown); element.addEventListener('pointermove', onMove); element.addEventListener('pointerup', onUp); element.addEventListener('pointercancel', onUp); element.addEventListener('pointerleave', onLeave); element.addEventListener('wheel', onWheel, { passive: false }); element.addEventListener('dblclick', onDoubleClick); return () => { element.removeEventListener('pointerdown', onDown); element.removeEventListener('pointermove', onMove); element.removeEventListener('pointerup', onUp); element.removeEventListener('pointercancel', onUp); element.removeEventListener('pointerleave', onLeave); element.removeEventListener('wheel', onWheel); element.removeEventListener('dblclick', onDoubleClick); }; }, [gl, invalidate, settingsRef, motion]); useFrame((_, delta) => { const place = placeRef.current; const floatGroup = floatRef.current; const tiltGroup = tiltRef.current; const spinGroup = spinRef.current; if (!place || !floatGroup || !tiltGroup || !spinGroup) return; const s = settingsRef.current; const m = motion; const dt = Math.min(delta, 0.05); m.clock += dt; m.idle += dt; const reduce = s.reducedMotion; if (m.intro < 1) m.intro = reduce ? 1 : Math.min(1, m.intro + dt / INTRO_SECONDS); const eased = 1 - Math.pow(1 - m.intro, 3); if (m.reset) { m.yaw += (m.reset.yaw - m.yaw) * (1 - Math.exp(-dt * 7)); m.pitch += (m.reset.pitch - m.pitch) * (1 - Math.exp(-dt * 7)); if (Math.abs(m.reset.yaw - m.yaw) < 0.001 && Math.abs(m.reset.pitch - m.pitch) < 0.001) m.reset = null; } else if (!m.dragging) { const decay = Math.exp(-dt * 4.5); m.yaw += m.yawVelocity * dt; m.pitch = THREE.MathUtils.clamp(m.pitch + m.pitchVelocity * dt, -PITCH_LIMIT, PITCH_LIMIT); m.yawVelocity *= decay; m.pitchVelocity *= decay; if (s.turntable) m.pitch += (toRadians(s.tilt) - m.pitch) * (1 - Math.exp(-dt * 4)); } const spinning = s.autoRotate && !reduce && !m.dragging && m.idle > s.autoRotateDelay; m.spinSpeed += ((spinning ? s.autoRotateSpeed : 0) - m.spinSpeed) * (1 - Math.exp(-dt * 2)); m.yaw += m.spinSpeed * dt; m.zoom += (m.zoomGoal - m.zoom) * (1 - Math.exp(-dt * 8)); m.tiltX += (m.tiltGoalX - m.tiltX) * (1 - Math.exp(-dt * 6)); m.tiltY += (m.tiltGoalY - m.tiltY) * (1 - Math.exp(-dt * 6)); const aspect = size.width / Math.max(size.height, 1); const halfView = Math.tan(toRadians(FOV) / 2); const fitDistance = bounds.radius / (Math.max(s.fit, 0.05) * halfView * Math.min(1, aspect)); const distance = fitDistance / m.zoom; camera.position.set(0, 0, distance); camera.near = distance / 50; camera.far = distance * 50; camera.lookAt(0, 0, 0); camera.updateProjectionMatrix(); const halfHeight = fitDistance * halfView; place.position.set(s.offsetX * halfHeight * aspect, s.offsetY * halfHeight, 0); const intro = s.intro; const rise = intro === 'rise' ? (1 - eased) * -0.45 : 0; const grow = intro === 'rise' ? 0.9 + 0.1 * eased : 1; const twist = intro === 'spin' ? (1 - eased) * -Math.PI * 1.2 : intro === 'rise' ? (1 - eased) * -0.5 : 0; const bob = reduce ? 0 : Math.sin(m.clock * 1.3) * s.float * 0.06; floatGroup.position.y = rise + bob; floatGroup.scale.setScalar(grow); tiltGroup.rotation.set(m.tiltX, m.tiltY, 0); spinGroup.rotation.set(m.pitch, m.yaw + twist, 0, 'YXZ'); const settling = m.intro < 1 || m.dragging || !!m.reset || Math.abs(m.yawVelocity) + Math.abs(m.pitchVelocity) > 0.0005 || Math.abs(m.zoomGoal - m.zoom) > 0.0005 || Math.abs(m.tiltGoalX - m.tiltX) + Math.abs(m.tiltGoalY - m.tiltY) > 0.0005 || m.spinSpeed > 0.0005 || (s.autoRotate && !reduce) || (s.float > 0 && !reduce); if (settling && visibleRef.current) invalidate(); }); return ( {settingsRef.current.shadow && ( )} ); }; const ModelViewer = ({ url, width = 400, height = 400, environment = 'studio', environmentIntensity = 1, exposure = 1, autoRotate = true, autoRotateSpeed = 0.4, autoRotateDelay = 2, dragRotate = true, turntable = false, zoom = true, minZoom = 0.7, maxZoom = 2, hoverTilt = 0.15, float = 0.3, shadow = true, shadowOpacity = 0.45, intro = 'rise', startAngle = -30, tilt = 10, offsetX = 0, offsetY = 0, fit = 0.8, resetOnDoubleClick = true, className = '', style, onModelLoaded, ref }: ModelViewerProps) => { const glRef = useRef(null); const invalidateRef = useRef<(() => void) | null>(null); const containerRef = useRef(null); const visibleRef = useRef(true); const [ready, setReady] = useState(false); const settings: Settings = { autoRotate, autoRotateSpeed, autoRotateDelay: Math.max(0, autoRotateDelay), dragRotate, turntable, zoom, minZoom: Math.min(minZoom, maxZoom), maxZoom: Math.max(minZoom, maxZoom), hoverTilt: Math.max(0, hoverTilt), float: Math.max(0, float), shadow, shadowOpacity, intro, startAngle, tilt, offsetX, offsetY, fit, resetOnDoubleClick, reducedMotion: typeof window !== 'undefined' && !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches }; const settingsRef = useRef(settings); settingsRef.current = settings; useImperativeHandle( ref, () => ({ capture: (type = 'image/png') => glRef.current?.domElement.toDataURL(type) ?? null }), [] ); useEffect(() => { setReady(false); }, [url]); useEffect(() => { const container = containerRef.current; if (!container) return undefined; const observer = new IntersectionObserver(entries => { visibleRef.current = entries.some(entry => entry.isIntersecting); if (visibleRef.current) invalidateRef.current?.(); }); observer.observe(container); return () => observer.disconnect(); }, []); const handleReady = useCallback(() => { setReady(true); onModelLoaded?.(); }, [onModelLoaded]); return (

); }; export default ModelViewer; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@react-three/fiber@^9.3.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40react-three%2Ffiber","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@react-three/fiber@^9.3.0"}]]}]}],["$","li","@react-three/drei@^10.7.4",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40react-three%2Fdrei","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@react-three/drei@^10.7.4"}]]}]}],["$","li","three@^0.180.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/three","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"three@^0.180.0"}]]}]}]]}],["$","$L50",null,{"namespace":"@react-bits","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ModelViewer/ModelViewer.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]