WebGL (pt. 1) - The Scene

// the scene var scene = new THREE.Scene(); // the camera // fov: The vertical field of view. This dictates the size of the vertical space your camera's view can reach. // aspect: This is the aspect ratio you use to create the horizontal field of view based off the vertical. // near: This is the nearest plane of view (where the camera's view begins). // far: This is the far plane of view (where the camera's view ends). // https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/frustum.svg // Code for a Three.js camera and renderer // add a camera // THREE.PerspectiveCamera(fov, aspect, near, far) var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); // place the camera at z of 100 camera.position.z = 100; // add a renderer var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); // add the renderer element to the DOM so it is in our page document.body.appendChild( renderer.domElement ); // Lighting // Directional Lights: a large light from far away that shines from one direction (think of the sun). // Ambient Lights: less of a light source and more of a soft color tint for the scene. // Point Lights: think of a lightbulb - shines in every direction & has a limited range. // Spot Lights: just like a spotlight works in real life. // Hemisphere Lights: an ambient (non directional) light coming from the ceiling and floor of the scene. // Code to add Three.js lighting /* we're creating a cube to put in our scene - don't worry if you don't follow this part, we'll cover geometry and materials in future posts */ var geometry = new THREE.BoxGeometry(20, 20, 20); var material = new THREE.MeshLambertMaterial({color: 0xfd59d7}); var cube = new THREE.Mesh(geometry, material); scene.add(cube); /* we need to add a light so we can see our cube - its almost as if we're turning on a lightbulb within the room */ var light = new THREE.PointLight(0xFFFF00); /* position the light so it shines on the cube (x, y, z) */ light.position.set(10, 0, 25); scene.add(light); // on codepen -> http://codepen.io/rachsmith/pen/qbKvdd