React-three-fibre not able to load glft in TypeScript

Questions
1

I’m not sure what I am doing wrong. I am trying to load a glft in react-three-fibre with TypeScript. But I am unable to load the model and only get a vague error message.

  • I am using a .glb file and an absolute path as suggested by @drcmda unable-to-import-a-gltf-file
  • I’ve also used useGLFT within the <Suspense> Tag
  • I’ve also looked into the documentation from react-three-fibre how to load a model but it uses JavaScript. I guess my problem is with due to TypeScript
  • I wanted to recreate this staging-center–default-story

it should be dead simple, but I don’t get it

my code LoadFBX.tsx:

import { Environment, OrbitControls, useFBX, useGLTF } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import { Suspense } from "react";

const LoadFBX = () => {
  const { scene } = useGLTF("src/pages/Three/LittlestTokyo.glb");
  return (
    <Canvas>
      <Suspense fallback={null}>
        <primitive object={scene} scale={[0.01, 0.01, 0.01]} />
      </Suspense>
    </Canvas>
  );
};

export default LoadFBX;

image
image1292×712 110 KB

image
image3680×2260 821 KB

2

What is useFBX doing in this example?

Also, I saw from some similar problems posted that dated library versions could be culprit.
Not sure if this is helpful, but the working example simply uses:

import { Suspense } from 'react'
import { Canvas } from '@react-three/fiber'
import { useGLTF } from '@react-three/drei'

function Model() {
  const gltf = useGLTF('https://thinkuldeep.com/modelviewer/Astronaut.glb')
  return (<primitive object={gltf.scene} />)
}

export default function Home() {
  return (
    <div>
      <Suspense>
        <Canvas>
          <ambientLight />
          <Model />
        </Canvas>
      </Suspense>
    </div>
  )
}

Note: I don’t use R3F, but wanted to try to help.

3

@notchris thanks for trying to help! Really appreciate it!

I’ve tried to import an FBX Model but it failed too. I’ve just forgot to remove the import.

I didn’t find the dated library in my package.json, so I guess I am not using it. May you provide a link to the post about the dated library?

4

I think it can also be due to Ionic. I’ve read in the error message some problems IonRouterOutlet. I’ve also read in this blog post Ionic-react - so many render issues related to routing - Ionic React - Ionic Forum that Ionic is not good at handling react and renderin

5

Can you trace the error in the dev tools and see what line in particular in which module is throwing the error?

6

I’ve traced it back to Ionic. I’ve tested a setup with a clean react project using this Getting Started | Create React App and the same code from above worked without a problem.

So, I conclude for myself, it is not an issue of react-three-fibre and TypeScript but an Ionic with React issue. I might have to rethink my strategy and switch to a pure React project instead of using Ionic with React.

But thanks for your help @notchris !

1 Like
7

maybe for have figured out already but for sure this is not a path. “src” does not exist, it is virtual. the bundler will take all these folders and files and create a bundle, a single file, from it. browser url fetching something from “src/…” hence doesn’t compute. this is not react or three, it goes for bundling in general.

your file has to be located in /public/LittlestTokyo.glb and the path will have to be “/LittlestTokyo.glb”