voxel.css Demo

Creates a new editable voxel.css world

by Hunter Larco

HTML

<script src="http://voxelcss.com/dist/voxel.js"></script>
<link rel="stylesheet" href="http://voxelcss.com/dist/voxel.css">
Click a face to add a voxel.
<br/> Right click a voxel to remove it.
<br/> Drag to orbit.
<br/> Shift and drag to pan.
<br/> Scroll to zoom.

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 lightSource = new voxelcss.LightSource(300, 300, 300, 750, 0.3, 1);
scene.addLightSource(lightSource);

var world = new voxelcss.World(scene);
var editor = new voxelcss.Editor(world);
editor.enableAutoSave();

editor.load();
if (world.getVoxels().length === 0)
  editor.add(new voxelcss.Voxel(0, 0, 0, 100, {
    mesh: voxelcss.Meshes.grass
  }));