JSON (or GLTF) Loader for Three.js in React

Questions
,
15

Hello, I am trying to load an STL file into my React app but could not figure out how to do so with the above responses. I have created my app with create-react-app. I also could not find a webpack config file. I have imported the NPM three and three-stl-loader.

I am suspecting the url I am using is not accessing my stl file. Does anyone know how I can access the STL file? I have place file “box.stl” in the public folder and the same folder as my component to atleast get it to show but still no results. Does anyone have an idea how to get my stl file to show?

import React, { Component } from "react";
import * as THREE from "three";
var STLLoader = require("three-stl-loader")(THREE);
var OrbitControls = require("three-orbit-controls")(THREE);

class ThreeDViewer extends Component {
  componentDidMount() {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1,
      1000);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    new OrbitControls(camera, renderer.domElement);
    this.mount.appendChild(renderer.domElement);

    var loader = new STLLoader();
    loader.load("./box.stl", geometry => {
      geometry.center();
      var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      var mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);
    });

    camera.position.z = 5;
    var animate = function() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    };
    animate();
  }

  render() {
    return <div ref={ref => (this.mount = ref)} />;
  }
}
export default ThreeDViewer;