#app
View Compiled
body {
  margin: 0;
}
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")
)
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js
  2. https://cdn.rawgit.com/sasha240100/897132e593fa6cc778fa73b94e8e321f/raw/8ced090efaaf78baec1e20bef281f514afee650e/react-three.js
  3. https://cdn.rawgit.com/mrdoob/three.js/3cb51d86/examples/js/controls/OrbitControls.js