43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
|
import { useLoader } from "@react-three/fiber";
|
||
|
|
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
|
||
|
|
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
|
||
|
|
|
||
|
|
interface MultiGLTFInstancesProps {
|
||
|
|
index: number;
|
||
|
|
modelUrl: string;
|
||
|
|
position: [number, number, number];
|
||
|
|
rotation: [number, number, number];
|
||
|
|
visibility?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const MultiGLTFInstances: React.FC<MultiGLTFInstancesProps> = ({
|
||
|
|
index,
|
||
|
|
modelUrl,
|
||
|
|
position,
|
||
|
|
rotation,
|
||
|
|
visibility
|
||
|
|
}) => {
|
||
|
|
const originalGltf = useLoader(GLTFLoader, modelUrl, (loader) => {
|
||
|
|
const draco = new DRACOLoader();
|
||
|
|
draco.setDecoderPath(
|
||
|
|
"https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/libs/draco/"
|
||
|
|
);
|
||
|
|
loader.setDRACOLoader(draco);
|
||
|
|
});
|
||
|
|
const cloned = originalGltf.scene.clone();
|
||
|
|
cloned.name = `rigged_arm_${index}`; // Set the name of the cloned object
|
||
|
|
console.log(index);
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<primitive
|
||
|
|
key={index}
|
||
|
|
object={cloned}
|
||
|
|
position={position}
|
||
|
|
scale={[1, 1, 1]}
|
||
|
|
rotation={rotation}
|
||
|
|
visible={visibility}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|