Three.js ~ Threex ~ Game Prototype

See: http://learningthreejs.com/blog/2012/01/17/dom-events-in-3d-space/ and https://github.com/jeromeetienne

by erick

HTML

<script src="https://raw.github.com/jeromeetienne/threex/master/threex.domevent.js"></script>
<script src="https://raw.github.com/jeromeetienne/threex/master/threex.domevent.object3d.js"></script>
<!--
Theo Armour ~ 2012-02-26 ~ MIT License

Three.js courtesy of Mr.Doob. DOM Event handler courtesey of Jerome Etienne.

Sounds - can you hear the irony? - courtesy of Intenet Explorer.

-->

CSS

/*

How long will it take you to turn all the 1,000 spheres into cigars?



This is not a game.

This is a prototype for a game.

The spheres could be birds, monsters or thought experiments.

Currently you can just rescale the objects but could delete objects and/or otherwise alter any number of attributes including visibility, rotation, position, sound and much more.

The essential points are:
- The assets are moving in full 3 point perspective
- The player is moving with (potentially) six degrees of freedom

To be continued...

*/

JavaScript

var camera, scene, renderer, geometry, material, mesh;

var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

var score = 0;
var scoreMax;
var scoreCard;

var soundPlus = new Audio('http://ie.microsoft.com/testdrive/Graphics/IEBeatz/assets/sounds/mp3/effect.mp3');
var soundMinus = new Audio('http://ie.microsoft.com/testdrive/Graphics/IEBeatz/assets/sounds/mp3/bonga.mp3');

init();
animate();

function init() {
    document.body.style.font = '12px monospace';
    document.body.style.margin = '0';
    document.body.style.overflow = 'hidden';
    document.body.style.backgroundColor = '#888';    
    
    scoreCard = document.createElement( 'div' );
    scoreCard.style.font = 'bold 36pt monospace';
    scoreCard.style.position = 'absolute';
    document.body.appendChild( scoreCard);
    
    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight);
    camera.position.z = 200;
    scene.add(camera);

    geometry = new THREE.SphereGeometry(10,8,10);
    material = new THREE.MeshNormalMaterial({ shading: THREE.SmoothShading});

    var assets = new THREE.Object3D();
    for (var i = 0; i < 1000; i++) {
        mesh = new THREE.Mesh(geometry, material);
        mesh.position.set(300 * Math.random() - 150, 300 * Math.random() - 150, 300 * Math.random() - 150);
        mesh.on('mouseover', scaleIt);
        assets.add(mesh);
    }
    scene.add(assets);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    THREE.Object3D._threexDomEvent.camera(camera);
    document.addEventListener('mousemove', onDocumentMouseMove, false);
    scoreMax = assets.children.length;
    scoreCard.innerHTML = 'How many cigars can you make?';    
}

function scaleIt(event) {
    mesh = event.target;
    if (mesh.scale.x == 1) {
        soundPlus.play();
        mesh.scale.x =...