Three.js CyclinderGeometry-修改一个中的顶点,影响另一个

问题描述 投票:0回答:1

我有一个游戏,其中有瓷砖,并且在这些瓷砖的上方有战争迷雾。我使用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;
    }
}

任何线索为何会发生这种情况?三层下面会缓存一些东西吗?

这里是JSFiddle

编辑:在生成雾并且它们匹配之前和之后,我转储了瓷砖的垂直位置。我读到Geometry在某个时候会转换为BufferGeometry,这可能会导致这种情况吗?

javascript three.js geometry
1个回答
0
投票

好的,您的代码中有问题的位是这一行:

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

顶点的位移导致更大的AABB。由于您使用AABB定位瓷砖,因此似乎整个对象的移动方式都不正确。

three.js R112

© www.soinside.com 2019 - 2024. All rights reserved.