stl-viewer/react/containers/App.js

A component for viewing an STL object from a given URL by utilizing Three.js

import React, { Component } from 'react';
import STLViewer from '../../src/STLViewer';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      color: '#FF0000',
      model: undefined
    };

    this.clickBlue = this.clickBlue.bind(this);
    this.clickRed = this.clickRed.bind(this);
  }

  clickBlue(e) {
    e.preventDefault();
    this.setState({ color: '#0000FF' });
  }

  clickRed(e) {
    e.preventDefault();
    this.setState({ color: '#FF0000' });
  }

  onChange = ({ target }) => {
    const { files } = target;
    const reader = new FileReader();
    reader.readAsArrayBuffer(files[0]);
    reader.onload = () => {
      this.setState({ model: reader.result });
    };
  };

  render() {
    return (
      <div>
        <input id="image-file" type="file" onChange={this.onChange} />
        <STLViewer
          modelColor={this.state.color}
          lights={[[0.5, 1, -1], [1, 1, 1]]}
          rotate={true}
          model={this.state.model}
        />
        <button onClick={this.clickRed}>red</button>
        <button onClick={this.clickBlue}>blue</button>
      </div>
    );
  }
}
export default App;