THREE.JS

Question

我目前正在开发像 JavaScript 这样的体素 Minecraft 游戏来提高我的 JS/TS 技能，但我遇到了一个问题。

我通过在 BufferGeometry 中绘制块的多个面来绘制我的体素，但是在两个面之间，有一条像这张图片中那样的故障线。

以下是我的代码的某些部分，可能有助于了解问题的根源：

我的material:

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
});

我的 BufferGeometry：

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();

一个普通块的顶点样本：

[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...]

顶点按以下顺序使用：

let ndx = positions.length/3;
indices.push(
    ndx, ndx + 1, ndx + 2,
    ndx + 2, ndx + 1, ndx + 3,
);

我的远近变量：

    const near = 0.101;
    const far = 240

非常感谢您阅读本文，我知道这可能是个白痴问题，但我为此苦苦挣扎了一个星期，无法在网上找到任何解决方案。

祝你有愉快的一天。

Answer 1

我发现了问题以及如何解决它：这是来自我的纹理。由于浮点数不精确，它正在制作这些线。

为了解决这个问题，我将用于纹理的角向中心移动了 0.0001。

纹理贴图中的纹理坐标存储如下：[x1, y1 x2, y2]。我这样做了：

let uv: [number, number, number, number] = ...;
let correction = uv[0] > uv[2] ? 0.0001 : -0.0001;
uv[0] -= correction;
uv[2] += correction;
correction = uv[1] > uv[3] ? 0.0001 : -0.0001;
uv[1] -= correction;
uv[3] += correction;

感谢所有试图帮助我的人，我希望它也能帮助其他人！

THREE.JS - 两张脸相交处的毛刺线

THREE.JS - Glitched lines at two face's intersection

javascript

intersection

voxel

visual-glitch