robot1

robot1.html  [download]

<!DOCTYPE html>

<html>
<head>

<title>Comp 86 example: Robot, without animation</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() // Now in a separate lights.js file
}

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

	// First robot, position = WC origin to robot local origin
	var r = new Robot () //*1 Add two robots to scene graph
	r.position.set (0, -5, -10) //*1
	this.add (r) //*1

	// A second robot, different local origin
	r = new Robot () //*1
	r.position.set (-5, -5, -20) //*1
	r.rotation.set (0, -20 * Math.PI/180, 0) //*1
	this.add (r) //*1
    }
}

/*
 * We make a Robot out of other library objects
 */
class Robot extends THREE.Object3D {
    constructor () {
	super ()

	/*
         * Initialize some Materials we will be using
	 */
	var platform = new THREE.MeshPhongMaterial ({ color: 0x4c4c33 }) //*2 Some stock materials
	var pants = new THREE.MeshPhongMaterial ({ color: 0x0c0c4c }) //*2
	var shirt = new THREE.MeshPhongMaterial ({ color: 0xffcc80 }) //*2
	var skin = new THREE.MeshPhongMaterial ({ color: 0xffd9b3, shininess: 60 }) //*2

	/*
	 * The base
	 */
	// The bottom flat part of base
	var base = new THREE.Mesh ( //*3 Base
		new THREE.BoxGeometry (1.5, 1, 1.25), platform) //*3
	// (transform = local offset for center of box, ie 0.5 radius)
	base.position.set (0, 1/2., 0) //*3
	this.add (base) //*3

	// The column
	var column = new THREE.Mesh ( //*4 Column
		new THREE.CylinderGeometry (.4, .4, 2.5, 32, 32, false), pants) //*4
	column.position.set (0, 1.0 + 2.5/2.0, 0) //*4
	this.add (column) //*4

	/*
	 * Upper body
	 */

	// Just a tranform node, no geometry
	// ie root node for the rest of the upper body,
	// and then work from its local origin
	var upperbody = new THREE.Object3D () //*5 Upper body transform only
	upperbody.position.set (0, 1+2.5, 0) //*5
	this.add (upperbody) //*5

	// Trunk
	var trunk = new THREE.Mesh ( //*6 Trunk, added to upperbody not root
		new THREE.BoxGeometry (2, 3, 2), shirt) //*6
	trunk.position.set (0, 3/2., 0) //*6
	upperbody.add (trunk) //*6

	// Head
	var head = new THREE.Mesh ( //*7 Head
		new THREE.BoxGeometry (1, 1, 1), skin) //*7
	head.position.set (0, 3 + 1/2., 0) //*7
	upperbody.add (head) //*7

	// Right armhand
	var rightArmHand = new ArmHand (shirt, skin) //*8 Right armhand, separate object
	rightArmHand.position.set (-1.25, 3, 0) //*8
	upperbody.add (rightArmHand) //*8

	// Left armhand
	var leftArmHand = new ArmHand (shirt, skin) //*9 Left armhand, reuse object
	leftArmHand.position.set (1.25, 3, 0) //*9
	leftArmHand.rotation.set (0, Math.PI, 0) //*9
	upperbody.add (leftArmHand) //*9
    }
}

/*
 * Separate object that makes the Arm + Hand assembly
 */
class ArmHand extends THREE.Object3D { //*8
    constructor (shirt, skin) {
	super ()

	// Arm
	var arm = new THREE.Mesh ( //*8
		new THREE.BoxGeometry (0.5, 2.5, 0.5), shirt) //*8
	arm.position.set (0, -1.25, 0) //*8
	this.add (arm)

	// Finger
	var finger = new THREE.Mesh ( //*8
		new THREE.BoxGeometry (0.1, .5, .5), skin) //*8
	finger.position.set (-0.25+0.05, -2.5-0.25, 0) //*8
	this.add (finger)

	// Thumb
	var thumb = new THREE.Mesh ( //*8
		new THREE.BoxGeometry (0.1, .5, .5), skin) //*8
	thumb.position.set (0.25-0.1-0.05, -2.5-0.25, 0.) //*8
	this.add (thumb)
    }
}

</script>
</head>

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

lights.js  [download]

/*
 * Same Lights object from lights.html, now moved to separate file
 *
 * An object to hold the lights,
 * constructor just adds them to global var scene
 */
class Lights { //*1 Same Lights object as before, moved to separate file
    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)
	this.mainLight.position.set (1, 0.5, 1)
	scene.add (this.mainLight)

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

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

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