インプレースメッシュの位置を補正せずに一方向にジオメトリをスケーリングする

Question

ユーザーは8つの場所（4つのコーナー+ 4つのエッジ）の1つでドラッグして（投影された）平面のサイズを変更できるようにしようとしています）。 このサイズ変更は、ドラッグする方向にのみサーフェスをスケール/ストレッチすることになっているので、このexampleのように同時に2つの反対方向にスケールするので、three.jsのデフォルトのスケール機構は使用できません。

私が読んで多くのことを試してみた

、特にこれら2つのポスト：私はこの

// preparing to resize into -x direction aka "left edge" 
// moving the geometry center to the right edge 
mesh.geometry.translate(width/2, 0, 0); 
mesh.geometry.scale(scaleX, 1, 1); 
// moving the geometry center back to the middle 
// as more resizing might happen, into another direction, as per comment here: 
// https://stackoverflow.com/questions/26817717#comment74469004_26818522 
mesh.geometry.translate(-(width/2 * scaleX), 0, 0); 

になってしまったものを後

• Scaling a Three.js geometry only up
• Scaling a geometry in one direction with top as reference in threejs

結果は私が期待するものではありません： T彼は2つの反対方向に再度スケーリングが起こるので、翻訳は互いに相殺されます。したがって、原点または中心点が右端に置かれている間にスケーリングが起こらないか、私の最後に誤解があります。一方、

これは

mesh.scale.set(scaleX, 1, 1); 
mesh.position.x = (-width/2); 

正常に動作します。しかし、それは本当に何度も何度も、メッシュの位置をリセットするハック感じている - また、私はメッシュを拡大縮小すると、このようにパフォーマンスが低いことを読んだことがあると思いました変換はフレームごとに再適用されます（ただし、これは間違っている可能性があります：Three.js - Scale model with scale.set() or increase model size?）。一方、下にあるジオメトリの変換はデータに焼き付けられます。

私もTransformControlsのソースを見ていましたが、私たちが望むやり方ではうまくいかず、四分の一の概念が完全にわからなくなってしまったため、私には分かりませんでした。

私の質問はこれですメッシュの位置を修正せずに一方向のリサイズを行う方法はありますか？

Answer 1

あなたが発見したように、この問題には2つの方法があります。

1. スケールgeometry。
2. Meshをスケールし、中心位置を調整します。

最初に、私が推奨していないオプション1について説明しましょう。なぜなら、後ほど説明します。

ジオメトリを一方向に線形にスケーリングするには、すべての頂点をスケーリングの方向に移動する必要があります。したがって、頂点ごとに、頂点が受け取るスケーリングの量に基づいて新しい位置を計算する必要があります（スケーリング側に最も近い頂点が最も移動し、中央の頂点が半分移動し、反対側の頂点が移動します）スケーリングの動きはほとんどありません）。ライブスケーリングを実行している場合は、潜在的に多くの計算が行われます。

ここで、オプション2を検討してください。メッシュ全体のマトリックスを変更します（これには新しい位置が含まれます）。それでおしまい。マトリックスはGPUに送られ、残りはGPUに送られます。あなたが知っていると確信しているように、GPUは数学（行列演算を含む）に非常に優れており、JavaScriptは...それほど良くない、または少なくとも遅くなります。行列操作を実行することは、GPUには何もありません。

ないに言及し、代わりに変換行列で、あなたは常に頂点の世界の位置を取得することができます。

vertexCopy.set(myMesh.geometry.attributes.position.getX(index), 
    myMesh.geometry.attributes.position.getY(index). 
    myMesh.geometry.attributes.position.getZ(index)); 
myMesh.localToWorld(vertexCopy); 

はあらすじ：

どちらかといえば、ジオメトリを操作する以上であります "ハッキー"変換行列を操作するよりも。それは正方形の各ピクセルを描画する方法をシステムに指示しているようなものです。正方形を描画するように指示するだけです。

1. ジオメトリを更新するには計算コストがかかります。後で頂点が本質的に「ベーク」されても、次の操作でより多くの計算がトリガーされます。

2. メッシュの行列を更新することは簡単であり、計算上の複雑さをGPUに委ねるため、その情報を処理するのに問題はありません。

あなたはあなたの要件に合う方の方法を追求することを歓迎しているが、あなたは与えられた情報から、私は非常に多くのオプション2.

第三のアイデアをお勧めします：

あなたをあなたの望む効果を達成するためにモルフターゲットを潜在的に使用することができますが、私はあまり経験がありません。 Here's an example of cube being deformed by morphing.あなたが探している効果を達成するには、複数のモーフターゲットに影響を与える必要がありますが、モーフ操作はGPU上で行われるため、ジオメトリを操作するよりもおそらく優れています。