Learn Three.js

var width = 400;
var height = 200;
var scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);
var camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 1000);
 
var renderer = new THREE.WebGLRenderer({alpha: true});
renderer.setSize(width, height);

var geometry = new THREE.SphereGeometry(20, 18, 18);

var material = new THREE.MeshPhongMaterial(
	{
		color: 0x555555,
		emissive: 0x0077cc,
		wireframe: false,
	}
);
var sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

var color = 0xffffff;
var intensity = 1;
var light = new THREE.DirectionalLight(color, intensity);
light.position.set(0, 0, 3);
light.target.position.set(-1, -2, 0);
scene.add(light);
scene.add(light.target);
 
camera.position.z = 35;
camera.position.x = 0;

var axis = new THREE.Vector3(1, 0, 0);
var dist = 2;
sphere.translateOnAxis(axis, dist);

renderer.render(scene, camera);

document.body.appendChild(renderer.domElement);