I've been dedicating my time to crafting a voxel game in JavaScript similar to Minecraft as a way to enhance my JS/TS abilities. However, I've hit a snag.
When rendering the voxels by creating multiple faces of blocks in a BufferGeometry, there appears to be a glitched line between two faces like shown in this image.
https://i.sstatic.net/UNggT.png
Here are some snippets of my code that might shed light on where the issue is originating:
The material used:
const texture = loader.load(this.instance.ressourceMapUrl);
texture.magFilter = THREE.NearestFilter;
texture.minFilter = THREE.NearestFilter;
const material = this.blockMaterial = new THREE.MeshLambertMaterial({
map: texture,
alphaTest: 0.1,
transparent: true,
vertexColors: THREE.VertexColors
});
The BufferGeometry setup:
const geometry = new THREE.BufferGeometry();
const positionNumComponents = 3;
geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(positions), positionNumComponents));
const normalNumComponents = 3;
geometry.setAttribute('normal', new THREE.BufferAttribute(new Float32Array(normals), normalNumComponents));
const uvNumComponents = 2;
geometry.setAttribute('uv', new THREE.BufferAttribute(new Float32Array(uvs), uvNumComponents));
geometry.setIndex(indices);
geometry.colors = new Float32Array(colors);
geometry.setAttribute( 'color', new THREE.BufferAttribute( geometry.colors, 3, true) );
geometry.computeBoundingSphere();
A snippet illustrating the vertexes of a typical chunk:
[0, 12, 0, 0, 12, 1, 1, 12, 0, 1, 12, 1, 1, 12, 0, 1, 12, 1, 2, 12, 0, 2, 12, 1, 2, 12, 0, 2, 12, 1, 3, 12, 0, 3, 12, 1, 3, 12, 0, 3, 12, 1, 4, 12, 0, 4, 12, 1, 4, 12, 0, 4, 12, 1, 5, 12, 0, 5, 12...]
The order in which vertexes are utilized:
let ndx = positions.length/3;
indices.push(
ndx, ndx + 1, ndx + 2,
ndx + 2, ndx + 1, ndx + 3,
);
The values for my far and near variables:
const near = 0.101;
const far = 240
Thank you for taking the time to go through this. While it might seem like a simple question, I've been grappling with this for a week now without finding a solution online.
Wishing you a wonderful day!