我正在使用threeJS 与Simplex 噪声算法相结合来生成50x50 平面的平铺系统。目前,我正在循环 x+y 并添加每个平面。然后我使用 Simplex 噪声算法来计算平面的四个顶点 z 位置。
我使用当前的 x/y 作为左上角的顶点 ([0]),其余的你可以在下面最初生成图块的函数中看到:
PerlinSimplex.noiseDetail(4,0.5);
x=0;
y=0;
while (x<32) {
while (y<32) {
l=(x*tilesize)+(tilesize/2);
t=(y*tilesize)+(tilesize/2);
//fScl= .07;
fScl= 1;
xx=x*fScl;
yy=y*fScl;
tl=Math.floor((PerlinSimplex.noise(xx,yy))*100);
bl=Math.floor((PerlinSimplex.noise(xx,yy-1))*100);
br=Math.floor((PerlinSimplex.noise(xx+1,yy-1))*100);
tr=Math.floor((PerlinSimplex.noise(xx+1,yy))*100);
addTile(t,l,tl,tr,bl,br);
y++;
}
y=0;
x++;
}
好的,这就是循环,然后是 addTile 函数:
function addTile(x,y,tl,tr,bl,br) {
var geo=new THREE.PlaneGeometry(tilesize, tilesize);
geo.dynamic = true;
geos.push(geo);
var plane = new THREE.Mesh(geo, col);
plane.overdraw = true;
plane.geometry.vertices[0].z=tl;
plane.geometry.vertices[1].z=tr;
plane.geometry.vertices[2].z=bl;
plane.geometry.vertices[3].z=br;
plane.geometry.computeFaceNormals();
plane.geometry.computeVertexNormals();
plane.geometry.__dirtyNormals = true;
plane.position.x=x;
plane.position.y=y;
plane.position.z=0;
scene.add(plane);
planes.push(plane);
plane.geometry.verticesNeedUpdate = true;
// changes to the normals
plane.geometry.normalsNeedUpdate = true;
}
(快速说明,我意识到我认为我不需要为每个平面都有一个新的几何图形)
好的,结果如下:
http://i.imgur.com/h4XNEYj.jpg
如您所见,顶点没有对齐。我已经尝试了很多东西,但现在完全被难住了。我很确定我将正确的顶点设置为 TL、TR 等。你能发现为什么顶点没有对齐吗?
谢谢你 :) 杰克