Missing emissive lights when loading .vox model

Hello, I imported a 3D model in .vox format using the VOXLoader found here.
The .vox model contains light emissive materials, once in the rendering of three js the lights are no longer present.

Here is the code for loading the model.

import * as THREE from 'three';
import {VOXLoader, VOXMesh} from '../vendor/jsm/loaders/VOXLoader.js';

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x408096);

const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.set(0.175, 0.075, 0.175);


const hemiLight = new THREE.HemisphereLight(0x888888, 0x444444, 1);

const dirLight = new THREE.DirectionalLight(0xffffff, 0.75);
dirLight.position.set(1.5, 3, 2.5);

const loader = new VOXLoader();
loader.load("../models/monu2.vox", function (chunks) {
  for (let i = 0; i < chunks.length; i++) {
    const chunk = chunks[i];
    const mesh = new VOXMesh(chunk);
}, undefined, function (error) {

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

I’d like to see the light emissive material shine just as in my model editor.
What am I missing ?

Do you mind sharing your VOX asset in this topic?

Sure here is the model.
monu2.vox (2.9 MB)

The editor is magicavoxel

Yes, the model is rendered black until lights are added to the scene. Looking at the source code of VOXLoader, the loader never defines the emissive properties of materials.

It’s not clear for me from the spec whether emissive material properties are supported or not. The loader just parses vertex colors.

The current screenshot from the three.js editor looks like below. How is the model rendered in MagicVoxel?

Thanks for taking time to help.

Here is the model:

and the rendering in magicavoxel:

I have noticed the emissive property but I have no idea how to set it.
It seems that the .vox model contains the lights rendering definition.
How should I load them ?

I don’t think this is possible with the VOX format. The spec does not mention any light properties.

Which format would you advice me ?
I can export in the following format:
Screenshot 2022-03-21 at 14.08.41

Is there an example in the threejs repository ?

Could you share the link to the vox format specifications ?

None of these formats can export lights.

Though it seems to mention material that could emit light in this struct voxel-model/MagicaVoxel-file-format-vox-extension.txt at 95fae4a529626fd03c77b8ada6b89547c2e731b9 · ephtracy/voxel-model · GitHub

1 Like

I believe the VOX format doesn’t export UVs from MagicaVoxel. This means that you can’t set material.emissiveMap = texture because all UVs will be [0, 0].

I ran into a similar issue, and I had to export from MagicaVoxel -> obj -> Blender -> GLTF -> Three.js because the OBJ export does give you UVs in lieu of VertexColors. These UVs map to one of 256 pixels in a color pallette for the material.map property:


This means that you could duplicate this texture, make non-emissive pixels black, and only give color to the ones you want to glow, like the new pallette below:


Now you have all your color data in the material.map and material.emissiveMap textures!

1 Like

NIT: emissive is always a color material property. If you have an emissive texture, assign it to emissiveMap.

1 Like

Yep, sorry for that oversight. Fixed!