lights

lights.html  [download]

<!DOCTYPE html>

<html>
<head>

<title>Comp 86 example: Lights</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 type="text/javascript">

/*
 * Our stuff goes here, the rest of the code is in boiler.js
 */

// Global used by callbacks from HTML
var lights

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

/*
 * Same as previous example, except
 * this time we provide materials.
 */
class Scene extends THREE.Object3D {
    constructor () {
	super ()

	// First item = a box, rotated and translated
	var box = new THREE.Mesh (
		new THREE.BoxGeometry (1, 3, 1),
		new THREE.MeshPhongMaterial ({ color: "yellow" })) //*3 Give materials to your facets

	// Move it back from origin and to the right
	box.position.set (5, 0, -4)

	// Rotate it in X and Y
	box.rotation.set (45 * Math.PI/180, 30 * Math.PI/180, 0)

	// Plug it in to our scene
	this.add (box)

	// A sphere, in a different location
	var sphere = new THREE.Mesh (
		new THREE.SphereGeometry(1, 32, 32),
		new THREE.MeshPhongMaterial ({ //*3
			color: "red", shininess: 60 })) //*3
	sphere.position.set (-5, 0, -3)
	this.add (sphere)

	// A pyramid, using our subroutine below
	var pyramid = new Pyramid (new THREE.MeshPhongMaterial ({ //*3
		color: "green", shininess: 60 })) //*3
	pyramid.position.set (0, 0, -6)
	pyramid.rotation.set (0, 45 * Math.PI/180, 0)
	this.add (pyramid)
    }
}

/*
 * Same as previous example, except
 * this time, you pass us the material you want.
 */
class Pyramid extends THREE.Object3D {
    constructor (material) {
	super ()

	// Bottom Box, located slightly down
	// (relative to origin of the pyramid)
	var bot = new THREE.Mesh (
		new THREE.BoxGeometry (3, 3, 3),
		material)
	bot.position.set (0, -3/2, 0)
	this.add (bot)

	// Middle Box, slightly up
	var mid = new THREE.Mesh (
		new THREE.BoxGeometry (2, 2, 2),
		material)
	mid.position.set (0, 2/2, 0)
	this.add (mid)

	// Top box, further up
	var top = new THREE.Mesh (
		new THREE.BoxGeometry (1, 1, 1),
		material)
	top.position.set (0, 2 + 1/2, 0)
	this.add (top)
    }
}

/*
 * An object to hold the lights,
 * constructor just adds them to global var scene
 */
class Lights { //*1 Define your light(s)
    constructor () {
	// Uses typical lighting setup, like portrait or TV studio...

	// Main (key) light, directional, 
	// from 45 deg. user's right, above, bright white
	this.mainLight = new THREE.DirectionalLight ("white", 1) //*1
	this.mainLight.position.set (1, 0.5, 1) //*1
	scene.add (this.mainLight) //*2 Add to scene graph

	// Fill light, directional, from 45deg. user's left,
	// white, half as bright
	this.fillLight = new THREE.DirectionalLight ("white", 0.5) //*1
	this.fillLight.position.set (-1, 0, 1 ) //*1
	scene.add (this.fillLight) //*2

	// Ambient light, white, still less bright
	this.ambientLight = new THREE.AmbientLight (0x404040) //*1
	scene.add (this.ambientLight); //*2
    }

    // Callback from checkboxes
    pressed (state, light) { //*4 Callback from HTML checkboxes
	light.visible = state //*4
	render ()
    }
}

</script>
</head>

<body>
Main light: <input type=checkbox checked="checked"
	onclick="lights.pressed(this.checked, lights.mainLight)">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Fill light: <input type=checkbox checked="checked"
	onclick="lights.pressed(this.checked, lights.fillLight)">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Ambient light: <input type=checkbox checked="checked"
	onclick="lights.pressed(this.checked, lights.ambientLight)">

<br/>

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