2

私は ThreeJS を 4 か月間学習し、個人的なプロジェクトに適用しています。昨日、ほとんどの ThreeJS ジオメトリといくつかの CSG トリックを使用して要塞を構築することに成功しました。結果は問題ないように見えますが、私は精度が好きで、私のジオメトリはちょっと混乱しています (主に CSG 減算後)。

[質問] 2 つのジオメトリをマージし、その古い面を新しい計算された面に置き換える既知の方法があるのだろうか? 私の質問を説明するJSFiddleがあります。

[編集: フィドルを 4 番目と 5 番目のメッシュで更新]

// FIGURE 1 : Basic merged geometry
var figure1 = new THREE.Geometry();
figure1.merge(box1Geometry);
figure1.merge(box2Geometry);
figure1.merge(box3Geometry);
figure1.computeFaceNormals();
figure1.computeVertexNormals();

var mesh = new THREE.Mesh(figure1, material);
scene.add(mesh);

// FIGURE 2 : Merged geometry with merged vertices
var figure2 = figure1.clone();
figure2.mergeVertices();
figure2.computeFaceNormals();
figure2.computeVertexNormals();

mesh = new THREE.Mesh(figure2, material);

// FIGURE 3 : Expected merged geometry (less faces)
var figure3 = new THREE.Geometry();
figure3`.vertices.push(
    // manually create vertices here
);
figure3.faces.push(
    // manually create the faces here
);
figure3.computeBoundingSphere();
figure3.computeFaceNormals();
figure3.computeVertexNormals();

mesh = new THREE.Mesh(figure3, material);
scene.add(mesh);

同じメッシュを取得する 3 つの方法

  1. 左側の最初のメッシュは、3 つの boxGeometry で構成される基本的な結合ジオメトリです。
  2. 中央の 2 番目のメッシュは、mergeVertices() 関数を呼び出した後のまったく同じメッシュです。その結果、4 つの頂点が保存されます。しかし、メッシュ内の面はまだそこにあります。(私にとって) 見栄えが悪いだけでなく、これらのパーツのテクスチャリングやライティングの問題も発生します (顔の法線が本来あるべき場所にありません)。
  3. 右側の最後のメッシュは、マージ後に予想されるメッシュです。中央のボックスの下にある面を見てください。

それがテクスチャとライティングの問題につながるという事実 (JSFiddle を見てください。メッシュの内側の部分を照らします) は、これを解決するためのシンプルでよく知られた方法であるに違いないと思いますが、私はただのように感じています。大きなノブ。

この問題は、SOに関する回答が見つからない（または理解できない）場合に尋ねる別の質問に直接リンクしています（なぜ私がそれをしたいのかを理解するのに役立つかもしれません）：適用する方法はありますか各ジオメトリの各面に固有のマテリアルを作成せずに、このマージされたジオメトリにテクスチャを作成します (UV マッピングとメッシュ サイズが異なるため)。巨大な要塞の各面を手作業で行うとは想像できません...

[編集]私の質問を書いて、ThreeCSG とそのunion()機能がうまくいくことに気付きました。しかし、それが作成する頂点の混乱は好きではありません。これらのボックスのような基本的なジオメトリの場合でも、ThreeCSG は、すべてが正常なジオメトリの一部に奇妙な頂点と面を作成します。

JSFiddle を 4 番目のメッシュ (CSG) で更新しました。この単純な使用例では、予想よりも 2 つの頂点と 2 つの面があることがわかります。古い顔を保っているようです (ワイヤーフレームを見てください!)。

ThreeCSGユニオンは今のところ最良の選択肢ですか?

[編集 2]ネイティブ CSG ジオメトリで更新されたフィドル。20 個の頂点と 32 個の面だけで、期待どおりの結果が得られます。このアイデアをくれたWiltに感謝します。問題は、ポリゴンのハード コーディングに時間がかかりすぎることです (3 つのボックスのみのコードを見てください)。ポリゴンを読み込んで生成するための JSON ファイルはありません。ThreeJS ジオメトリしかありません。そのため、ThreeJS と ThreeCSG のジオメトリ間の変換を見て、変換があるとなぜ悪い結果になるのかを理解したいと考えています。

4

0 に答える 0