List models fbx for departments

Questions
, , ,
1

I need help. I’m trying to make a project where you can see 3D models and even make virtual tours, but there’s a problem, it doesn’t want to load my fbx models. I’m doing it with next js and I’m saving them in firebase. Can you help me?import React, { useState, useEffect, Suspense } from ‘react’;
import { Canvas } from ‘@react-three/fiber’;
import { OrbitControls, useGLTF, useFBX } from ‘@react-three/drei’;
import { OBJLoader } from ‘three/examples/jsm/Addons.js’;
import * as THREE from ‘three’;

interface ModelViewerProps {
url?: string; // Hacemos que el prop url sea opcional
}

const ModelViewer: React.FC = ({ url }) => {

const [hasError, setHasError] = useState(false);

// Si hay error, o no hay URL válida, mostramos el cubo
const modelUrl = hasError ? null : url ;

// Función para mostrar un cubo por defecto
const DefaultCube = () => (

<boxGeometry args={[1, 1, 1]} /> {/* Tamaño del cubo /}
{/ Color del cubo */}

);

// Verifica si la URL es válida
useEffect(() => {
const checkURL = async () => {
if (!modelUrl) {
setHasError(true); // Si no hay URL, mostramos el cubo por defecto
return;
}

  try {
    const response = await fetch(modelUrl);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
  } catch (error) {
    console.error("Error loading model:", error);
    setHasError(true);  // Si falla, mostramos el cubo por defecto
  }
};

checkURL();

}, [modelUrl]);

const extension = modelUrl?.split(‘.’).pop();
let Model;

const LoadOBJ = () => {
const [obj, setObj] = useState<THREE.Object3D | null>(null);

useEffect(() => {
  if (modelUrl) {
    const loader = new OBJLoader();
    loader.load(modelUrl, (object: THREE.Object3D) => {
      setObj(object);
    });
  }
}, [modelUrl]);

return obj ? <primitive object={obj} scale={0.5} /> : null;

};

const LoadGLTF = () => {
const { scene } = useGLTF(modelUrl!);
return ;
};

switch (extension) {
case ‘fbx’:
Model = () => {
const fbx = useFBX(modelUrl!);
return ;
};
break;
case ‘obj’:
Model = LoadOBJ;
break;
case ‘gltf’:
case ‘glb’:
Model = LoadGLTF;
break;
default:
Model = DefaultCube; // Si no hay formato compatible, mostramos el cubo por defecto
break;
}

return (
<Canvas style={{ width: ‘100%’, height: ‘300px’ }}>

<directionalLight position={[10, 10, 5]} />


{Model && } {/* Cargamos el modelo o el cubo por defecto */}


);
};

export default ModelViewer;