canvas

loader / vox

What this shows

Parse a MagicaVoxel monument with VOXLoader, light it with hemisphere and directional lights, and orbit it.

Side by side with the three.js r186 original: webgl_loader_vox.html

Differences from three.js

EASEL VOXLoader builds a vertex-colored LambertMaterial mesh with per-vertex baked lighting instead of the per-pixel MeshStandardMaterial that three.js builds.
EASEL lights in display color space without the linear-to-sRGB output conversion, so mid-tones differ slightly.
Edges are aliased because EASEL has no antialiasing.

EASEL (Canvas2D)

Loading scene…

three.js r186 (WebGL)

Loading scene…

Key API excerpt

import * as EASEL from "@xsyetopz/easel";


scene.add(new EASEL.HemisphereLight(0xcccccc, 0x444444, 3));
const dirLight = new EASEL.DirectionalLight(0xffffff, 2.5);
dirLight.position.set(1.5, 3, 2.5);

scene.add(dirLight);

const result = new EASEL.VOXLoader().parse(monumentBuffer);
const mesh = result.scene.children[0];
mesh.position.y = 0;
mesh.scale.setScalar(0.0015);

scene.add(mesh);

const orbit = new EASEL.OrbitControls(camera, canvas);
orbit.minDistance = 0.1;
orbit.maxDistance = 0.5;
orbit.update();
renderer.prepare(scene, camera);
renderer.render(scene, camera);