我想动态生成一个基于单纯形的图像,该图像可以很好地映射到三个.js 中的球体上,但是我遇到了两极失真的问题。这是初始地图代码:
def generate_map(seed,width=WIDTH,height=HEIGHT,xoffset=0.0,yoffset=0.0,zoom=1.0):
""" Return a simple matrix of simplex noise from 0-255."""
mapdata = []
random.seed(seed)
zoom=zoom * 100.0
for x in xrange(height):
row=[]
for y in xrange (width):
xparam=merc_x(float((x+xoffset)/zoom))
yparam=merc_y(float((y+yoffset)/zoom))
noisevalue=snoise2(xparam, yparam, NOISEOCTAVES, 0.52,2.0, height/zoom*2, width/zoom, float(seed) )
#convert 1.0...-1.0 to 255...0
pixel=int((noisevalue+1)/2*PIXEL_DEPTH-1)
cell={'height': pixel, 'x':x, 'y':y }
row.append( cell )
mapdata.append(row)
return mapdata
这会生成创建地图的数据,该地图横向平铺,但不在顶部和底部(这是理想的)。
当它被映射到三个.js 中的球体上时,就会出现问题:
return new THREE.Mesh(
new THREE.SphereGeometry(radius, segments, segments),
new THREE.MeshPhongMaterial({
map: THREE.ImageUtils.loadTexture('/worldmap.png?seed='+seed),
})
);
由于发生 UVMapping,您最终会在两极附近夹住:
.
我怀疑解决捏合问题的最简单方法是在源图像上使用墨卡托变换,但对于我的生活,我无法弄清楚如何实现它。
有没有人有什么建议?如果您想尝试一下,可以在此处找到该项目的完整源代码。
更新:结合Three.JS 球体映射示例查看维基百科上方便的UV 映射图,我认为这些是一个很好的起点......