vox.js

MagicaVoxel model data parser and mesh builder.

Example

show mesh

update texture

with Physijs

with cannon.js

Usage

parse .vox file

html

<script src="vox.js"></script>

javascript

var parser = new vox.Parser();
parser.parse("./p10.vox").then(function(voxelData) {
    
    voxelData.voxels; // voxel position and color data
    voxelData.size; // model size
    voxelData.palette; // palette data

});

.parse(url) method returns Promise object.

build THREE.Mesh object

html

<script src="three.js"></script>
<script src="vox.js"></script>

javascript

var scene = new THREE.Scene();

var param = { voxelSize: 5 };
var builder = new vox.MeshBuilder(voxelData, param);
var mesh = builder.createMesh();
scene.add(mesh);

.createMesh(voxelData, param) method returns THREE.Mesh object.

create Image from palette

html

<script src="vox.js"></script>
<img id="img">

javascript

var textureFactory = new vox.TextureFactory();
var canvas = textureFactory.createCanvas(voxelData);
document.getElementById("img").src = canvas.toDataURL();

.createCanvas(voxelData) method returns HTMLCanvasElement.

API Reference

http://daishihmr.github.io/vox.js/docs/