.obj file importing in react using typescript

Questions
1

I am making react project with typescript. There is need to import .obj file, so I imported threejs library and react-three-fiber library like following;

import React, { useState, useMemo } from 'react'
import logo from './logo.svg';
import { Canvas } from 'react-three-fiber';
import { Group } from 'three';
import './App.css';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
function Model({ url }: {url: string}) {
  const [obj, set] = useState<Group>()
  useMemo(() => new OBJLoader().load(url, set), [url])
  
  return obj ? <primitive object={obj} /> : null
}

function App() {
  return (
    
      <Canvas>
          <Model url = '../obj/12328_Statue_v1_L2.obj'/>
      </Canvas>

  );
}

export default App;

But obj does not appear. The structure of project folder is as follow picture.

Screenshot 2021-03-26 140552
Screenshot 2021-03-26 140552423×629 30.2 KB

Next, I have got no idea what, I am just beginner for using typescript in react. I am using react 17.0.3, function component operation. Who can teach me .obj file import code? Help me.

2

Do you mind sharing the OBJ file in this topic?

3

/cc

4

Yes, I presented same question in stackoverflow, too.
Can you tell me the answer?

5

Would you please respond to: .obj file importing in react using typescript - #2 by Mugen87

6

What do you mean? I don’t care about that. Ah, .obj file is car obj.
Don’t you know the answer?

7

youre using a relative path, that cant work because your bundler, any bundler, must know about the file in order to include it in the bundle which some random string won’t allow for. either put the file into /public and use /12328_Statue_v1_L2.obj or import it

import statueUrl from './objects/12328_Statue_v1_L2.obj'

files also should not be outside of the src folder, unless you’re using public.

the other thing that could be improved, useLoader, full example:

import React, { Suspense } from 'react'
import { Canvas, useLoader } from 'react-three-fiber'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import statueUrl from './objects/12328_Statue_v1_L2.obj'

function Model(url) {
  const group = useLoader(OBJLoader, url)
  return <primitive object={group} />
}

<Canvas>
  <Suspense fallback={null}>
    <Model url={statueUrl} />
  </Suspense>
  ...

useLoader eliminates the async back and forth. it executes sync, but the component is async, that puts fallbacks, loading status and error handling into the parents hands where it should be. you can put anything into the fallback, could be another component that displays while the real model is loading, could be a status message, etc.