4

[編集:ライブの例と付随するコードについては、この jsfiddle を参照してください]

three.js を使用して、顕著な特徴を持ついくつかの天体をレンダリングしようとしています。

残念ながら、threejs で球状の高さマップを適用する方法の例は提供されていませんが、高さマップが平面に適用される例はあります。

上記の例を使用して、 a のSphereGeometry();代わりに aを使用するように変更しましたPlaneGeometry();

明らかに、球のジオメトリは平面のジオメトリとは大きく異なり、結果をレンダリングすると、球はテクスチャの平らな部分として表示されます。

平面の高さマップ コード:

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 ループで平面の 2 次元座標にマッピングする代わりに、3 次元空間で球の表面座標を見つける必要があります。残念ながら、私は 3D 数学の専門家ではないので、この時点でかなり行き詰っています。

球に適用された高さマップの例とすべてのコードは、この 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 を使用して、球のサイズとその高さマップを制御できます。

4

2 に答える 2

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/

于 2016-04-28T16:01:32.553 に答える
0

2D マップを 3D 球体サーフェスに適用する場合は、球体の UV を使用する必要があります。幸いなことに、UV はTHREE.SphereGeometryデフォルトで付属しています。

facesただし、UV は面ごとに保存されるため、配列を反復処理する必要があります。

ジオメトリの各面について:

  • FaceVertexUvs関連する頂点ごとに、配列内の対応する UV 値を読み取ります。
  • その UV 位置を使用して高さマップ値を読み取ります。
  • その値だけ頂点法線に沿って頂点をシフトします。faces配列は頂点インデックスを提供します。これを使用して配列にインデックスを付け、vertices頂点位置を取得/設定できます。

これがすべて完了したら、 に設定verticesNeedUpdateしtrueて頂点を更新します。

于 2013-08-24T08:56:34.853 に答える