voxel.css Demo

Creates a new editable voxel.css world

by qmnonic

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();

var anchorA = [0,0,0];
var anchorB = [0,10,0];

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

  var ratio = 0.6;
  for (x=0; x < 10; x++) {
    for (y=0; y < 10; y++) {
       var distToA = math.distance([x,y,0],anchorA);
       var distToB = math.distance([x,y,0],anchorB);
       if ((math.abs(distToA*0.6)-math.abs(distToB)) < 0.5) {
         editor.add(new voxelcss.Voxel(x, y, 0, 1, {
           mesh: voxelcss.Meshes.grass
         }));
       }
      

//      for (z=0; z < 10; z++) {
//  editor.add(new voxelcss.Voxel(0, 0, 0, 100, {
//    mesh: voxelcss.Meshes.grass
//  }));
//      }
    }
  }