How to use OBJLoader?

[Stephen Buchanan]

Forgive me if this is a trivial question, but I am trying to load an OBJ from within the three-seed structure, in a similar way to how the standard examples use ObjectLoader, but can't quite figure out how to get it done.

I import what I assume is the correct loader:

import { Group, OBJLoader } from 'three';

But if I try

const loader = new OBJLoader();

Then I get the error:

TypeError: _threeObjLoader.OBJLoader is not a constructor

[Edwin Webb]

Not at all. Sadly, this is a common problem using the examples code in this type build system. The README should make a mention of this.

I've used this package in the past to resolve your issue : https://www.npmjs.com/package/three-obj-loader

[Stephen Buchanan]

Hmmm interesting. I tried to install that package, too, and seemed to have largely the same issues. I might need to get a bit more familiar with threejs itself I suppose.

[Edwin Webb]

Try this :)

import { Group, ObjectLoader  } from 'three';
import MODEL from './flower.json';

import * as THREE from 'three';
import OBJLoader from 'three-obj-loader';

export default class Flower extends Group {
  constructor() {
    const loader = new ObjectLoader();
    
    super();

    this.name = 'flower';

    const x = OBJLoader(THREE);
    const y = new THREE.OBJLoader();

    console.log(y.load)

    loader.load(MODEL, (mesh)=>{
      this.add(mesh);
    });
  }
}

logs..

      load(url, onLoad, onProgress, onError) {

      var scope = this;
      this.onError = onError || defaultOnError;

      var loader = new THREE.FileLoader(scope.manager);
      loader.setPath(this.pa…```

[Stephen Buchanan]

I think I see what you're getting at, although the example above is still trying to import a JSON model, not an .obj? I really appreciate the time you're giving on this!

Using your example, I got a bit further (no compile or console errors any more, at least):

/**
 * @exports Office
 */

import { Group , ObjectLoader } from 'three';
// import MODEL from './studio_v.obj';

import * as THREE from 'three';
import OBJLoader from 'three-obj-loader';
// import { loadScene } from '../../Loaders/loader';

export default class Office extends Group {
  constructor() {
    
    super();

    OBJLoader(THREE); // wtf...? but has to be used before the line below or "THREE.OBJLoader is not a constructor"
    const loader = new THREE.OBJLoader();

    this.name='office';

    loader.load('./studio_v.obj', (mesh) => {
      this.add(mesh);
    });

  }
}

Now getting a 404 on my studio_v.obj file, so I guess that's a webpack thing. How would I make sure webpack puts the file somewhere accessible? (I can't exactly import it anywhere...)

[Edwin Webb]

If you 'import' the obj that will give you a URL to load.

[Stephen Buchanan]

Wonderful, thank you!

(I had thought somehow that importing from a non-JS file would throw parsing errors, but it seems my understanding of Webpack might be a little deficient.)