3D 模型未出现在 React Three.js 组件中

问：

我正在使用 Three.js 开发一个 React 组件来加载 3D 模型。但是，我遇到了 3D 模型未出现在场景中的问题。我已经为各种文件格式（gltf、obj、fbx 等）实现了加载器，但是当我上传文件时模型没有显示出来。

'use client';

import React, { useRef, useEffect } from 'react';
import * as THREE from 'three';

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader';
import { OBJLoader } from 'three/addons/loaders/OBJLoader';
import { FBXLoader } from 'three/addons/loaders/FBXLoader';
import { STLLoader } from 'three/addons/loaders/STLLoader';
import { ColladaLoader } from 'three/addons/loaders/ColladaLoader';
import { PLYLoader } from 'three/addons/loaders/PlyLoader';
import { ObjectLoader } from 'three/src/loaders/ObjectLoader';

const Model = () => {
  const fileInputRef = useRef(null);
  const sceneRef = useRef(new THREE.Scene());
  const cameraRef = useRef(new THREE.PerspectiveCamera(75, 1, 0.1, 1000));
  const groupRef = useRef(new THREE.Group());
  const canvasRef = useRef(null);

  useEffect(() => {
    cameraRef.current.position.z = 5;

    // Add a directional light
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
    directionalLight.position.set(1, 1, 1).normalize();
    sceneRef.current.add(directionalLight);

    sceneRef.current.add(groupRef.current);

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

    const animate = () => {
      requestAnimationFrame(animate);
      // Add any animations or updates here
      renderer.render(sceneRef.current, cameraRef.current);
    };

    animate(); // Start the rendering loop
  }, []); // Empty dependency array to run this effect only once on mount

  const handleFileChange = (event) => {
    var file = event.target.files[0]

    const reader = new FileReader();
    let material = new THREE.MeshPhongMaterial();

    reader.onload = function () {
      var loader = null;
      switch (file.name.split('.').pop().toLowerCase()) {
        case 'gltf':
          loader = new GLTFLoader();
          break;
        case 'obj':
          loader = new OBJLoader()
          break;
        case 'fbx':
          loader = new FBXLoader()
          break;
        case 'stl':
          loader = new STLLoader();
          break;
        case 'dae':
          loader = new ColladaLoader()
          break;
        case 'ply':
          loader = new PLYLoader()
          break;
        case 'json':
          loader = new ObjectLoader()
          break;
        default:
          console.log('Not Compatible')
      }

      var geometry = loader.parse(this.result);
      var mesh = new THREE.Mesh(geometry, material);
      mesh.castShadow = true;
      mesh.receiveShadow = true;
      groupRef.current.add(mesh);
    };

    reader.readAsArrayBuffer(file);
  };

  return (
    <div>
      <label htmlFor="model" className='text-white'>erfwerfwefw</label>
      <input type='file' name="model" id='pickFile' onChange={handleFileChange} ref={fileInputRef} />
      <div ref={canvasRef} className='z-1'></div>
    </div>
  );
};

export default Model;

详： 我已确保在文件开头导入必要的加载程序。 正确确定文件类型并将其传递给 loadModel 函数。 我在调用 loadModel 函数时正确使用了 Scene ref。 潜在关注领域： 加载器初始化和使用。 正确处理文件类型。 正确使用 Scene ref。 场景和摄像机配置。

错误消息：错误：THREE。GLTFLoader：无法加载缓冲区“Cube.bin”。

我尝试过什么：

确认加载程序初始化。 检查文件类型处理。 验证 Scene ref 用法。 确保正确的场景和摄像机配置。

对于可能导致 3D 模型未出现在场景中的原因，我将不胜感激。我的代码中是否有任何我应该检查或修改的特定区域？