3D模型渲染器组件未加载文件

Question

我正在为我正在开发的Web应用程序开发一个功能，该功能包含.obj模型查看器。问题是我真的不知道如何使用three.js库，因此我决定使用一个依赖项来完成技巧，我正在使用this one。基本上，我要做的是使文件内容处于redux状态，该状态最初是由后端请求获得的，因此，我最终使用了state变量，并将它的组件属性传递给#Makes the character shrink def shrink(): a, b, c = player.shapesize() if a > 1: a = a - 1 b = b - 1 c = c - 1 player.shapesize(a, b, c) print(a, b, c) else: print(a, b, c) return 组件，但是尝试加载时出现此错误： https://pasteboard.co/Jtdkigq.png https://pasteboard.co/JtdkPoRk.png

这是前端代码：

<OBJModel />

这是向后端发出请求的操作功能：

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

这是从存储文件的Cloud Storage中下载文件的控制器：

export const getModel = (id) => {
  return async (dispatch) => {
    const config = {
      onDownloadProgress: function (progressEvent) {
        let percentCompleted = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        );
        document.querySelector(
          '#modal-upload-progress'
        ).innerHTML = `${percentCompleted}%`;
        document.querySelector(
          '#upload-bar'
        ).style.width = `${percentCompleted}%`;
        document
          .querySelector('#upload-bar-indicator')
          .setAttribute('data-percent', `${percentCompleted}`);
      },
    };

    const response = await axios.get(
      `https://hushpuppys-3d-hub-api.herokuapp.com/api/v1/modelfiles/${id}.obj`,
      config
    );

    document.querySelector('#upload-modal').style.display = 'none';

    dispatch({ type: 'GET_MODEL', payload: response.data.data });
  };
};

这是从服务器下载并登录到控制台后下载文件的外观：

https://pasteboard.co/JtdpMCi.png