spotlight & shadow
HTML
<div id="info">spotlight AND Shadow
<br/>Press Z to toggle</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">
</script>
<script src="http://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
CSS
#info {
position: absolute;
top: 0px;
width: 100%;
padding: 10px;
text-align: center;
color: #ffff00
}
body {
// margin: 0;
overflow: hidden;
}
JavaScript
zzzzzzzzzzzzzzzvar camera, scene, renderer, geometry, material, mesh, light, controls;
var rt, alpha, h, ly;
var boxes, angle = 0;
var keyboard = new KeyboardState(),
turn = true;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 500;
scene.add(camera);
// lamp parameters
ly = 150;
rt = 30;
h = 40;
alpha = Math.PI / 6;
var rb = rt + h * Math.tan(alpha);
geometry = new THREE.CylinderGeometry(rt, rb, h, 20, 1, true);
material = new THREE.MeshBasicMaterial({
side: THREE.DoubleSide,
wireframe: true,
color: 0xffff00
});
mesh = new THREE.Mesh(geometry, material);
mesh.position.setY(-h / 2); // so that top face is on XZ plane
lamp = new THREE.Object3D();
lamp.add(mesh);
lamp.position.setY(ly);
scene.add(lamp);
// orbiting boxes: nested object3D
// boxes {
// boxInBoxes {boxR}
// boxB
// }
boxes = new THREE.Object3D();
var boxInBoxes = new THREE.Object3D();
var boxR = new THREE.Mesh(new THREE.BoxGeometry(20, 20, 20),
new THREE.MeshLambertMaterial({
color: 0xff1234
}));
boxR.position.set(30, 0, 0);
var boxB = new THREE.Mesh(new THREE.BoxGeometry(20, 20, 20),
new THREE.MeshLambertMaterial({
color: 0x2312ff
}));
boxB.position.set(-30, 0, 0);
boxInBoxes.add(boxR);
boxes.add(boxInBoxes);
boxes.add(boxB);
scene.add(boxes);
///////////////////////////////////////////////////////////
// spotlight
light = new THREE.SpotLight(0xffffff, 1.5);
light.position.set(0, ly, 0);
light.angle = alpha;
light.exponent = 10;
scene.add(light);
light.target = boxes; // light follows the boxes
// floor
var floor = new THREE.Mesh(new THREE.PlaneGeometry(400, 400, 130, 130),
new THREE.MeshLambertMaterial());
...