Model

shadcn-collections/model

FreeComponent

Integrate 3D model

Install it

npx shadcn@latest add https://chatcn.me/r/model.json

Source

components/chatcn/3d/model.tsxchatcn.me/r/model.json

1"use client";
2import { Canvas } from "@react-three/fiber";
3import {
4  Environment,
5  Float,
6  OrbitControls,
7  useGLTF,
8  useAnimations,
9  Html,
10} from "@react-three/drei";
11import React, { Suspense, ReactNode, useEffect } from "react";
12 
13export type EnvironmentPreset =
14  | "city"
15  | "night"
16  | "sunset"
17  | "forest"
18  | "warehouse"
19  | "studio"
20  | "apartment";
21export type LightingType = "soft" | "dramatic" | "studio";
22 
23export function Loader() {
24  return (
25    <Html center>
26      <div className="flex flex-col items-center gap-2">
27        <div className="w-8 h-8 border-2 border-gray-600 border-t-transparent rounded-full animate-spin" />
28        <p className="text-xs text-gray-600">Loading model…</p>
29      </div>
30    </Html>
31  );
32}
33 
34export interface ModelProps {
35  children: ReactNode;
36  width?: string;
37  height?: string;
38  fov?: number;
39  cameraPosition?: [number, number, number];
40  shadow?: boolean;
41}
42 
43export function ModelContent({
44  children,
45  width = "100%",
46  height = "100%",
47  fov = 45,
48  cameraPosition = [0, 0, 4],
49  shadow = false,
50}: ModelProps) {
51  return (
52    <div style={{ width, height }}>
53      <Canvas camera={{ fov, position: cameraPosition }} shadows={shadow}>
54        <Suspense fallback={<Loader />}>{children}</Suspense>
55      </Canvas>
56    </div>
57  );
58}
59 
60export function ModelScene({
61  bgColor = "#000000",
62  env = "city",
63}: {
64  bgColor?: string;
65  env?: EnvironmentPreset;
66}) {
67  return (
68    <>
69      <color attach="background" args={[bgColor]} />
70      <Environment preset={env} />
71    </>
72  );
73}
74 
75export function ModelCamera({ }: {
76  fov?: number;
77  position?: [number, number, number];
78}) {
79  return null;
80}
81 
82export function ModelLighting({
83  type = "soft",
84  shadow = false,
85}: {
86  type?: LightingType;
87  shadow?: boolean;
88}) {
89  if (type === "soft") return <ambientLight intensity={0.4} />;
90  if (type === "dramatic")
91    return <directionalLight position={[2, 2, 5]} intensity={1.2} />;
92  if (type === "studio")
93    return (
94      <>
95        <ambientLight intensity={0.5} />
96        <spotLight
97          position={[10, 10, 10]}
98          intensity={1.5}
99          castShadow={shadow}
100        />
101      </>
102    );
103  return null;
104}
105 
106export function Model({
107  src,
108  scale = 1,
109  position = [0, 0, 0],
110  rotation = [0, 0, 0],
111  float = false,
112}: {
113  src: string;
114  scale?: number;
115  position?: [number, number, number];
116  rotation?: [number, number, number];
117  float?: boolean;
118}) {
119  const { scene, animations } = useGLTF(src);
120// … truncated

What it pulls in

npm packages

@react-three/fiber
@react-three/drei
three

Files it writes

components/chatcn/3d/model.tsx

More from shadcn-collections

All 24 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Audio Visualizeraudio-visualizer	shadcn-collections	Components	Free	4 deps
Calendarcalendar	shadcn-collections	Components	Free	no deps
Chat Containerchat-container	shadcn-collections	Components	Free	no deps
Code Editorcode-editor	shadcn-collections	Components	Free	no deps
Code Blockcodeblock	shadcn-collections	Components	Free	1 dep
Command Blockcommand-block	shadcn-collections	Components	Free	no deps
Command Tabscommand-tabs	shadcn-collections	Components	Free	no deps
Emailemail	shadcn-collections	Components	Free	no deps