Depth 3D

Example

Usage

Create your voxel art model with this tool, download by clicking the “Download” button and use the component with the downloaded json file.

<script lang="ts">
	import { VoxelArt } from 'fuchs';

	import data from '$lib/assets/model.json';
</script>

<VoxelArt {data} />

You can also pass a colorMap prop to the component to change the colors of the voxel art, e.g. like this:

<VoxelArt
	{data}
	colorMap={{
		'050505': 'var(--color-accent-50)',
		'101010': 'var(--color-accent-100)',
		'202020': 'var(--color-accent-200)',
		'303030': 'var(--color-accent-300)',
		'404040': 'var(--color-accent-400)',
		'505050': 'var(--color-accent-500)'
	}}
/>

Credits

• inspired by this article