Noise Blink
by jmchen
HTML
<div id="info">Press B to Blink</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 {
overflow: hidden;
}
JavaScript
var camera, scene, renderer, geometry, material, light, controls;
var upLid, loLid;
var angle = 0;
var sign = 1;
var keyboard = new KeyboardState();
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 150;
scene.add(camera);
var pupil = new THREE.Mesh(new THREE.SphereGeometry(10, 20, 20),
new THREE.MeshBasicMaterial({
color: 0x000000
}));
pupil.position.set(0, 0, 9);
scene.add(pupil);
var eyeball = new THREE.Mesh(new THREE.SphereGeometry(18, 20, 20),
new THREE.MeshBasicMaterial({
color: 0xffffff
}));
scene.add(eyeball);
geometry = new THREE.SphereGeometry(20, 12, 12, 0, Math.PI);
material = new THREE.MeshLambertMaterial();
upLid = new THREE.Mesh(geometry, material);
upLid.rotation.x = -Math.PI / 2;
loLid = upLid.clone();
loLid.rotation.x = Math.PI / 2 + 0.25;
scene.add(upLid);
scene.add(loLid);
light = new THREE.PointLight(0xffffff);
light.position.set(100, 300, 200);
scene.add(light);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x888888);
controls = new THREE.OrbitControls(camera, renderer.domElement);
document.body.appendChild(renderer.domElement);
setInterval (randomBlink, 500);
}
function randomBlink () {
var toss = Math.random();
if (toss > 0.5) blink();
}
function blink() {
angle += sign * 0.11;
if (angle > 0.75) sign *= -1;
if (angle < 0) {
sign = 1;
} else {
setTimeout(blink, 10);
}
}
function animate() {
controls.update();
keyboard.update();
if (keyboard.down("B")) {
console.log('blink');
setTimeout(blink, 0);
}
upLid.rotation.x = -(Math.PI / 2 + 0.5) + angle;
requestAnimationFrame(animate);
render();
}
function render()...