What am I doing wrong?

[shlomizadok]

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?

[yinjs]

@shlomizadok import OBJLoader from 'three-obj-loader';

[shlomizadok]

@yinjs - Thanks. tried that too :( no luck either

[shlomizadok]

Found a workaround (weird though):

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 {
...
  componentDidMount() {
    ...
    this.THREE = THREE;
    const objLoader = new this.THREE.OBJLoader();
    objLoader.load(url, (object) => {...});
  }
}

[jeffersoneagley]

@shlomizadok If I recall correctly, that happens because this is an ES5 module, and you're using ES6/react/whatever to load it.

[shlomizadok]

@jeffersoneagley - Yeah so it seems. Eventually I managed doing so by copying and exporting it manually. See https://github.com/shlomizadok/shalosh/blob/master/src/App.js#L6-L9

[SolenneD]

Hey,

I have an error

Cannot create property 'OBJLoader' on string 'THREE'

More details -> /src/components/Satellite.js

@shlomizadok

I don't understand, Thanks

[shlomizadok]

Hey @SolenneD - I am so sorry, haven't touched this for quite a while. I think that what worked for me eventually was copying 'three-object-loader' and exporting it manually. See https://github.com/shlomizadok/shalosh/blob/master/src/App.js#L6-L9

[hiteshsahu]

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");

[duhaime]

I've found it's best to only use loaders from the three.js project itself, ala:

yarn install three

then:

import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';

[zaoren]

I've found it's best to only use loaders from the three.js project itself, ala:

yarn install three

then:

import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';

I tried it. Your approach is useful, but these two packages seem to be ES6 syntax. After packaging, use uglify.js There will be problems when decompressing. Additional processing is needed

[CrandellWS]

so for me I could not get it to work when I used this

import { * } from 'three'; import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';

so this fixed it :

import { Scene, PerspectiveCamera, WebGLRenderer } from 'three'; import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';

so I am not knowledgeable enough to give specifics but it seems like conflicts may play a role somehow...