olizilla/jsbin.jayap.css

## jsbin.jayap.css
html,body,#objects {
  width: 100%; height: 100%
}
body{
  background:white;
}

## jsbin.jayap.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.min.js"></script>
</head>
<body>
  <div id="objects"></div>
</body>
</html>

## jsbin.jayap.js

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 200);
// position and point the camera to the center of the scene
camera.position.x = 0;
camera.position.y = 24;
camera.position.z = 40
camera.lookAt(scene.position);

var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xFFFFFF, 1.0));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
// renderer.shadowMapSoft = true;

// add subtle ambient lighting
var ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

// add spotlight for the shadows
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 0, 80, 9 );
spotLight.castShadow = true;
spotLight.shadowCameraVisible = true;
scene.add( spotLight );

// var directionalLight = new THREE.DirectionalLight( 0xeeeeee, 0.8 );
// directionalLight.position.set( 10, 800, 0 );
// directionalLight.castShadow = true;
// directionalLight.shadowCameraVisible = true;
// scene.add( directionalLight );

// var shapeMaterial = new THREE.MeshLambertMaterial({color: 0xeeeeee });

var shapeMaterial = new THREE.MeshBasicMaterial({
  color: 0x444444,
  wireframe:true,
  wireframeLinewidth:3,
  });

var shapes = [makeCube(), makePyramid(), makeTorus()]
shapes.forEach(function(shape, index){
  shape.position.x = (20 * index) - 20
  shape.position.y = 14;
  scene.add(shape)
})

// create the ground plane
var planeGeometry = new THREE.PlaneGeometry(70,34);
var planeMaterial = new THREE.MeshLambertMaterial(
  {color: 0xeeeeee});
planeMaterial.opacity = 1
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x=-0.5*Math.PI;
plane.position.x=0;
plane.position.y=0;
plane.position.z=0;
scene.add(plane);

// add the output of the renderer to the html element
$("#objects").append(renderer.domElement);

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
  shapes.forEach(function(s,i){
    s.rotation.x += -0.0007;
    s.rotation.y += 0.0005;
    s.rotation.z += 0.0008;
  })
}
render();

function makeCube(){
  var cubeSize = 10;
  var cubeGeometry = new THREE.CubeGeometry(cubeSize,cubeSize,cubeSize);
  var obj = new THREE.Mesh(cubeGeometry,shapeMaterial);
  obj.castShadow = true;
  obj.receiveShadow = false;
  return obj
}
function makePyramid(){
  var size = 10;
  var geometry = new THREE.TetrahedronGeometry(size);
  var obj = new THREE.Mesh(geometry, shapeMaterial);
  obj.castShadow = true;
  obj.receiveShadow = false;
  return obj
}
function makeTorus(){
  var size = 7;
  var geometry = new THREE.IcosahedronGeometry(size);
  var material = new THREE.MeshLambertMaterial({color: 0xffffff });
  var obj = new THREE.Mesh(geometry, material);
  obj.castShadow = true;
  obj.receiveShadow = false;
  return obj
}
	html,body,#objects {
	width: 100%; height: 100%
	}
	body{
	background:white;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.min.js"></script>
	</head>
	<body>
	<div id="objects"></div>
	</body>
	</html>

	var scene = new THREE.Scene();

	var camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 200);
	// position and point the camera to the center of the scene
	camera.position.x = 0;
	camera.position.y = 24;
	camera.position.z = 40
	camera.lookAt(scene.position);

	var renderer = new THREE.WebGLRenderer();
	renderer.setClearColor(new THREE.Color(0xFFFFFF, 1.0));
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.shadowMapEnabled = true;
	// renderer.shadowMapSoft = true;

	// add subtle ambient lighting
	var ambientLight = new THREE.AmbientLight(0x404040);
	scene.add(ambientLight);

	// add spotlight for the shadows
	var spotLight = new THREE.SpotLight( 0xffffff );
	spotLight.position.set( 0, 80, 9 );
	spotLight.castShadow = true;
	spotLight.shadowCameraVisible = true;
	scene.add( spotLight );

	// var directionalLight = new THREE.DirectionalLight( 0xeeeeee, 0.8 );
	// directionalLight.position.set( 10, 800, 0 );
	// directionalLight.castShadow = true;
	// directionalLight.shadowCameraVisible = true;
	// scene.add( directionalLight );

	// var shapeMaterial = new THREE.MeshLambertMaterial({color: 0xeeeeee });

	var shapeMaterial = new THREE.MeshBasicMaterial({
	color: 0x444444,
	wireframe:true,
	wireframeLinewidth:3,
	});

	var shapes = [makeCube(), makePyramid(), makeTorus()]
	shapes.forEach(function(shape, index){
	shape.position.x = (20 * index) - 20
	shape.position.y = 14;
	scene.add(shape)
	})

	// create the ground plane
	var planeGeometry = new THREE.PlaneGeometry(70,34);
	var planeMaterial = new THREE.MeshLambertMaterial(
	{color: 0xeeeeee});
	planeMaterial.opacity = 1
	var plane = new THREE.Mesh(planeGeometry, planeMaterial);
	plane.receiveShadow = true;
	plane.rotation.x=-0.5*Math.PI;
	plane.position.x=0;
	plane.position.y=0;
	plane.position.z=0;
	scene.add(plane);

	// add the output of the renderer to the html element
	$("#objects").append(renderer.domElement);

	function render() {
	requestAnimationFrame(render);
	renderer.render(scene, camera);
	shapes.forEach(function(s,i){
	s.rotation.x += -0.0007;
	s.rotation.y += 0.0005;
	s.rotation.z += 0.0008;
	})
	}
	render();

	function makeCube(){
	var cubeSize = 10;
	var cubeGeometry = new THREE.CubeGeometry(cubeSize,cubeSize,cubeSize);
	var obj = new THREE.Mesh(cubeGeometry,shapeMaterial);
	obj.castShadow = true;
	obj.receiveShadow = false;
	return obj
	}
	function makePyramid(){
	var size = 10;
	var geometry = new THREE.TetrahedronGeometry(size);
	var obj = new THREE.Mesh(geometry, shapeMaterial);
	obj.castShadow = true;
	obj.receiveShadow = false;
	return obj
	}
	function makeTorus(){
	var size = 7;
	var geometry = new THREE.IcosahedronGeometry(size);
	var material = new THREE.MeshLambertMaterial({color: 0xffffff });
	var obj = new THREE.Mesh(geometry, material);
	obj.castShadow = true;
	obj.receiveShadow = false;
	return obj
	}