Clever Geek Handbook

Three.js OBJLoader not loading into react

I am trying to load an object file (.obj) for use with a tag. js and react (with react-three-renderer) but get my code looks like this:

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 getting: "OBJLoader export" (imported as "THREE") not found in "three" Anyone with an idea?

+6


source to share


3 answers


So, it seems that adding this.THREE = THREE

to a react component does the trick (weird, eh?). So my code looks like this:



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();
  }
}
+6


source


Maybe try instead THREE.ObjectLoader()



0


source


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

 const objLoader = new THREE.OBJLoader();

When deleting lines:

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

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

-1


source






More articles:


All Articles