我有一个游戏,其中有瓷砖,并且在这些瓷砖的上方有战争迷雾。我使用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,这可能会导致这种情况吗?
好的,您的代码中有问题的位是这一行:
let box = new THREE.Box3().setFromObject(hex);
顶点的位移导致更大的AABB。由于您使用AABB定位瓷砖,因此似乎整个对象的移动方式都不正确。
three.js R112