Node.js 三维模型渲染器组件未加载文件

我正在为我正在开发的web应用程序开发一个功能，它包含在.obj模型查看器中。问题是，我真的不知道如何使用three.js库，所以我决定使用依赖项来实现这个技巧，我正在使用。基本上，我所做的是获取处于redux状态的文件内容，该状态最初由后端请求获得，因此，我最终使用state变量并将其作为组件属性传递给

组件，但在尝试加载时出现以下错误：

这是前端代码：

import React from 'react';
import { OBJModel } from 'react-3d-viewer';
import { connect } from 'react-redux';
import { getModel } from './../../actions';
import golem from './../../Stone.obj';

class ModelViewer extends React.Component {
  componentDidMount() {
    document.querySelector('#upload-modal').style.display = 'flex';
    let id = '';
    let slashCounter = 0;
    for (let i = 0; i < window.location.pathname.length; i++) {
      if (slashCounter === 2) {
        id = id + window.location.pathname[i];
      }
      if (window.location.pathname[i] === '/') {
        slashCounter++;
      }
    }
    this.props.getModel(id);
  }

  render() {
    if (this.props.model.previewModel)
      console.log(this.props.model.previewModel);
    return (
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        {!this.props.model.previewModel ? null : (
          <OBJModel
            height="500"
            width="500"
            position={{ x: undefined, y: -5, z: undefined }}
            src={this.props.model.previewModel}
          />
        )}
        <div id="upload-modal" className="upload-modal">
          <div className="upload-modal-content">
            <p className="upload-modal-header">
              <i
                className="exclamation circle icon"
                style={{ color: 'gray' }}
              />
              Loading model...
            </p>
            <div
              className="ui indicating progress active progress-indicator"
              id="upload-bar-indicator"
            >
              <div className="bar" id="upload-bar">
                <div className="progress" id="modal-upload-progress"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return { model: state.model };
};

export default connect(mapStateToProps, { getModel })(ModelViewer);

这是从云存储下载文件的控制器，im在云存储中存储文件：

exports.fileDownloaderController = async (req, res) => {
  try {
    const fileName = req.params.id;
    const config = {
      headers: { Authorization: credentials.authorizationToken },
    };

    await axios
      .get(
        `${credentials.downloadUrl}/file/hushpuppys-3d-hub-storage/${fileName}`,
        config
      )
      .then(function (response) {
        console.log(response.data);
        res.status(200).json({
          status: 'success',
          data: response.data,
        });
      })
      .catch(function (err) {
        console.log(err); // an error occurred
      });
  } catch (err) {
    console.log(err);
    res.status(404).json({
      status: 'fail',
      message: err.message,
    });
  }
};

这是下载的文件从服务器下载并登录到控制台时的样子：

---

是否将下载的文件放入该3D viewer组件的

src

？因为我非常确定您使用的组件需要指向该资源的URL，而不是数据。我还非常确定Component内部只会使用

newobjloader（）.load（url）

而不是

newobjloader（）.parse（url）

。如果将作为对象的字符串馈送到URL中，

XMLHttpRequest

将失败，这就是您的错误，使其成为一个很长的错误。看起来它试图导航到一个包含模型内容的URL…是的，我在看three.js文档，我在看依赖项文件，看看是否能找到一些东西，我基本上理解了src应该是一个路径字符串，正如你所说的。在这种情况下，您是否知道如何使用这些参数使其工作？考虑到文件的内容是作为字符串变量接收的，该字符串变量包含在redux状态中，可能带有Blob。。。？我不能给你实现的方法（我已经有一段时间没有这么做了），但是你应该能够将你收到的数据转换成一个

Blob

，它可以像加载URL一样加载，或者转换成URL。您需要找到的只是将任意数据转换为URL（同样，我需要对Blob进行刷新）。也许这有帮助：？

exports.fileDownloaderController = async (req, res) => {
  try {
    const fileName = req.params.id;
    const config = {
      headers: { Authorization: credentials.authorizationToken },
    };

    await axios
      .get(
        `${credentials.downloadUrl}/file/hushpuppys-3d-hub-storage/${fileName}`,
        config
      )
      .then(function (response) {
        console.log(response.data);
        res.status(200).json({
          status: 'success',
          data: response.data,
        });
      })
      .catch(function (err) {
        console.log(err); // an error occurred
      });
  } catch (err) {
    console.log(err);
    res.status(404).json({
      status: 'fail',
      message: err.message,
    });
  }
};