Javascript 使用React导入LOCAL.obj以使用Three.js OBJLoader加载_Javascript_Reactjs_Webpack_Three.js_Objloader

Javascript 使用React导入LOCAL.obj以使用Three.js OBJLoader加载

javascript reactjs webpack three.js

Javascript 使用React导入LOCAL.obj以使用Three.js OBJLoader加载,javascript,reactjs,webpack,three.js,objloader,Javascript,Reactjs,Webpack,Three.js,Objloader,我正在尝试导入一个本地.obj以加载THREE.OBJLoader（）.load（）函数，我知道它是有效的，因为当我传递一个非本地URL（例如“”）时，它会完美地加载它，我的主要问题是，每次加载它时，它都必须下载obj，而且需要很长时间我正在使用React进行服务器端渲染 import * as THREE from 'three'; import * as OBJLoader from 'three-obj-loader'; import obj from '../../../assets/

我正在尝试导入一个本地.obj以加载

THREE.OBJLoader（）.load（）

函数，我知道它是有效的，因为当我传递一个非本地URL（例如“”）时，它会完美地加载它，我的主要问题是，每次加载它时，它都必须下载obj，而且需要很长时间

我正在使用React进行服务器端渲染

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

在

ComponentDidMount（）

中：

执行此操作时，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>'

编辑添加图像加载器以显示我如何提供图像

这是我的服务器配置的一部分

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);

const-app=express（）；
常量主机名='localhost'；
常数端口=8080；
app.use（'/client'，express.static（'build/client'）；
应用程序使用（（请求、回复）=>{
const{persistor，store}=configureStore（）；
const context={}；
const appHtml=ReactDOMServer.renderToString(
);
const serverHtml=getServerHtml（appHtml，'deterheatedstate'）；
if（context.url）{
res.redirect（301，context.url）；
}否则{
res.status（context.status | | 200）.send（serverHtml）；
}
});
监听（端口，err=>callback）；

我想出来了

在网页包配置中，我将.obj加载程序从“文件加载程序”更改为“url加载程序”

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（for THREE.js）的脚本时也遇到问题，我通过以下方式导入了它：

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

脚本本身不起作用，但我成功地导入了它（我们在这里讨论的内容：）

我找到了答案

在网页包配置中，我将.obj加载程序从“文件加载程序”更改为“url加载程序”

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（for THREE.js）的脚本时也遇到问题，我通过以下方式导入了它：

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

脚本本身不起作用，但我成功地导入了它（我们在这里讨论的内容：）

这应该可以工作，但您需要有一台在本地运行的服务器，它实际上提供静态资源。根据您在这里提供的代码片段，很难判断……我编辑了添加服务器配置，其中It app.use（'/client'，express.static（'build/client'）；这还不够吗？你在哪里运行应用程序？它是部署在云中的，在这种情况下，您需要在客户端加载obj，还是在本地运行，在这种情况下，您将从build dir加载，并且应该很快。。。如果您的客户端找不到资源，那么您应该检查浏览器开发人员工具中的“网络”选项卡，以了解它试图从何处加载资源。这应该可以工作，但您需要有一台在本地运行的服务器，该服务器实际上提供静态资源。根据您在这里提供的代码片段，很难判断……我编辑了添加服务器配置，其中It app.use（'/client'，express.static（'build/client'）；这还不够吗？你在哪里运行应用程序？它是部署在云中的，在这种情况下，您需要在客户端加载obj，还是在本地运行，在这种情况下，您将从build dir加载，并且应该很快。。。如果您的客户端找不到资源，那么您应该检查浏览器开发人员工具中的“网络”选项卡，以找出它试图从何处加载资源。