React-Three-Fiber (R3F): GLTF loader loading issue. Why can't I see my model?

Question

I'm trying to load a gltf model in react-three-fiber (R3F) and I am having a nightmare. I have tried looking for the answer and there have been people with a similar problem but I was not able to solve my issue.

I keep getting this in the console:

    at JSON.parse (<anonymous>)
    at GLTFLoader.parse (GLTFLoader.js:213)
    at Object.onLoad (GLTFLoader.js:145)
    at XMLHttpRequest.<anonymous> (three.module.js:35829)

As far as I am aware, there is nothing wrong with my code. I've tried writing it loading in the model in in many different ways. The creator of react-three-fiber loaded in a model to his codesandbox a few days ago like this: https://codesandbox.io/s/r3f-gltf-useloader-8nb5i - so I feel it can't be an issue with R3F. I noticed that he was using a glb rather than a gltf file so I went and found a glb model to check if that would make a difference. I realised I also have to have my model in the public folder, which I have also done. Unfortunately, this did not make a difference and I still continue to get the issue.

I have tried like this:

import React, { Suspense } from "react";
import { Canvas, useLoader } from "react-three-fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

import * as THREE from "three";

import Box from "./Components/Sphere.Component";
import Plane from "./Components/Plane.Component";

import Controls from "./Components/Controls.Component";

import "./App.css";

const Chair = () => {
  const { nodes } = useLoader(GLTFLoader, "../public/mindbreaker.glb");
  return (
    <mesh geometry={nodes.Cube.geometry}>
      <meshStandardMaterial attach="material" color="lightblue" />
    </mesh>
  );
};

function App() {
  return (
    <Canvas
      camera={{ position: [0, 0, 5] }}
      onCreated={({ gl }) => {
        gl.shadowMap.enabled = true;
        gl.shadowMap.type = THREE.PCFSoftShadowMap;
      }}
    >
      <fog attach="fog" args={["pink", 5, 15]} />
      <Plane />
      <Controls />
      <Box />
      <Suspense fallback={null}>
        <Chair />
      </Suspense>
    </Canvas>
  );
}

export default App;

Here is a person that had a similar issue: https://discourse.threejs.org/t/json-or-gltf-loader-for-three-js-in-react/3898/10 but I still don't really understand how to solve this problem.

Any help would be greatly appreciated, I was so looking forward to having a play with R3F but I seem to have fallen at the first hurdle. Someone please save me from this headache! haha.

Thank you!

Do not use `../public/mindbreaker.glb`. It has to be a relative path like loading an image or like using an `` in html. The correct code should be `useLoader(GLTFLoader, "mindbreaker.glb")` — mr.b, Jul 21 '20 at 13:36

score 1 · Answer 1 · answered Jul 04 '20 at 11:51

1

Lots of ifs here but If you have saved the 'mindbreaker.glb' in your 'public' directory and you are using create-react-app then the path to the file should be 'useLoader(GLTFLoader, "mindbreaker.glb")

answered Jul 04 '20 at 11:51

James

1,355
3
14
38

score 0 · Answer 2 · answered Apr 17 '20 at 19:31

if it's codesandbox disable loop protection in the settings. csb cant load bigger gltf's and the error is impossible to track down.

otherwise it can be everything, if the gltf is draco compressed you need draco loader, it could be a wrong path, missing lights, model too big so it's not in the cams frustrum, etc. all this stuff is really awful in the beginning, but you'll get used to it. when i started threejs it nearly drove me nuts.

ps.

../public/ looks suspicious. it's either /... or /public/...

score 0 · Answer 3 · answered Jul 16 '20 at 04:11

I had the same problem so I moved to a simple HTTP server so I could progress. In my case the models will ultimately be served so this isn't too much of an inconvenience.

http-server . -p 8000 --cors

and within react provide the url to useLoader.

You can find more info at https://threejs.org/docs/#manual/en/introduction/How-to-run-things-locally

score 0 · Answer 4 · edited May 19 '21 at 11:32

In case anyone else finds this thread when looking for the answer to this issue, i solved some loading problems by importing my glb file first. I'm not too well versed in react yet, but I think it is because react changes the relative path to the file, and so importing it as shown below (for example) might work.

import modelPath from "../public/mindbreaker.glb";

//----------//

// Use your loader with the imported model variable, instead of a hardcoded path
useLoader(GLTFLoader, modelPath)

React-Three-Fiber (R3F): GLTF loader loading issue. Why can't I see my model?

4 Answers4