在 React 中使用 Three.js obj-loader

Question

在第一次尝试中，我使用了来自 node_modules 的正常导入，之后甚至使用 minifid 的 lib 都没有成功。在下一步中，我使用了旧版本的 Three。 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"
  }
}

我遵循了这个例子：

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

更新： 我也使用了这种情况（外部 obj-loader），但没有成功。我认为我在使用正确配置设置项目时遇到问题。我正在使用来自三个存储库的 obj-loader 和 webpack 插件 importers-loader。它工作，三个成为 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 函数。

如果有帮助，请告诉我！