Javascript Three.js CyclenderGeometry-修改一个顶点会影响另一个顶点

我有一个游戏，上面有瓷砖和战争之雾。我使用CylinderGeometry创建六角瓷砖。然后我创建另一个圆柱体几何体并将其放置在六边形瓷砖上方，新瓷砖就像战争之雾。对于雾平铺，我想将顶点随机化一点，使其看起来不那么均匀。但这样做，我遇到了一个问题，我原来的瓷砖也变得随机。我真的不明白这是怎么发生的。我也尝试过先创建雾地砖，但地面地砖也是随机的

这是我的密码：

class Tile extends THREE.Object3D 
{
    constructor ( radius, gridX, gridY, fogMaterial ) 
    {
        super();

        this.gridX = gridX;
        this.gridY = gridY;

        this.gameEntityType = 'Tile';

        let height = .25;
        let geometry = new THREE.CylinderGeometry(radius * .8, radius * .8, height, 6);
        let tileColor = this.randomColor();

        let material = new THREE.MeshToonMaterial( { color: tileColor, shininess: 10 } );
        material.flatShading = true;
        let mesh = new THREE.Mesh(geometry, material);
        this.add( mesh );

        const fogGeometry = new THREE.CylinderGeometry(radius * .8, radius * .8, height * 10, 7);
        const per = 0.25;
        const perY = 2.5;
        fogGeometry.vertices.forEach(v => 
        {
            if ( (v.x - radius) < 0.3 && (v.z - radius) < 0.3 )
            {
                v.x += map1(Math.random(), 0, 1, -per, per);
                v.y += map1(Math.random(), 0, 1, 0, perY);
                v.z += map1(Math.random(), 0, 1, -per, per);
            }
        });
        const fogMesh = new THREE.Mesh( fogGeometry, fogMaterial );
        this.add( fogMesh );

        fogMesh.position.y = 3;

        return this;
    }
}

类平铺扩展了3.Object3D
{
构造器（半径、网格、网格、材质）
{
超级（）；
this.gridX=gridX；
this.gridY=gridY；
this.gameEntityType='Tile'；
高度=0.25；
让几何体=新的三圆柱几何体（半径*.8，半径*.8，高度，6）；
让tileColor=this.randomColor（）；
让材质=新的3.MeshToonMaterial（{颜色：tileColor，光泽度：10}）；
material.flatShading=true；
设网格=新的三个网格（几何体、材质）；
添加（网格）；
const fogGeometry=新的三圆柱几何体（半径*.8，半径*.8，高度*10,7）；
常数per=0.25；
const-perY=2.5；
fogGeometry.Vertexs.forEach（v=>
{
如果（（v.x-半径）<0.3&（v.z-半径）<0.3）
{
v、 x+=map1（Math.random（），0,1，-per，per）；
v、 y+=map1（Math.random（），0，1，0，perY）；
v、 z+=map1（Math.random（），0,1，-per，per）；
}
});
const fogMesh=新的三个网格（fogGeometry，fogMaterial）；
添加（雾网）；
雾网位置y=3；
归还这个；
}
}

有没有线索说明为什么会发生这种情况？三个人在下面藏东西吗

这是你的电话号码

---

编辑：我在生成雾之前和之后转储了平铺的垂直位置，并且它们匹配。我读到几何体在某个时候被转换为缓冲几何体，这会导致这种情况吗？

好的，代码中有问题的地方是这一行：

let box = new THREE.Box3().setFromObject(hex);

顶点的位移会导致更大的AABB。由于您使用AABB定位瓷砖，因此整个对象似乎以错误的方式移动

---

three.js R112

你能试着用这个实例来演示这个问题吗？我已经修改了你的代码，但我无法重现报告的问题。@Mugen87我更新了小提琴。您可以在html窗口中的第36行输入/输出注释时看到效果。（）编辑：我以为可能是阴影什么的，但若我旋转并向下看，你们仍然可以看到瓷砖之间的分离。就这样。哈哈，我从来没有想过。非常感谢你！实际上，调试XD很困难