OBJLoader results in "text.indexOf is not a function" error

Questions
1

I have the following file upload and parsing code:

When the OBJ file is uploaded from the src to the program, it provides an error. If you comment out the OBJ loader and use the STL loader instead, it works with the STL file.

Edit: Here is the full code for better viewing.

import { Canvas } from "@react-three/fiber";
import { useEffect, useState, useMemo, useRef } from "react";
import { STLLoader } from "three/examples/jsm/loaders/STLLoader";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { OrbitControls } from "@react-three/drei";
import "./styles.css";
import { MeshNormalMaterial } from "three";

function Model({ data }) {
  // const geo = useMemo(() => new STLLoader().parse(data), [data]);
  const geo = useMemo(() => new OBJLoader().parse(data), [data]);
  const meshRef = useRef(null);
  geo.center();
  return (
    <mesh ref={meshRef} geometry={geo} material={new MeshNormalMaterial()} />
  );
}

export default function App() {
  const [savedFile, changeSavedFile] = useState(null);
  const [data, set] = useState();
  useEffect(() => {
    let reader = new FileReader();
    reader.addEventListener("loadend", async (event) =>
      set(event.target.result)
    );
    if (savedFile != null) {
      reader.readAsArrayBuffer(savedFile);
    }
  }, [savedFile]);
  // When the user uploads a file, it is saved to the App State
  return (
    <div className="App">
      <input type="file" onChange={(e) => changeSavedFile(e.target.files[0])} />
      <Canvas>
        <OrbitControls />
        <gridHelper />
        {data && <Model data={data} />}
      </Canvas>
    </div>
  );
}
2

data is an array buffer which OBJLoader can’t handle. Convert it to text like so:

const decoder = new TextDecoder();
const text = decoder.decode( data );

Besides, OBJLoader returns an instance of Group not BufferGeometry. So the subsequent code is not compatible with OBJLoader.

1 Like
3

Can GLTF be done with file upload? One issue I am coming across is that the GLTF relies on textures, resulting in a crash because the textures are not found. This is because only the GLTF file is being uploaded and parsed.

The textures are not needed; how can they be filtered out?