導入LOCAL .obj以使用React使用Three.js OBJLoader加載

Question

我正在嘗試導入要使用THREE.OBJLoader().load()函數加載的本地.obj，因為它傳遞了非本地URL（例如' http://downloadOBJfromHere.com ' ）它完美地加載了它，我的主要問題是每次我加載它時，它都必須下載obj，並且需要很長時間。

我正在用React做服務器端渲染。

import * as THREE from 'three';
import * as OBJLoader from 'three-obj-loader';
import obj from '../../../assets/obj/scene.obj';

在ComponentDidMount() ：

const loader = new THREE.OBJLoader();
        loader.load( obj,
            object => {
                scene.add(object);
            },
            xhr => {
                console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
            },
            error => {
                console.log("Error! ", error);
            }
        );

這樣做時，我在Chrome控制台中收到錯誤消息：

Unexpected line: '<!doctype html><html lang="en" data-reactroot="" data-reactid="1" data-react-checksum="1415239080"><head data-reactid="2"><meta charset="utf-8" data-reactid="3"/><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" data-reactid="4"/><title data-reactid="5">TITLE</title><link rel="stylesheet" href="/client/style.css" data-reactid="6"/></head><body data-reactid="7"><div id="root" data-reactid="8"><!-- react-empty: 1 --></div><script type="text/javascript" src="/client/vendor.js" data-reactid="9"></script><script type="text/javascript" src="/client/client.js" data-reactid="10"></script></body></html>'

（請記住，使用URL可以很好地加載）。 它向我顯示了所提供的根html。

所以我猜想它與一些用於導入文件的webpack配置有關，我正在使用file-loader加載.obj文件：

這是我的webpack配置的一部分：

const paths = {
  source: path.join(__dirname, '../source'),
  javascript: path.join(__dirname, '../source/js'),
  images: path.join(__dirname, '../source/assets/img'),
  svg: path.join(__dirname, '../source/assets/svg'),
  obj: path.join(__dirname, '../source/assets/obj'),
  build: path.join(__dirname, '../build'),
};

const rules = [
  {
    test: /\.mtl$/,
    loader: 'mtl-loader'
  },
  { test: /\.obj$/,
    loader: 'file-loader',
    include: paths.obj
  },
  {
    test: /\.(png|gif|jpg|svg)$/,
    include: paths.images,
    use: [{
      loader: 'file-loader',
      options: {
        name: 'client/assets/[name]-[hash].[ext]',
      }
    }]
  }
];

編輯添加了圖像加載器，以顯示我如何提供圖像。

這是我的服務器配置的一部分

const app = express();
const hostname = 'localhost';
const port = 8080;

app.use('/client', express.static('build/client'));

app.use((req, res) => {
  const { persistor, store } = configureStore();
  const context = {};

  const appHtml = ReactDOMServer.renderToString(
    <Provider store={ store }>
      <PersistGate persistor={ persistor }>
        <StaticRouter location={ req.url } context={ context }>
            <App />
        </StaticRouter>
      </PersistGate>
    </Provider>
  );

  const serverHtml = getServerHtml(appHtml, 'dehydratedState');
  if (context.url) {
    res.redirect(301, context.url);
  } else {
    res.status(context.status || 200).send(serverHtml);
  }
});

app.listen(port, err => callback);

Answer 1

我想到了。

在webpack配置中，我將.obj加載程序從'file-loader'更改為'url-loader'

const rules = [
  {
    test: /\.mtl$/,
    loader: 'mtl-loader'
  },
  { test: /\.obj$/,

// CHANGE HERE
    loader: 'url-loader',

    include: paths.obj
  },
  {
    test: /\.(png|gif|jpg|svg)$/,
    include: paths.images,
    use: [{
      loader: 'file-loader',
      options: {
        name: 'client/assets/[name]-[hash].[ext]',
      }
    }]
  }
];

注意：導入npm中不存在的名為OutlinePass（對於THREE.js）的腳本時，我也遇到了問題，我設法以這種方式導入它：

const script = document.createElement("script");
        script.src = require('!!url-loader!../../../assets/webgl/js/OutlinePass.js');
        script.async = true;
        document.body.appendChild(script);

腳本本身不起作用，但是我設法將其導入（我們在這里談論的是:)）

導入LOCAL .obj以使用React使用Three.js OBJLoader加載

問題描述

1 個解決方案

解決方案1
2 2018-01-19 15:41:56

導入LOCAL .obj以使用React使用Three.js OBJLoader加載

問題描述

1 個解決方案

解決方案1 2 2018-01-19 15:41:56

解決方案1
2 2018-01-19 15:41:56