无法使用ThreeJS和React导入3D模型

import React, { Component } from 'react';
import * as THREE from 'three';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';

class MyComponent extends Component {
  componentDidMount() {
    // 创建场景
    const scene = new THREE.Scene();

    // 创建相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 创建加载器
    const loader = new OBJLoader();

    // 加载模型
    loader.load(
      'path/to/your/model.obj',
      (object) => {
        // 添加模型到场景中
        scene.add(object);
      },
      (xhr) => {
        // 加载进度回调
        console.log((xhr.loaded / xhr.total) * 100 + '% loaded');
      },
      (error) => {
        // 加载错误回调
        console.error('An error happened', error);
      }
    );

    // 渲染场景
    const animate = () => {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    };
    animate();
  }

  render() {
    return <div id="canvas" />;
  }
}

export default MyComponent;