CODEWITHSUNDEEP
reactjsthree.jsreact-three-fiber
zeplika
zeplika

Reputation: 55

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;

Upvotes: 2

Views: 1221

Answers (1)

Mugen87
Mugen87

Reputation: 31036

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.

Upvotes: 1

Related Questions