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
    animate
    :zoom="0.65"
    :pan="0"
    :tilt="0"
    :rot-x="65"
    :rot-y="45"
  >
    <VoxScene :voxels="voxels" />
  </VoxCamera>
</template>

<script setup lang="ts">
import { VoxCamera, VoxScene } from "@layoutit/voxcss/vue";
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/vue";
const voxels = [{ x: 4, y: 4, z: 0 }];
</script>

Dimetric Projection

With the dimetric prop, the stacking distance between layers is halved to 25px.

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

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

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: "cube", x: 6, y: 6, z: 0 },
  { shape: "cube", 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: "cube", x: 6, y: 5, z: 0 },
  { shape: "cube", 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: "cube", x: 6, y: 4, z: 0 },
  { shape: "cube", x: 5, y: 4, z: 0 },
  { shape: "cube", x: 4, y: 4, z: 0 },
  { shape: "cube", 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: "cube", x: 6, y: 3, z: 0 },
  { shape: "cube", x: 5, y: 3, z: 0 },
  { shape: "cube", x: 4, y: 3, z: 0 },
  { shape: "cube", 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/vue";

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>