在React中使用Three.js obj-loader

Question

在第一次尝试中，我使用了从 node_modules 的正常导入，之后甚至使用了 minifided lib，但没有成功。在下一步中，我使用了旧版本的三。 js 库无需任何更改。我找到了导入三个 obj-loader 模块的示例并尝试了它，但仍然不知道为什么在输出中我得到的 OBJLoader 不是构造的，而是函数。 非常感谢您的帮助。

我正在像这样导入加载器

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

使用 Webpack 设置：

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'
    }
};

和包装页：

{     
  "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"
  }
}

我遵循了这个例子：

使用 webpack、Threejs 示例和 TypeScript？

在 Webpack 中使用 Three.js 以便我可以使用 OrbitControls 的正确方法是什么？

Three.js OBJLoader 未在反应中加载

更新： 我也使用了这种情况（外部 obj-loader），但没有成功。我认为我在使用正确的配置设置项目时遇到问题。我使用来自三个存储库的 obj-loader 和 webpack 插件 importers-loader。它有效，THREE 成为 obj-loader 的全局变量，但以错误结束：OBJLoader 不是构造函数。即使当我复制不同版本的 obj-loader 时，仍然没有任何帮助。这个错误消息真的很令人沮丧......

如果有人可以分享 React、Three 和 ObJLoader 项目，我将不胜感激。

感谢这个人和他的工作，https://www.npmjs.com/package/ Three-react-obj-loader我能够进一步前进，但我仍然想知道错误在哪里.. ..

我使用的主要配置 THREE.87.1 React 16 Webpack 3.6.0

Answer 1

我遇到了类似的问题，但看起来您没有正确导入。如果您安装了 npm 软件包，则不需要使用“./”导入它们，这对我有用：

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

OBJLoader(THREE);

然后在 React 类的构造方法中，调用

 var loader = new THREE.OBJLoader();

从那里您应该能够

console.log(loader)

并在控制台中看到 THREE.OBJLoader 函数。

如果有帮助请告诉我！

Answer 2

希望它能有所帮助，我已经使用此代码正确加载了 3D .obj 文件：

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

const objLoader = new OBJLoader();

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

同样，我对 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);
  };
});