时间戳

首页 > 解决方案 > Three.js CyclinderGeometry - 在一个中修改顶点，影响另一个

javascript - Three.js CyclinderGeometry - 在一个中修改顶点，影响另一个

问题描述

我有一个游戏，上面有瓷砖和战争迷雾。我使用 CylinderGeometry 创建十六进制图块。然后我创建另一个 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;
    }
}

任何线索为什么会发生这种情况？THREE 在下面缓存一些东西吗？

这是JSFiddle

编辑：我在雾生成之前和之后倾倒了瓷砖的垂直位置并且它们匹配。我读到 Geometry 在某些时候会转换为 BufferGeometry，这会导致这种情况吗？

标签： javascriptthree.jsgeometry

解决方案

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

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

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

three.js R112

推荐阅读