31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
import React, { ForwardedRef, forwardRef, useMemo } from 'react';
|
|
import { Mesh, MeshPhysicalMaterial, Object3D, PerspectiveCamera } from 'three';
|
|
import { useGLTF } from '@react-three/drei';
|
|
import * as SkeletonUtils from 'three/examples/jsm/utils/SkeletonUtils';
|
|
import { useThree } from '@react-three/fiber';
|
|
import { fitCameraToObject } from './fitCameraToObject';
|
|
import { BufferGeometry } from 'three/src/core/BufferGeometry';
|
|
|
|
export const Model = forwardRef(({ url }: { url: string }, ref: ForwardedRef<Object3D>) => {
|
|
const { camera } = useThree();
|
|
const { scene } = useGLTF(url);
|
|
|
|
const model = useMemo(() => {
|
|
const model = (SkeletonUtils as any).clone(scene);
|
|
model.traverse((el: Mesh<BufferGeometry, MeshPhysicalMaterial>) => {
|
|
if (el.type === 'Mesh') {
|
|
el.material.reflectivity = 0.0;
|
|
el.material.fog = false;
|
|
el.material.color.setHex(0xffffff);
|
|
}
|
|
});
|
|
|
|
fitCameraToObject(camera as PerspectiveCamera, scene);
|
|
scene.updateWorldMatrix(true, true);
|
|
|
|
return model;
|
|
}, [scene, camera]);
|
|
|
|
return <primitive key={url} object={model} ref={ref} />;
|
|
});
|