A web based voxel engine ♥. Renders HTML cuboids by stacking CSS grid layers and applying 3D transforms.

Supports colors and textures, plus cubic and dimetric projections. No canvas, no WebGL, and no fluff.

GitHub View on GitHub

Installation

Package managers

npm install @layoutit/voxcss
yarn add @layoutit/voxcss
pnpm add @layoutit/voxcss

CDN

<script type="module">
  import { createCamera, createScene, renderScene } from "https://unpkg.com/@layoutit/voxcss@0.0.1/dist/index.js";
</script>

How It Works

voxCSS builds a 3D space in the DOM using stacked CSS grids and transforms. A root element sets up perspective and transform-style: preserve-3d, while another container defines the scene bounds and receives the camera rotations (isometric by default).

Then, each level is a CSS Grid, translated along the Z axis in fixed steps. Their cells define a slice at that depth, so (x, y, z) refers to one point. Voxels are HTML cuboids: a single container plus absolutely positioned faces.

View Usage Guidelines

Hello World!

voxCSS provides lightweight components and a headless API. Use the VoxCamera component to set up the viewport (pass interactive when you want drag controls) and the VoxScene component to mount and render your voxels. A voxel scene is an array of z-layers, each holding a collection of voxels objects described by integer x, y, and z coordinates alongside metadata. 

import { VoxCamera, VoxScene } from "@layoutit/voxcss/react";

export function App() {
  const voxels = [
    { x: 1, y: 1, z: 0, color: "#f97316" }
  ];
  return (
    <VoxCamera interactive zoom={1}>
      <VoxScene voxels={voxels} rows={12} cols={12} depth={12} />
    </VoxCamera>
  );
}

Browse API Reference