voxel.css EventListeners Demo

Demonstrates the simplicity of voxel.css event listeners

HTML

<script src="http://voxelcss.com/dist/voxel.js"></script>
<link rel="stylesheet" href="http://voxelcss.com/dist/voxel.css">
Drag to orbit.
<br/> Shift and drag to pan.
<br/> Scroll to zoom.
<br/>
<br/>
<br/>
<label>Nothing has been clicked yet.</label>

CSS

body {
  font-family: Helvetica;
  font-size: 12px;
  line-height: 14px;
}

JavaScript

var scene = new voxelcss.Scene();
scene.rotate(-Math.PI / 8, Math.PI / 4, 0);
scene.attach(document.body);

var voxel = new voxelcss.Voxel(-100, 100, 100, 100, {
  mesh: voxelcss.Meshes.grass
});
var voxel2 = new voxelcss.Voxel(0, 100, 100, 100, {
  mesh: voxelcss.Meshes.grass
});
scene.add(voxel);
scene.add(voxel2);


voxel.addEventListener('VoxelClick', VoxelWasClicked);

voxel.addEventListener('TopClick', TopWasClicked);
voxel.addEventListener('BottomClick', BottomWasClicked);
voxel.addEventListener('FrontClick', FrontWasClicked);
voxel.addEventListener('BackClick', BackWasClicked);
voxel.addEventListener('LeftClick', LeftWasClicked);
voxel.addEventListener('RightClick', RightWasClicked);

function VoxelWasClicked() {UpdateText('Voxel was right clicked');}
function TopWasClicked() {UpdateText('Top face was clicked');}
function BottomWasClicked() {UpdateText('Bottom face was clicked');}
function FrontWasClicked() {UpdateText('Front face was clicked');}
function BackWasClicked() {UpdateText('Back face was clicked');}
function LeftWasClicked() {UpdateText('Left face was clicked');}
function RightWasClicked() {UpdateText('Right face was clicked');}

function UpdateText(text) {
  document.querySelector('label').innerHTML = text;
}