I am trying to make a three.js scene with a gridded floor similar to a chess board.
The code I have manages to alter the colors of the tiles, but somehow the Z axis movement is ignored.
This is the code of the function:
`addFloor()
{
const lightColor = new THREE.Color(0xB8D0D9);
const darkColor = new THREE.Color(0xADC4CC);
const cellSize = 1000;
const countXY = 1000;
const count = countXY*countXY;
const xy0 = 0;
const geometry = new THREE.BoxGeometry( cellSize,cellSize,cellSize ); // Create plane Geometry as template
const material = new THREE.MeshBasicMaterial( {side: THREE.DoubleSide, opacity:0.6, depthWrite: false} ); // Create colored material
const floor = new THREE.InstancedMesh(geometry, material, countXY); // Create instanced mesh of template, one for each pixel
let color;
let idX = 0;
let idZ = 0;
for (let i = 0; i < count; i++) {
idX = i % countXY;
idZ = Math.floor(i / countXY);
color = (idX + idZ) % 2 === 0 ? lightColor : darkColor;
const pos = new Vector3(
xy0 + idX * cellSize,
0,
xy0 + idZ*cellSize
);
const m = new THREE.Matrix4();
m.makeTranslation(pos.x, pos.y, pos.z);
floor.setMatrixAt(i, m);
floor.setColorAt(i, color);
}
floor.instanceColor.needsUpdate = true;
floor.instanceMatrix.needsUpdate = true;
this.add(floor);
}`
The class this function is in inherits from THREE.Scene, so ‘this’ is of type Scene.
If I use the variable idX instead of idZ in the pos Vector, the tiles align themselves on a diagonal like they should in that case.
I thought it might be that the Math.floor does not correctly round down, but console.log shows it does.