const React = ReactThree.React;

const {
  Renderer, 
  Scene,
  Mesh,
  PointLight,
  AmbientLight,
  PerspectiveCamera
} = ReactThree;

const {Component} = React;

class Application extends Component {
  render() {
    const cameraprops = {
      fov: 75, 
      aspect: this.props.width / this.props.height, 
      near: 1, 
      far: 5000,            
      position: new THREE.Vector3(0, 0, 10),           
      lookat: new THREE.Vector3(0, 0, 0)
    };
    
    const sphereprops = {
      position: new THREE.Vector3(0, 0,0),
      geometry: new THREE.SphereGeometry(1, 32, 32),
      material: new THREE.MeshPhongMaterial({color: 0xffffff})
    };
    
    return (
      <Renderer width={this.props.width} height={this.props.height}>
        <Scene 
          width={this.props.width} 
          weight={this.props.height} 
          orbitControls={THREE.OrbitControls} 
          camera="maincamera"
         >
          <PerspectiveCamera name="maincamera" {...cameraprops} />
          <Mesh {...sphereprops} />
          <PointLight
            position={new THREE.Vector3(2, 2, 2)} 
          />
          <AmbientLight color={0x555555} />
        </Scene>
      </Renderer>
    )
  }
}

ReactThree.render(
  <Application width={window.innerWidth} height={window.innerHeight} />,
  document.getElementById("app")
)