Question

我正在尝试导入本地.obj以加载THREE.OBJLoader().load()函数，我知道它有效，因为当我传递非本地网址（例如“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]',
      }
    }]
  }
];

注意：我在导入一个名为OutlinePass（对于THREE.js）的脚本时遇到问题，这个脚本在npm中不存在，我设法以这种方式导入它：

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 个答案: