Using Three.js obj-loader in React

Question

In the first try, I used the normal import from node_modules and after that even minifided lib without success. In the next step I used an older version of Three. js library without any changes. I found out example whit imported three-obj-loader module and tried it and still don`t know why in the output I get OBJLoader is not constructed, but function. Many thanks for help.

I`m importing loaders like this

import OB from './ObjLoader';
import * as THREE from './three';
// var THREE = require('three/examples/js/loaders/OBJLoader');//
// var manager = new LoadingManager();//
// var loader = new THREE.OBJLoader( manager );
// import 'three';
// var loader = new OBJLoader( manager);
var OBJLoader = require('three-obj-loader')(THREE)
var manager = new TH.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
    console.log( item, loaded, total );
};
// model
// var loader = new OB( manager );

in function 
export function loadModelOBJ( path ) {
    return new Promise( ( resolve, reject ) => {
        loader.load(
            path,
            resolve,
            () => null,
            error => reject
        );
    });
}

With Webpack setup:

var webpack = require('webpack');
var path = require('path');
module.exports = {
    devtool: 'inline-source-map',
    entry: {
        main: './src/client.js'
    },
    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /node_modules/,
                loaders: [ 'babel', 'eslint-loader' ]
            },
            { test: /\.json$/, loader: 'file' },
            { test: /\.jpg$/, loader: 'file' },
            { test: /\.obj$/, loader: 'file' },
            { test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] }

        ]
    },
    plugins:[
        new webpack.ProvidePlugin({
            'THREE': 'three'
        }),
    ],
    progress: true,
    resolve: {
      extensions: ['', '.json', '.js'],
        alias: {
            'three/OrbitControls': path.join(__dirname, 'node_modules/three/examples/js/controls/OrbitControls.js'),
            'three/OBJLoader': path.join(__dirname, 'node_modules/three/examples/js/loaders/OBJLoader.js')
            // ...
        }
    },
    output: {
        path: 'build/',
        filename: 'bundle.js'
    }
};

And packpage:

{     
  "scripts": {
    "start": "webpack-dev-server --content-base build"
  },    
  "dependencies": {
    "autobind-decorator": "^1.3.3",
    "babel-core": "^6.7.6",
    "babel-loader": "^6.2.1",
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "babel-register": "^6.3.13",
    "babel-runtime": "^6.3.19",
    "css-loader": "^0.23.1",
    "file-loader": "^0.8.5",
    "json-loader": "^0.5.4",
    "node-sass": "^3.7.0",
    "react": "^15.3.1",
    "react-dom": "^15.1.0",
    "react-three-renderer": "^3.2.1",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.1",
    "three": "^0.84.0",
    "three-obj-loader": "^1.1.2"
  },
  "devDependencies": {
    "babel-eslint": "^6.0.4",
    "babel-plugin-react-transform": "^2.0.0",
    "clean-webpack-plugin": "^0.1.6",
    "eslint": "^2.10.2",
    "eslint-loader": "^1.3.0",
    "eslint-plugin-import": "^1.8.0",
    "eslint-plugin-react": "^5.1.1",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.1"
  }
}

I followed this examples:

Using webpack, threejs examples, and typescript?

What is the proper way to get Three.js used within Webpack so I can use OrbitControls?

three.js OBJLoader not loading in react

Update: I also used this case (external obj-loader), but without success. I think that I have a problem with setting up the project with right configuration. I was using obj-loader from three repository with webpack plugin importers-loader. It works, THREE becomes global for obj-loader, but it ended with error: OBJLoader is not constructor. Even when I copy different version of the obj-loader, still nothing helped me. It`s really frustrating this error message...

If someone could share project with React, Three and ObJLoader I would be thankful.

Thanks to this man and his work, https://www.npmjs.com/package/three-react-obj-loader I`m able to move further, but still I want to know where was the mistake....

Main configuration which I`m using THREE.87.1 React 16 Webpack 3.6.0

danharsanyi · Accepted Answer · 2017-09-14 10:15:55Z

4

I had a similar issue, but it looks like you're not importing correctly. If you have the npm packages installed you don't need to import them with './' This works for me:

import React, { Component } from 'react';
import * as THREE from 'three';
import React3 from 'react-three-renderer';
import OBJLoader from 'three-obj-loader';

OBJLoader(THREE);

Then in the constructor method of your React class, call

 var loader = new THREE.OBJLoader();

From there you should be able to console.log(loader) and see the THREE.OBJLoader function in the console.

Let me know if that helps!

answered Sep 14, 2017 at 10:15

danharsanyi

4365 silver badges5 bronze badges

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

Comments

Stefano Borzì · Accepted Answer · 2024-03-01 23:30:32Z

Hope it can help, I've used this code to load properly a 3D .obj file:

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';

const objLoader = new OBJLoader();

objLoader.load(`example.obj`, (obj) => {
  scene.add(obj);
};

Similarly, I did the same with the MTLLoader:

import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
...
const mtlLoader = new MTLLoader();
mtlLoader.load('example.mtl', (mtl) => {
  const objLoader = new OBJLoader();
  objLoader.setMaterials(mtl);
  objLoader.load('example.obj', (obj) => {
      scene.add(obj);
  };
});

these libraries under three/examples/jsm/ requires @types/three that you can install using:

npm install -D @types/three

Collectives™ on Stack Overflow

Using Three.js obj-loader in React

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related