35 lines
785 B
TypeScript
35 lines
785 B
TypeScript
import React from "react";
|
|
import { Stage, useGLTF } from "@react-three/drei";
|
|
import { Canvas } from "@react-three/fiber";
|
|
import { OrbitControls } from "@react-three/drei";
|
|
|
|
export const ModelViewer3D = ({
|
|
fileUrl,
|
|
height = "100%",
|
|
onLoad,
|
|
}: {
|
|
fileUrl: string;
|
|
height: string;
|
|
onLoad?: () => void;
|
|
}) => {
|
|
const { scene } = useGLTF(fileUrl);
|
|
|
|
// Вызываем onLoad когда модель загружена
|
|
React.useEffect(() => {
|
|
if (onLoad) {
|
|
onLoad();
|
|
}
|
|
}, [scene, onLoad]);
|
|
|
|
return (
|
|
<Canvas style={{ width: "100%", height: height }}>
|
|
<ambientLight />
|
|
<directionalLight />
|
|
<Stage environment="city" intensity={0.6}>
|
|
<primitive object={scene} />
|
|
</Stage>
|
|
<OrbitControls />
|
|
</Canvas>
|
|
);
|
|
};
|