javascript - 将高度图应用于 three.js 中的 SphereGeometry

Question

[编辑:参见 this jsfiddle for a live example plus accompanying code ]

我试图使用 three.js 渲染出一些具有突出特征的天体。

遗憾的是，没有提供有关如何使用 threejs 应用球形高度图的示例，但他们确实提供了将高度图应用于平面的示例。

我将上述示例修改为使用 SphereGeometry(); 而不是 PlaneGeometry();

显然，球体的几何形状与平面的几何形状截然不同，在渲染结果时，球体显示为一 block 平面纹理。

飞机的高度图代码:

var plane = new THREE.PlaneGeometry( 2000, 2000, quality - 1, quality - 1 );
plane.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
for ( var i = 0, l = plane.vertices.length; i < l; i ++ ) {
    var x = i % quality, y = ~~ ( i / quality );
    plane.vertices[ i ].y = data[ ( x * step ) + ( y * step ) * 1024 ] * 2 - 128;
}

现在我猜解决方案相对简单:不是在 for 循环中映射到平面的 2d 坐标，而是必须在 3d 空间中找到球体的表面坐标。不幸的是，我并不是真正的 3d 数学专业人士，所以我在这一点上几乎停滞不前。

应用于球体的高度图示例和所有代码放在this jsfiddle 中.更新了 jsfiddle显示了一个改变的球体，但具有随机数据而不是高度图数据。

我知道您可以扭曲球体的 3d 点以生成这些表面细节，但我想使用高度图来实现。据我所知，这个 JSFiddle - 它会随机改变点以使球体具有岩石外观，但显然看起来不太自然。

编辑:以下是我希望实现的将高度图数据映射到球体所需的逻辑。

为了将数据映射到球体，我们需要将坐标从简单的球坐标系(经度 φ、纬度 θ、半径 r)映射到笛卡尔坐标(x、y、z)。正如在正常的高度映射中，(x, y) 处的数据值被映射到 z，我们将 (φ, θ) 处的值映射到 r。这种转变归结为:

x = r × cos φ × sin θ

y = r × sin φ × sin θ

z = r × cos θ

r = Rdefault + Rscale × d(φ, θ) 

参数Rdefault和Rscale可以用来控制球体的大小和上面的高度图。

Answer 1

使用 vector3 移动每个顶点:

  var vector = new THREE.Vector3()
  vector.set(geometry.vertices[i].x, geometry.vertices[i].y, geometry.vertices[i].z);
  vector.setLength(h);
  geometry.vertices[i].x = vector.x;
  geometry.vertices[i].y = vector.y;
  geometry.vertices[i].z = vector.z;

示例:http://jsfiddle.net/damienlabat/b3or4up3/