Search code examples
reactjsthree.jsreact-three-fiber

OBJ Model not loading in react three fiber

I'm trying to add an OBJ Model (armchair.obj) but it's not being loaded. I'm using React three fiber library.

Here's my codesandbox: CodeSandbox

There's no problem with the model because I tried to load it using some other website and it is being loaded.

Anyway, I tried uploading another model (spongebob.obj) but it's not being really visible

Spongebob obj

However, in the other website, it's visible:

third party website

So, here's my codesandbox link

But, if you prefer the code here:

My App.js component:

import React, { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";
import LoadModel from "./components/LoadModel";
import Loader from "./components/Loader";

const App = () => {
    return (
        <main className="main-area">
            <div id="canvas-container">
            <Canvas pixelratio={[1, 2]} camera={{ position: [15, 15, 15], fov: 50, scale: [2,2,2] }}>
                <ambientLight intensity={1} />
                <Suspense fallback={<Loader />}>
                    <LoadModel url="./spongebob.obj" />
                </Suspense>
                <OrbitControls />
            </Canvas>
            </div>
        </main>
    );
};

export default App;

My LoadModel.js component:

import React, { useMemo, useState } from "react";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";

const LoadModel = ({ url }) => {
  const [obj, set] = useState();

  // useMemo(() => new OBJLoader().load(url, set), [url])
  useMemo(() => new OBJLoader().load(url, set), [url]);
  //useMemo(() => new GLTFLoader().load(url, set), [url])

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

export default LoadModel;
Solution

  • You can improve the rendering of the SpongeBob model by adding a directional light to your scene. A single ambient light is not sufficient for proper illumination. Try adding the following line to your codesandbox:

    <directionalLight />

    The chair model has unfortunately some design issues. It has an extreme scale and is highly translated. I suggest you scale the model down and then center it after the loading process. However, it would be better to fix the model in a DCC tool like Blender and model the chair according to real world units.