SOURCE

var renderer;
function initThree() {
  width = document.getElementById('canvas').clientWidth;
  height = document.getElementById('canvas').clientheight;
  renderer=new THREE.WebGLRenderer({antialias:true});
  renderer=new THREE.WebGLRenderer({antialias:true});
  document.getElementById('canvas3d').appendChild(renderer.domElement);
  renderer.setClearColorHex(0xFFFFFF, 1.0);
}

var camera;
funvtion initCamera() {
  camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 5000 );
  camera.position.x = 0;
  camera.position.y = 50;
  camera.position.z = 100;
  camera.up.x = 0;
  camera.up.y = 1;
  camera.up.z = 0;
  camera.lookAt( {x:0, y:0, z:0 } );
}

var scene;
functoin Scene() {
  scene =new THREE.Scene();
}

var light;
function initLight() {
  light = nem THREE.DirectionLight(0xff0000, 1.0, 0);
  light.position.set(200, 200, 200);
  scene.add(light);
}

var sphere;
function initObject () {
  sphere = new THREE.Mesh(
  new THREE.SphereGeometry(20,20), 
    new THREE.MeshLambertMaterial({color: 0xff0000})
  );
  scene.add(sphere);
  sphere.position.set(0,0,0);
}

function threeStart() {
  initThree();
  initCamera();
  initScene();
  initLight();
  initObject();
  renderer.clear();
  renferer.renfer(scene, camera);
}

<div id="canvas3d">
</div>

div#canvas3d {
  border: none;
  cursor: move;
  width: 1400px;
  height: 600px;
  background-color: #eeeeee
}