57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
import React, { Suspense } from "react";
|
|
|
|
import { Canvas, CanvasProps } from "@react-three/fiber";
|
|
import { Html } from "@react-three/drei";
|
|
import { OrbitControls } from "./OrbitControls";
|
|
import { NoToneMapping } from "three";
|
|
import { Model } from "./Model";
|
|
import { CircularProgress } from "@mui/material";
|
|
|
|
interface ModelViewerProps {
|
|
pathToModel: string;
|
|
autoRotate?: boolean;
|
|
}
|
|
|
|
const ModelViewer = ({ pathToModel, autoRotate = true }: ModelViewerProps) => {
|
|
const glConfig: NonNullable<CanvasProps["gl"]> = {
|
|
toneMapping: NoToneMapping,
|
|
powerPreference: "high-performance",
|
|
};
|
|
|
|
return (
|
|
<Canvas
|
|
gl={glConfig}
|
|
shadows={true}
|
|
performance={{ min: 0.3 }}
|
|
dpr={[0.3, 1]}
|
|
camera={{ position: [0, 0, 10], fov: 45, zoom: 0.7, near: 1, far: 500 }}
|
|
style={{
|
|
backgroundColor: "#000",
|
|
borderTopRightRadius: "8px",
|
|
borderTopLeftRadius: "8px",
|
|
}}
|
|
>
|
|
<ambientLight intensity={0.6} />
|
|
<directionalLight intensity={1} />
|
|
|
|
<Suspense fallback={<CanvasLoader />}>
|
|
<Model url={pathToModel} />
|
|
</Suspense>
|
|
|
|
<OrbitControls
|
|
autoRotate={autoRotate}
|
|
autoRotateSpeed={1.0}
|
|
zoomSpeed={0.5}
|
|
/>
|
|
</Canvas>
|
|
);
|
|
};
|
|
|
|
const CanvasLoader = () => (
|
|
<Html>
|
|
<CircularProgress color="inherit" />
|
|
</Html>
|
|
);
|
|
|
|
export default ModelViewer;
|