Question

在第一次尝试中，我使用了node_modules的正常导入，然后使用了minifided lib而没有成功。在下一步中，我使用了旧版本的Three。 js库没有任何变化。我发现了示例whit导入的三个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 plugin 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功能。

如果有帮助，请告诉我！

在React

1 个答案: