Here's a simple React component that utilizes TypeScript, Next.js, and Three.js to display a 3D model in GLB format. This component allows users to rotate and zoom in and out of the model:

Install the necessary dependencies:
bash
Copy code
npm install three @types/three next-three-fiber
Create a new file called ModelViewer.tsx in your Next.js components folder and paste the following code:
typescript
Copy code
import React, { useRef } from 'react';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { Canvas, useFrame, useLoader, useThree, extend } from '@react-three/fiber';

extend({ OrbitControls });

type OrbitControlsProps = JSX.IntrinsicElements['orbitControls'] & {
  children: React.ReactNode;
};

const Controls = (props: OrbitControlsProps) => {
  const { gl, camera } = useThree();
  const controlsRef = useRef<OrbitControls>();
  useFrame(() => controlsRef.current?.update());
  return <orbitControls ref={controlsRef} args={[camera, gl.domElement]} {...props} />;
};

type ModelProps = {
  url: string;
};

const Model: React.FC<ModelProps> = ({ url }) => {
  const gltf = useLoader(GLTFLoader, url);
  return <primitive object={gltf.scene} dispose={null} />;
};

type ModelViewerProps = {
  modelUrl: string;
};

const ModelViewer: React.FC<ModelViewerProps> = ({ modelUrl }) => {
  return (
    <Canvas style={{ width: '100%', height: '100%' }}>
      <ambientLight intensity={0.5} />
      <directionalLight position={[0, 10, 5]} intensity={1} />
      <Model url={modelUrl} />
      <Controls />
    </Canvas>
  );
};

export default ModelViewer;
Import and use the ModelViewer component in your Next.js page:
typescript
Copy code
import React from 'react';
import ModelViewer from '../components/ModelViewer';

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

export default HomePage;
Make sure to replace "/path/to/your/model.glb" with the actual path to your 3D model in GLB format. This component will render the 3D model and allow users to rotate and zoom in and out of the model using mouse controls.