在 React 中使用 Three.js obj-loader

在第一次尝试中，我使用了从 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？ https://stackoverflow.com/questions/35968047/using-webpack-threejs-examples-and-typescript

在 Webpack 中使用 Three.js 以便我可以使用 OrbitControls 的正确方法是什么？ https://stackoverflow.com/questions/40556588/what-is-the-proper-way-to-get-three-js-used-within-webpack-so-i-can-use-orbitcon

Three.js OBJLoader 未在反应中加载 https://stackoverflow.com/questions/45191676/three-js-objloader-not-loading-in-react

Update: 我也使用了这种情况（外部 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 https://www.npmjs.com/package/three-react-obj-loader我可以进一步前进，但我仍然想知道错误在哪里......

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

我遇到了类似的问题，但看起来您没有正确导入。如果您安装了 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 函数。

让我知道是否有帮助！