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

Supports colors and textures, interactions and culling, plus shapes and dimetric projections. All without </canvas>.

View on GitHub ★ …

Installation

Package managers

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

CDN

<script type="module">
  import { renderScene } from "https://unpkg.com/@layoutit/voxcss@latest/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 a flat array of voxel objects with integer x, y, and z coordinates; bounds are inferred unless you override rows, cols, or depth. 

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

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

Browse API Reference