{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "model", "type": "registry:component", "title": "Model", "description": "Integrate 3D model", "dependencies": [ "@react-three/fiber", "@react-three/drei", "three" ], "registryDependencies": [], "files": [ { "path": "components/chatcn/3d/model.tsx", "content": "\"use client\";\nimport { Canvas } from \"@react-three/fiber\";\nimport {\n Environment,\n Float,\n OrbitControls,\n useGLTF,\n useAnimations,\n Html,\n} from \"@react-three/drei\";\nimport React, { Suspense, ReactNode, useEffect } from \"react\";\n\nexport type EnvironmentPreset =\n | \"city\"\n | \"night\"\n | \"sunset\"\n | \"forest\"\n | \"warehouse\"\n | \"studio\"\n | \"apartment\";\nexport type LightingType = \"soft\" | \"dramatic\" | \"studio\";\n\nexport function Loader() {\n return (\n \n
\n
\n

Loading model…

\n
\n \n );\n}\n\nexport interface ModelProps {\n children: ReactNode;\n width?: string;\n height?: string;\n fov?: number;\n cameraPosition?: [number, number, number];\n shadow?: boolean;\n}\n\nexport function ModelContent({\n children,\n width = \"100%\",\n height = \"100%\",\n fov = 45,\n cameraPosition = [0, 0, 4],\n shadow = false,\n}: ModelProps) {\n return (\n
\n \n }>{children}\n \n
\n );\n}\n\nexport function ModelScene({\n bgColor = \"#000000\",\n env = \"city\",\n}: {\n bgColor?: string;\n env?: EnvironmentPreset;\n}) {\n return (\n <>\n \n \n \n );\n}\n\nexport function ModelCamera({ }: {\n fov?: number;\n position?: [number, number, number];\n}) {\n return null;\n}\n\nexport function ModelLighting({\n type = \"soft\",\n shadow = false,\n}: {\n type?: LightingType;\n shadow?: boolean;\n}) {\n if (type === \"soft\") return ;\n if (type === \"dramatic\")\n return ;\n if (type === \"studio\")\n return (\n <>\n \n \n \n );\n return null;\n}\n\nexport function Model({\n src,\n scale = 1,\n position = [0, 0, 0],\n rotation = [0, 0, 0],\n float = false,\n}: {\n src: string;\n scale?: number;\n position?: [number, number, number];\n rotation?: [number, number, number];\n float?: boolean;\n}) {\n const { scene, animations } = useGLTF(src);\n const { actions } = useAnimations(animations, scene);\n useEffect(() => {\n Object.values(actions).forEach((action) => action?.play());\n }, [actions]);\n\n const content = (\n \n );\n\n return float ? {content} : content;\n}\n\nexport function ModelControls({\n autoRotate = false,\n rotationSpeed = 1,\n zoom = false,\n reverse = false,\n ...props\n}: {\n autoRotate?: boolean;\n rotationSpeed?: number;\n zoom?: boolean;\n reverse?: boolean;\n [key: string]: unknown;\n}) {\n return (\n \n );\n}\n", "type": "registry:component" } ] }