three.js OBJLoader not loading in react

Question

I am trying to load an object (.obj) file to use with three.js and react (with react-three-renderer), yet get an My code looks like:

import React from 'react';
import ReactDOM from 'react-dom';
import React3 from 'react-three-renderer';
import TrackballControls from './TrackballControls';
import * as THREE from 'three';
import * as OBJLoader from 'three-obj-loader';
OBJLoader(THREE);

class MyClass extends React.Component {
...
  render() {
    ...
    const objLoader = new THREE.OBJLoader();
  }
}

However, I keep on getting: "export 'OBJLoader' (imported as 'THREE') was not found in 'three' Anyone with an idea?

Shlomi Zadok · Accepted Answer · 2017-07-22 19:18:10Z

8

So it seems that adding this.THREE = THREE to the react component does the trick (weird, eh?). So my code currently looks like:

import React from 'react';
import ReactDOM from 'react-dom';
import React3 from 'react-three-renderer';
import TrackballControls from './TrackballControls';
import * as THREE from 'three';
import * as OBJLoader from 'three-obj-loader';
OBJLoader(THREE);

class MyClass extends React.Component {
...
  render() {
    ...
    this.THREE = THREE;
    const objLoader = new this.THREE.OBJLoader();
  }
}

answered Jul 22, 2017 at 19:18

Shlomi Zadok

2784 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

score 1 · Accepted Answer · 2019-06-27 03:06:54Z

1

OBJLoader is now part of the core three.js library, so you can access it simply by doing:

 const objLoader = new THREE.OBJLoader();

While removing the lines:

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

Since you have already imported the three.js library in your code.

edited Jun 27, 2019 at 3:06

answered Jun 27, 2019 at 2:46

user11705279

3 Comments

rh16 Over a year ago

Am I missing something here? It looks like that exact line of code appears in the OPs code already. Have you changed something to address the problem? If so please explain.

user11705279 Over a year ago

It is the same line of code, but the 'OBJLoader' function in the original question is appended to the 'THREE' Object by the code 'OBJLoader(THREE);'. This is using an older library/non-standard method, as mentioned in my post, which may be introducing bugs.

rh16 Over a year ago

Ah that edit makes your answer much clearer, thank you

Hitesh Sahu · Accepted Answer · 2019-12-10 21:41:28Z

Update 2019 use "three-obj-mtl-loader" instead of `'three-obj-loader'`

  import { MTLLoader, OBJLoader } from "three-obj-mtl-loader";

Use this method to load material and OBJ model

   /**
   * Load and Display OBJ Model
   */
  loadObjModel = (materialURL, objectURL) => {
    new MTLLoader().load(materialURL, materials => {
      materials.preload();
      //materials.Material.side = THREE.DoubleSide;
      console.log("Loaded Materials");
      var objLoader = new OBJLoader();
      objLoader.setMaterials(materials);
      objLoader.load(
        objectURL,
        object => {
          //const root = object.detail.loaderRootNode;
          console.log("Loaded Obj" + object);
          let mesh = object;
          this.scene.add(object);
          mesh.position.set(0, 0, 0);
          mesh.scale.set(0.07, 0.07, 0.07);
        },
        xhr => {
          console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
        },
        // called when loading has errors
        error => {
          console.log("An error happened" + error);
        }
      );
    });
  };

Load obj models with material like this

this.loadObjModel("./assets/windmill-fixed.mtl", "./assets/windmill.obj");

Collectives™ on Stack Overflow

three.js OBJLoader not loading in react

3 Answers 3

Comments

3 Comments

Update 2019 use "three-obj-mtl-loader" instead of `'three-obj-loader'`

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Update 2019 use "three-obj-mtl-loader" instead of 'three-obj-loader'

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Update 2019 use "three-obj-mtl-loader" instead of `'three-obj-loader'`