JSFiddle - React, Tailwind, and code Playground

by Hunter Larco

HTML

<script src="http://voxelcss.com/dist/voxel.js"></script>
<link rel="stylesheet" href="http://voxelcss.com/dist/voxel.css">
<sidebar>
  <div onclick='editor.setToolMesh(voxelcss.Meshes.dirt)'>Dirt</div>
  <div onclick='editor.setToolMesh(voxelcss.Meshes.grass)'>Grass</div>
  <div onclick='editor.setToolMesh(voxelcss.Meshes.water)'>Water</div>
  <div onclick='editor.setToolMesh(voxelcss.Meshes.treeTrunk)'>Tree Trunk</div>
  <div onclick='editor.setToolMesh(voxelcss.Meshes.treeLeaves)'>Tree Leaves</div>
</sidebar>

CSS

sidebar{
  position:absolute;
  top:0px;
  left:0px;
  z-index:1;
  padding:6px;
}
sidebar div{
  padding:2px 6px;
  margin:4px;
  background:rgb(255,255,255);
  border-radius:4px;
  font-size:12px;
  cursor:pointer;
  text-align:center;
  font-family:Helvetica;
}
sidebar div:hover{
  background:rgb(230,230,230);
}

JavaScript

/*
 * Drag to Orbit
 * Scroll to Zoom
 * Shift + Drag to Pan
 * Click a face to add a voxel
 * Right-click to remove a voxel
*/

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

var world = new voxelcss.World(scene);
window.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
	}));

editor.setToolMesh(voxelcss.Meshes.grass);