How to Use

Examples for

VoxCamera exposes zoom, pan, tilt, rotation, perspective, and pointer inversion flags. VoxScene controls the 3D grid dimensions and decorations. The voxel object accepts shape, dimensions, rotation, color and textures.

VoxCamera Props

              <template>
  <VoxCamera
    interactive
    :zoom="0.65"
    :pan="0"
    :tilt="0"
    :rot-x="65"
    :rot-y="45"
  >
    <VoxScene :voxels="voxels" />
  </VoxCamera>
</template>

<script setup>
import { VoxCamera, VoxScene } from "@layoutit/voxcss/vue2";
import voxels from "./apple.json";
</script>

VoxScene Props

              <template>
  <VoxCamera>
    <VoxScene
      :voxels="voxels"
      :rows="8"
      :cols="8"
      :depth="6"
      show-walls
      show-floor
    />
  </VoxCamera>
</template>

<script setup>
import { VoxCamera, VoxScene } from "@layoutit/voxcss/vue2";
const voxels = [{ x: 4, y: 4, z: 0 }];
</script>

Dimetric Projection

With the dimetric prop, the stacking distance between layer is halved and the engine switches to ramp, wedge, spike, and flat shapes.

              <template>
  <VoxCamera zoom="1" interactive>
    <VoxScene
      :voxels="voxels"
      dimetric
      show-floor
    />
  </VoxCamera>
</template>

<script setup>
import { VoxCamera, VoxScene } from "@layoutit/voxcss/vue2";

const voxels = [
  { shape: "spike", x: 7, y: 7, z: 0, rot: 90 },
  { shape: "ramp", x: 6, y: 7, z: 0 },
  { shape: "ramp", x: 5, y: 7, z: 0 },
  { shape: "spike", x: 4, y: 7, z: 0 },
  { shape: "ramp", x: 7, y: 6, z: 0, rot: 90 },
  { shape: "flat", x: 6, y: 6, z: 0 },
  { shape: "flat", x: 5, y: 6, z: 0 },
  { shape: "ramp", x: 4, y: 6, z: 0, rot: 270 },
  { shape: "ramp", x: 7, y: 5, z: 0, rot: 90 },
  { shape: "flat", x: 6, y: 5, z: 0 },
  { shape: "flat", x: 5, y: 5, z: 0 },
  { shape: "spike", x: 2, y: 5, z: 0 },
  { shape: "ramp", x: 7, y: 4, z: 0, rot: 90 },
  { shape: "flat", x: 6, y: 4, z: 0 },
  { shape: "flat", x: 5, y: 4, z: 0 },
  { shape: "flat", x: 4, y: 4, z: 0 },
  { shape: "flat", x: 3, y: 4, z: 0 },
  { shape: "ramp", x: 3, y: 5, z: 0 },
  { shape: "ramp", x: 7, y: 3, z: 0, rot: 90 },
  { shape: "flat", x: 6, y: 3, z: 0 },
  { shape: "flat", x: 5, y: 3, z: 0 },
  { shape: "flat", x: 4, y: 3, z: 0 },
  { shape: "flat", x: 3, y: 3, z: 0 },
  { shape: "ramp", x: 2, y: 3, z: 0, rot: 270 },
  { shape: "spike", x: 7, y: 2, z: 0, rot: 180 },
  { shape: "ramp", x: 6, y: 2, z: 0, rot: 180 },
  { shape: "ramp", x: 5, y: 2, z: 0, rot: 180 },
  { shape: "ramp", x: 4, y: 2, z: 0, rot: 180 },
  { shape: "ramp", x: 3, y: 2, z: 0, rot: 180 },
  { shape: "spike", x: 2, y: 2, z: 0, rot: 270 },
  { shape: "ramp", x: 2, y: 4, z: 0, rot: 270 },
  { shape: "wedge", x: 4, y: 5, z: 0 },
  { shape: "ramp", x: 4, y: 4, z: 1 },
  { shape: "spike", x: 3, y: 4, z: 1 },
  { shape: "ramp", x: 4, y: 3, z: 1, rot: 180 },
  { shape: "spike", x: 3, y: 3, z: 1, rot: 270 },
  { shape: "spike", x: 5, y: 3, z: 1, rot: 180 },
  { shape: "spike", x: 5, y: 4, z: 1, rot: 90 },
];
</script>

Voxel Textures

              <template>
  <VoxCamera>
    <VoxScene :voxels="voxels" />
  </VoxCamera>
</template>

<script setup>
import { VoxCamera, VoxScene } from "@layoutit/voxcss/vue2";

const voxels = [
  { x: 1, y: 1, z: 0, texture: "/grass2.png" },
  { x: 2, y: 1, z: 0, texture: "/grass2.png" },
  { x: 1, y: 2, z: 0, texture: "/grass2.png" },
  { x: 2, y: 2, z: 0, texture: "/grass2.png" },
  { x: 3, y: 2, z: 0, texture: "/grass2.png" },
  { x: 4, y: 2, z: 0, texture: "/grass2.png" },
  { x: 4, y: 3, z: 0, texture: "/grass2.png" },
  { x: 4, y: 4, z: 0, texture: "/grass2.png" },
  { x: 3, y: 4, z: 0, texture: "/grass2.png" },
  { x: 2, y: 4, z: 0, texture: "/grass2.png" },
  { x: 3, y: 3, z: 0, texture: "/grass2.png" },
  { x: 3, y: 1, z: 0, texture: "/grass2.png" },
  { x: 4, y: 1, z: 0, texture: "/grass2.png" },
  { x: 1, y: 3, z: 0, texture: "/grass2.png" },
  { x: 2, y: 3, z: 0, texture: "/grass2.png" },
  { x: 1, y: 4, z: 0, texture: "/grass2.png" },
  { x: 1, y: 4, z: 1, texture: "/grass2.png" },
  { x: 1, y: 3, z: 1, texture: "/grass2.png" },
  { x: 1, y: 2, z: 1, texture: "/grass2.png" },
  { x: 1, y: 1, z: 1, texture: "/grass2.png" },
  { x: 2, y: 4, z: 1, texture: "/grass2.png" },
  { x: 2, y: 3, z: 1, texture: "/grass2.png" },
  { x: 2, y: 2, z: 1, texture: "/grass2.png" },
  { x: 2, y: 1, z: 1, texture: "/grass2.png" },
  { x: 1, y: 4, z: 2, texture: "/grass2.png" },
  { x: 1, y: 3, z: 2, texture: "/grass2.png" },
  { x: 1, y: 2, z: 2, texture: "/grass2.png" },
  { x: 1, y: 1, z: 2, texture: "/grass2.png" },
];
</script>