how to fix "THREE.Object3D.add: object not an instance of THREE.Object3D." error on OBJLoader

Question

I'm trying to add controllers in my VR scene, following this example "https://threejsfundamentals.org/threejs/lessons/threejs-webvr-point-to-select.html". I wanted to replace the line pointers with OBJ models that I've found, but it seems that it keeps loading for some reason or it loads nothing.

 ...
 var gun = new OBJLoader();
 gun.load('models/CA-87.obj');

 this.controllers = [];
  ...
 for (let i = 0; i < 2; ++i) {
 const controller = renderer.vr.getController(i);
 //controller.addEventListener('select', selectListener);
 //controller.addEventListener('selectstart', selectListener);
 //controller.addEventListener('selectend', endListener); 
 scene.add(controller);

 controller.add(gun);

 this.controllers.push({controller, gun});
                  }
 ...

The errors that I get are these "THREE.Object3D.add: object not an instance of THREE.Object3D. > Object { manager: {…}, materials: null }". I expected to see the models in the scene and follow the movement of the actual vive controllers that I use, but they won't show up.

Answer 1

gun is an object loader, not an object. Per the docs OBJLoader delivers an Object3D in a callback. So...

let loader = new OBJLoader();
loader.load('models/CA-87.obj', gun => {
  // ...
  controller.add(gun);
  // ...
});