ThreeJS Voxel not fixed to grid

Question

I am using the voxel painter example from the ThreeJS git repo.

I have changed it so that the voxels are bigger than the example. Instead of taking up one grid space on the X coordinate, they take up 2.

However doing this means the roll over mesh isn't fixed to the grid and instead goes over half of one on one side, and half of one on the other side.

enter image description here

Here is my code:

// In the example the geometry is set to (50, 50, 50)
self.rollOverGeo = new THREE.CubeGeometry(100, 50, 50);
self.rollOverMaterial = new THREE.MeshBasicMaterial({
        color: 0xff0000,
    opacity: 0.5,
    transparent: true
});
self.rollOverMesh = new THREE.Mesh(self.rollOverGeo, self.rollOverMaterial);

self.rollOverMesh.position = new THREE.Vector3(0, 25, 0);

Does anyone know why this is?

score 1 · Accepted Answer · answered Oct 06 '13 at 16:08

The geometry is centered at the origin in its local coordinate system. You need to translate the geometry like so:

rollOverGeo = new THREE.CubeGeometry( 100, 50, 50 );
rollOverGeo.applyMatrix( new THREE.Matrix4().makeTranslation( 25, 0, 0 ) );

cubeGeo = new THREE.CubeGeometry( 100, 50, 50 );
cubeGeo.applyMatrix( new THREE.Matrix4().makeTranslation( 25, 0, 0 ) );

three.js r.61

ThreeJS Voxel not fixed to grid

1 Answers1