如何在three- or或react-three-fiber中加载相同的gltf模型

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { useLoader } from '@react-three/fiber';
import { Suspense } from 'react';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

function Scene() {
  const camera = useRef();
  return (
    <perspectiveCamera ref={camera} fov={75} aspect={window.innerWidth / window.innerHeight} near={0.1} far={1000} position={[0, 0, 5]} />
  );
}

const loader = new GLTFLoader();

loader.load('path/to/your/gltf/model.gltf', (gltf) => {
  const model = gltf.scene;
  scene.add(model);
}, undefined, (error) => {
  console.error(error);
});

const Model = () => {
  const gltf = useLoader(GLTFLoader, 'path/to/your/gltf/model.gltf');
  return (
    <primitive object={gltf.scene} />
  );
};

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

function animate() {
  requestAnimationFrame(animate);
  // 执行一些动画逻辑
  renderer.render(scene, camera);
}
animate();

const App = () => {
  return (
    <Canvas>
      <Scene />
    </Canvas>
  );
};