"use client"; import { Canvas } from "@react-three/fiber"; import { Environment, Float, OrbitControls, Loader, useGLTF, useAnimations, } from "@react-three/drei"; import React, { Suspense, ReactNode, useEffect } from "react"; export type EnvironmentPreset = | "city" | "night" | "sunset" | "forest" | "warehouse" | "studio" | "apartment"; export type LightingType = "soft" | "dramatic" | "studio"; export interface ModelProps { children: ReactNode; width?: string; height?: string; fov?: number; cameraPosition?: [number, number, number]; shadow?: boolean; } export function ModelContent({ children, width = "100%", height = "100%", fov = 45, cameraPosition = [0, 0, 4], shadow = false, }: ModelProps) { return (

); } export function ModelScene({ bgColor = "#000000", env = "city", }: { bgColor?: string; env?: EnvironmentPreset; }) { return ( <> ); } export function ModelCamera({}: { fov?: number; position?: [number, number, number]; }) { return null; } export function ModelLighting({ type = "soft", shadow = false, }: { type?: LightingType; shadow?: boolean; }) { if (type === "soft") return ; if (type === "dramatic") return ; if (type === "studio") return ( <> ); return null; } export function Model({ src, scale = 1, position = [0, 0, 0], rotation = [0, 0, 0], float = false, }: { src: string; scale?: number; position?: [number, number, number]; rotation?: [number, number, number]; float?: boolean; }) { const { scene, animations } = useGLTF(src); const { actions } = useAnimations(animations, scene); useEffect(() => { Object.values(actions).forEach((action) => action?.play()); }, [actions]); const content = ( ); return float ? {content} : content; } export function ModelControls({ autoRotate = false, rotationSpeed = 1, zoom = false, reverse = false, ...props }: { autoRotate?: boolean; rotationSpeed?: number; zoom?: boolean; reverse?: boolean; [key: string]: unknown; }) { return ( ); }

Model embed

Examples

Installation