How to load file data as src parameter

Questions
1

First of all. I’m not really using the three library directly, but instead I’m using a dependency that depends on the three library, so at the end the function parameters are the same to take into account.

To give a brief explanation, I’m basically using this dependency to have a 3d model viewer as a react component, if you check the props of the component you will see that it accepts a src property to the component, I have been checking the dependency files and I’ve figured that it is the same paramether of the OBJLoader.load() method that is referenced in the docs. So, the thing is that the actual content of the .obj file that I want to load into this component is stored in a string variable that I got from a request to the backend of the application which from its part is downloading th obj file from a cloud storage that I’m using to store said files. The console.log() of this string variable looks like this as the docs say, the url parameter should be a string that indicates a physical path for a file that is actually stored in the computer (this is the only way it has worked, static files in the client src files folder), is there a way to make this work with a string variable containing the content of the .obj file as I showed?

2

Since you already have the contents of the OBJ file in memory (in form of a string), you can directly call OBJLoader.parse() like so:

const object = new OBJLoader().parse( myStringVariable );
3

I’m trying to implement your suggestion, but I get this error, any idea why? Here is my React component code:

import React from 'react';
import * as THREE from 'three';
import OBJLoader from 'three-obj-loader';
import { OBJModel } from 'react-3d-viewer';
import { connect } from 'react-redux';
import { getModel } from './../../actions';
import golem from './../../Stone.obj';
OBJLoader(THREE);

class ModelViewer extends React.Component {
  componentDidMount() {
   //Routing related code 
    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);
  //Routing related code
  }

  render() {
    //If the string variable with the .obj file content has been downloaded/is available in the redux state, then (here I try to parse it as you suggested).
    if (this.props.model.previewModel) {
      var toRender = new OBJLoader().parse(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 }}
           //Here is where the src/url is supposed to be passed
            src={toRender}
          />
        )}
        <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>
    );
  }
}
//This is some redux related code
const mapStateToProps = (state) => {
  return { model: state.model };
};

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

Use this approach:

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';

No need to use an external npm package.