house

house.html  [download]

<!DOCTYPE html>

<html>
<head>

<title>Comp 86 example: House</title>

<script src="libs/build/three.min.js"></script>
<script src="libs/examples/js/Detector.js"></script>
<script src="libs/examples/js/controls/OrbitControls.js"></script>
<script src="boiler.js"></script>
<script src="lights.js"></script>

<script type="text/javascript">

function makeSceneGraph () {
	scene.add (new Scene())
	lights = new Lights()
}

class Scene extends THREE.Object3D {
    constructor () {
	super ()

	// House, with appropriate origin
	var h = new House ()
	h.position.set (-8, -6, -10)
	this.add (h)
    }
}

/*
 * Foley & van Dam textbook house in Java3D,
 * a subtree with 7 nodes, one each wall or surface
 */
class House extends THREE.Object3D {
    constructor () {
	super ()

	/*
	 * Basic dimensions of the house, as constants
	 */
	House.X1HOUSE = 0; // Corner //*1 Our constants
	House.Y1HOUSE = 0; //*1
	House.Z1HOUSE = 0; //*1
	House.X2HOUSE = 16; // Oppos corner of main body, not peak //*1
	House.Y2HOUSE = 10; //*1
	House.Z2HOUSE = -24; //*1
	House.XPEAKHOUSE = 8; // Top center of peak //*1
	House.YPEAKHOUSE = 16; //*1

	/*
	 * We'll keep our own master list of the 10 vertices of the house
	 */
	var vertices = []
	vertices[0] = new THREE.Vector3 (House.X1HOUSE, House.Y1HOUSE, House.Z1HOUSE);	// Coords of vertex 0 //*2 Our vertices
	vertices[1] = new THREE.Vector3 (House.X2HOUSE, House.Y1HOUSE, House.Z1HOUSE);	// Coords of vertex 1 //*2
	vertices[2] = new THREE.Vector3 (House.X2HOUSE, House.Y2HOUSE, House.Z1HOUSE); //*2
	vertices[3] = new THREE.Vector3 (House.XPEAKHOUSE, House.YPEAKHOUSE, House.Z1HOUSE); //*2
	vertices[4] = new THREE.Vector3 (House.X1HOUSE, House.Y2HOUSE, House.Z1HOUSE); //*2
	vertices[5] = new THREE.Vector3 (House.X1HOUSE, House.Y1HOUSE, House.Z2HOUSE); //*2
	vertices[6] = new THREE.Vector3 (House.X2HOUSE, House.Y1HOUSE, House.Z2HOUSE); //*2
	vertices[7] = new THREE.Vector3 (House.X2HOUSE, House.Y2HOUSE, House.Z2HOUSE); //*2
	vertices[8] = new THREE.Vector3 (House.XPEAKHOUSE, House.YPEAKHOUSE, House.Z2HOUSE); //*2
	vertices[9] = new THREE.Vector3 (House.X1HOUSE, House.Y2HOUSE, House.Z2HOUSE); //*2

	/*
	 * Front wall of house, made up of 3 triangles, all yellow,
	 */
	var front = new THREE.Geometry ()

	// Copy our list of vertices into the geometry, so faces can use them
	front.vertices = vertices

	// Vertices for the first triangle = front wall bottom right triangle,
	// chosen from the master list
	front.faces.push (new THREE.Face3 (0, 1, 2)) //*3 Front wall

	// Vertices for the second triangle = front wall top left triangle
	front.faces.push (new THREE.Face3 (2, 4, 0)) //*3

	// Front pediment
	front.faces.push (new THREE.Face3 (2, 3, 4)) //*3

	// For lighting calculcations
	front.computeFaceNormals(); //*5 Need normal vectors for lighting

	this.add (new THREE.Mesh (front, //*3
		new THREE.MeshPhongMaterial ({ color: "yellow" }))) //*3

	/*
	 * Right wall of house, 2 triangles, green
	 */
	var right = new THREE.Geometry ()
	right.vertices = vertices
	right.faces.push (new THREE.Face3 (1, 6, 7)) //*4 Right wall
	right.faces.push (new THREE.Face3 (7, 2, 1)) //*4
	right.computeFaceNormals();
	this.add (new THREE.Mesh (right, //*4
		new THREE.MeshPhongMaterial ({ color: "green" }))) //*4

    	/*
	 * Left wall, blue
	 */
	var left = new THREE.Geometry ()
	left.vertices = vertices
	left.faces.push (new THREE.Face3 (0, 4, 9))
	left.faces.push (new THREE.Face3 (9, 5, 0))
	left.computeFaceNormals();
	this.add (new THREE.Mesh (left,
		new THREE.MeshPhongMaterial ({ color: "blue" })))

	/*
	 * Back wall of house, made up of 3 triangles, yellow
	 */
	var back = new THREE.Geometry ()
	back.vertices = vertices
	back.faces.push (new THREE.Face3 (5, 9, 7))
	back.faces.push (new THREE.Face3 (7, 6, 5))
	back.faces.push (new THREE.Face3 (7, 9, 8)) // pediment
	back.computeFaceNormals();
	this.add (new THREE.Mesh (back,
		new THREE.MeshPhongMaterial ({ color: "yellow" })))

    	/*
	 * Bottom (floor), red
	 */
	var bottom = new THREE.Geometry ()
	bottom.vertices = vertices
	bottom.faces.push (new THREE.Face3 (0, 5, 6))
	bottom.faces.push (new THREE.Face3 (6, 1, 0))
	bottom.computeFaceNormals();
	this.add (new THREE.Mesh (bottom,
		new THREE.MeshPhongMaterial ({ color: "red" })))

    	/*
	 * Left roof, red
	 */
	var lroof = new THREE.Geometry ()
	lroof.vertices = vertices
	lroof.faces.push (new THREE.Face3 (4, 3, 8))
	lroof.faces.push (new THREE.Face3 (8, 9, 4))
	lroof.computeFaceNormals();
	this.add (new THREE.Mesh (lroof,
		new THREE.MeshPhongMaterial ({ color: "red" })))

    	/*
	 * Right roof, magenta
	 */
	var rroof = new THREE.Geometry ()
	rroof.vertices = vertices
	rroof.faces.push (new THREE.Face3 (2, 7, 8))
	rroof.faces.push (new THREE.Face3 (8, 3, 2))
	rroof.computeFaceNormals();
	this.add (new THREE.Mesh (rroof,
		new THREE.MeshPhongMaterial ({ color: "magenta" })))
    }
}

</script>
</head>

<body>
<!-- Container for three.js -->
<div id="theContainer">&nbsp;</div>
</body>
</html>