var viewport = document.getElementById( 'viewport' ), // The canvas element we're going to use
renderer = new THREE.CanvasRenderer({ canvas: viewport }), // Create the renderer
scene = new THREE.Scene, // Create the scene
camera = new THREE.PerspectiveCamera( 35, 1, 1, 1000 );
renderer.setSize( viewport.clientWidth, viewport.clientHeight );
camera.position.set( -10, 30, -200 );
camera.lookAt( scene.position ); // Look at the center of the scene
scene.add( camera );
function addLights() {
var ambientLight = new THREE.AmbientLight( 0x555555 );
scene.add( ambientLight );
var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( -.5, .5, -1.5 ).normalize();
scene.add( directionalLight );
}
function buildScene() {
var ramp_geometry= new THREE.CubeGeometry( 50, 2, 10 ),
material_red = new THREE.MeshLambertMaterial({ color: 0xdd0000, overdraw: true }),
material_green = new THREE.MeshLambertMaterial({ color: 0x00bb00, overdraw: true });
var ramp_1 = new THREE.Mesh( ramp_geometry, material_red );
ramp_1.position.set( -20, 25, 0 );
ramp_1.rotation.z = -Math.PI / 28;
scene.add( ramp_1 );
var ramp_2 = new THREE.Mesh( ramp_geometry, material_red );
ramp_2.position.set( 25, 5, 0 );
ramp_2.rotation.z = Math.PI / 16;
scene.add( ramp_2 );
var floor = new THREE.Mesh(
new THREE.PlaneGeometry( 100, 50 ),
material_red
);
floor.position.y = -15;
scene.add( floor );
}
addLights();
buildScene();
renderer.render( scene, camera );
<canvas id="viewport" width="600" height="600"></canvas>
External resources loaded into this fiddle: