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);
scene.add(camera);
const hemiLight = new THREE.HemisphereLight(0x888888, 0x444444, 1);
scene.add(hemiLight);
const dirLight = new THREE.DirectionalLight(0xffffff, 0.75);
dirLight.position.set(1.5, 3, 2.5);
scene.add(dirLight);
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);
mesh.scale.setScalar(0.0015);
scene.add(mesh);
}
}, undefined, function (error) {
console.error(error);
});
const renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
I’d like to see the light emissive material shine just as in my model editor.
What am I missing ?
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?
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 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!
