3D Model Not Appearing in React Three.js Component

Question

I am working on a React component using Three.js to load 3D models. However, I am facing an issue where the 3D model is not appearing in the scene. I have implemented loaders for various file formats (gltf, obj, fbx, etc.), but the model does not show up when I upload a file.

'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;

Details: I have ensured that the necessary loaders are imported at the beginning of my file. The file type is correctly determined and passed to the loadModel function. I am using the Scene ref correctly when calling the loadModel function. Potential Areas of Concern: Loader initialization and usage. Proper handling of file types. Correct usage of the Scene ref. Scene and camera configuration.

Error Messages: Error: THREE.GLTFLoader: Failed to load buffer "Cube.bin".

What I've Tried:

Confirming loader initialization. Checking the file type handling. Verifying the Scene ref usage. Ensuring proper scene and camera configuration.

I would appreciate any insights or suggestions on what might be causing the 3D model not to appear in the scene. Are there any specific areas in my code that I should review or modify?