在React中使用Three.js obj-loader

在第一次嘗試中，我使用了來自node_modules的正常導入，之後甚至是小型化的lib都沒有成功。在下一步中，我使用了舊版本的Three。 js庫沒有任何改變。我發現了例子惠普導入三個obj加載器模塊，並嘗試它，仍然不知道爲什麼在輸出我得到的OBJLoader不是構造，但功能。非常感謝您的幫助。在React中使用Three.js obj-loader

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

而且packpage：

這樣

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設置

我真的進口裝載機

{  
    "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裝載機），但沒有成功。我認爲我在設置正確配置的項目時遇到了問題。我使用webpack plugin importers-loader從三個倉庫中使用obj-loader。它工作，THREE成爲obj-loader的全局，但它以錯誤結束：OBJLoader不是構造函數。即使我複製obj-loader的不同版本，仍然沒有任何幫助。這真的令人沮喪，這個錯誤信息...

如果有人可以與React，Three和ObJLoader共享項目，我會很感激。

多虧了這名男子和他的工作，我真的https://www.npmjs.com/package/three-react-obj-loader能夠進一步移動，但我仍想知道是錯誤....這我真的使用THREE.87.1陣營

主要配置16 Webpack 3.6.0

來源

2017-08-15 Martin D

我有一個類似的問題，但它看起來像你沒有正確導入。如果您已經安裝了故宮的包，你不需要用「./」這對我的作品導入：

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

OBJLoader(THREE);

然後在你的陣營類的構造方法，調用

var loader = new THREE.OBJLoader();

從那裏你應該能夠console.log(loader)並在控制檯中看到THREE.OBJLoader功能。

讓我知道這是否有幫助！

來源

2017-09-14 10:15:55 danharsanyi

在React中使用Three.js obj-loader

回答

相關問題