2

I would like to load an object ".obj" with three.js.

My code :

/********** Imports **********/
import React, { PureComponent } from 'react';
import * as THREE from 'three';
import OBJLoader from 'three-obj-loader';
OBJLoader('THREE');

export class Satellites extends PureComponent {

  componentDidMount() {
    // Satellite Sphere
    this.geometry = new THREE.SphereGeometry( 10, 32, 32 );
    // Texture
    this.texture = new THREE.OBJLoader().load
    ('textures/Satellite.obj',
      texture => {
        this.sat = new THREE.MeshBasicMaterial( { map: this.texture } );
        this.sphere = new THREE.Mesh( this.geometry, this.sat );
        this.props.scene.add( this.sphere );
      }
    )
  }

  render() {
    return null;
  }
}

Error :

Attempted import error: 'OBJLoader' is not exported from 'three' (imported as 'THREE').

So I use this package I add this line import OBJLoader from 'three-obj-loader';

But nothing... I still have the same error with this import !

More details : https://github.com/SolenneD/earth-react

Scene.js and Satellite.js (this is the first version so not this code but there is a texture .obj)

Thanks for help.

Solenne Daguerre
  • 119
  • 1
  • 2
  • 8
  • 1
    Yes, `OBJLoader` is no part of the `three.js` core. You can try to transform `OBJLoader` to a module by yourself or you use one of the existing `npm` packages. However, the last approach is sometimes problematic since the packages are not always well maintained. What error occurs if you use `three-object-loader`? Your current shared code is unfortunately not helpful in this context. – Mugen87 Mar 07 '19 at 16:09
  • I have edit my question, thanks ! – Solenne Daguerre Mar 07 '19 at 16:29
  • If you are using the `npm` package, it should be sufficient to call `new OBJLoader()`. Notice the missing `THREE` namespace. – Mugen87 Mar 07 '19 at 18:33
  • I already called `new OBJLoader ()` with `this.texture = new THREE.OBJLoader().load`. With my code (I have edited with the import) I have the same error : `Attempted import error: 'OBJLoader' is not exported from 'three' (imported as 'THREE').` – Solenne Daguerre Mar 07 '19 at 20:29
  • Is it possible for you to share the problematic code as a [live example](https://jsfiddle.net/f2Lommf5/)? Can you at least update your repository with the code using `OBJLoader`? I have checked your repo but [Satellites.js](https://github.com/SolenneD/earth-react/blob/master/src/components/Satellites.js) seems to represent a previous version. – Mugen87 Mar 07 '19 at 21:03
  • since release 101 of the library there is a script that generates modules out of example/js files. https://github.com/mrdoob/three.js/pull/15518 – gaitat Mar 07 '19 at 21:28
  • @Mugen87 Done ! :) – Solenne Daguerre Mar 08 '19 at 09:37
  • @gaitat, Thanks, I'm going to have a look. – Solenne Daguerre Mar 08 '19 at 09:37
  • I was able to solve the runtime error with this guide: https://github.com/sohamkamani/three-object-loader/issues/10#issuecomment-316981216 – Mugen87 Mar 08 '19 at 10:26
  • Thanks, I push on my repo. Now, the problem is `Cannot create property 'OBJLoader' on string 'THREE'` What does it mean ? – Solenne Daguerre Mar 08 '19 at 10:44

0 Answers0