Building a World - Game Development with Three.js - page 23

Finally, we'll add a floor as well:
var geo = new THREE.PlaneGeometry(2000, 2000, 20, 20);
var mat = new THREE.MeshBasicMaterial({color: 0x9db3b5, overdraw:
true});
var mesh = new THREE.Mesh(geo, mat);
mesh.rotation.x = -90 * Math.PI / 180;
scene.add(mesh);
The last two parameters to PlaneGeometry() split the plane into a 20 x 20 grid. This
prevents Three.js from optimizing away the floor if it thinks all the vertices are too
far out of view. Also, the plane is created along the x and y axes initially, so we need
to rotate it by -90 degrees to make it lie flat under the buildings.
Putting it all together now:
var camera, scene, renderer;
function setup() {
document.body.style.backgroundColor = '#d7f0f7';
setupThreeJS();
setupWorld();
requestAnimationFrame(function animate() {
renderer.render(scene, camera);
requestAnimationFrame(animate);
});
}
function setupThreeJS() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth /
window.innerHeight, 1, 10000);
camera.position.y = 400;
camera.position.z = 400;
camera.rotation.x = -45 * Math.PI / 180;
renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function setupWorld() {
// Floor
var geo = new THREE.PlaneGeometry(2000, 2000, 20, 20);
var mat = new THREE.MeshBasicMaterial({color: 0x9db3b5, overdraw:
true});
var floor = new THREE.Mesh(geo, mat);