// npm install three @react-three/fiber @react-three/drei react-gesture-responder



import React, { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, PerspectiveCamera, useGLTF } from "@react-three/drei";
import { GestureResponderView } from "react-gesture-responder";

type ModelViewerProps = {
  url: string;
};

const Model: React.FC<ModelViewerProps> = ({ url }) => {
  const { nodes, materials } = useGLTF(url);

  return (
    <group>
      <mesh geometry={nodes.Mesh_0.geometry} material={materials.Material_0} />
    </group>
  );
};

const ModelViewer: React.FC<ModelViewerProps> = ({ url }) => {
  return (
    <GestureResponderView style={{ width: "100%", height: "100%" }}>
      <Canvas>
        <PerspectiveCamera makeDefault position={[0, 0, 5]} />
        <Suspense fallback={null}>
          <Model url={url} />
        </Suspense>
        <OrbitControls />
      </Canvas>
    </GestureResponderView>
  );
};

export default ModelViewer;




//--- KKKKUUURRRWWWAAAA NEXT -----




// pages/index.tsx
import React from "react";
import ModelViewer from "../components/ModelViewer";

const IndexPage: React.FC = () => {
  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <ModelViewer url="/path/to/your/model.glb" />
    </div>
  );
};

export default IndexPage;