Loading .obj with React and Three.js

Question

I'm attempting to import a .obj file into react to pass around and show in a viewport. I have created a viewport component that works when using included primitivies. However, I'm not sure how to import an obj. I'm using vite.

import React, { useMemo } from 'react';
import { Canvas, useLoader } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';

const ModelViewer = ({ objModel }) => {
  // Load the OBJ model using the OBJLoader
  const obj = useLoader(OBJLoader, objModel);

  // Calculate the bounding box of the loaded model to center it in the scene
  const center = useMemo(() => {
    if (!obj) return [0, 0, 0];
    const box = new THREE.Box3().setFromObject(obj);
    const centerVector = box.getCenter(new THREE.Vector3());
    return centerVector.toArray();
  }, [obj]);

  return (
    <div style={{ height: '100%', width: '100%' }}>
      <Canvas style={{ height: '100%', width: '100%' }}>
        <ambientLight intensity={0.5} />
        <pointLight position={[10, 10, 10]} />
        {obj && <primitive object={obj} position={center} />}
        <OrbitControls/>
      </Canvas>
    </div>
  );
};

export default ModelViewer;

this is the full component and a simplified representation of implementation in App.jsx

import frame from './assets/230x50.obj'
...
<ModelViewer objModel={frame} />

The error I'm getting is a syntax error stemming from the first line of the obj

@DanielA.White Thats a good question, I'm not completely certain but I believe its a wavefront obj. Here's the first few lines. # WaveFront *.obj file (generated by Autodesk ATF) mtllib 230x50.mtl g Body1 v 128.500000 20.500000 0.000000 v 128.020833 20.525584 4.600000 v 128.180219 20.511377 4.600000 v 128.340008 20.502845 4.600000 — Etch-a-sketch, Jul 26 '23 at 23:30

score 0 · Accepted Answer · answered Jul 27 '23 at 16:22

I have found the answer; the import [objectName] from [path] syntax expects the file to be a jsx file. Some exceptions have been manually added like the image formats however, because objs are not standard they have not been included. In this case I am using Vite changing the config file resolved this.

export default defineConfig({
  assetsInclude: ['**/*.stl', '**/*.obj'],
})

https://vitejs.dev/config/shared-options.html#assetsinclude

Loading .obj with React and Three.js

1 Answers1