三角形のスケーリングのためのコーナーに地形/メッシュを固定する

Question

私は2つの座標に基づいてthree.jsで矩形を作成しています。最初の座標は最初のユーザークリックのセル、2番目の座標はユーザーがカーソルをドラッグする場所です。

作成されている長方形は正しいサイズですが、最初のユーザークリックのコーナーから「拡大」したいのに対し、中央から「拡大」します。幾何学の起源を変更するためのいくつかの潜在的な解決策を試しましたが、まだ修正が見つかりませんでした。

The demo can be see here - 以下のコードを使用してください。

var startPoint = startPlace; 
    var endPoint = endPlace; 
    var zIntersect = new THREE.Vector3(startPoint.x, 0, endPoint.z); 
    var xIntersect = new THREE.Vector3(endPoint.x, 0, startPoint.z); 

    var differenceZ = Math.abs(startPlace.z - zIntersect.z); 
    var differenceX = Math.abs(startPlace.x - xIntersect.x); 
    floorGeometryNew.rotateX(-Math.PI/2); 


    var floorGeometryNew = new THREE.PlaneGeometry(differenceX, differenceZ); 
    floorGeometryNew.rotateX(-Math.PI/2); 

    var x = startPoint.x; 
    var y = startPoint.y; 
    var z = startPoint.z; 

    var voxel = new THREE.Mesh(floorGeometryNew, tempMaterial); 
    voxel.position.set(x, y, z); 

Answer 1

あなたの長方形のセンターはstartPointとendPointの中間にあり、それはそれらの平均です：

voxel.position.addVectors(startPoint, endPoint).divideScalar(2); 

アプローチ1.新しいジオメトリのあなたのサイズを変更するたびに作成することなく、長方形のアイデアは次のとおりです。

1. 両面材料交差点の現在のポイント
2. トラックの交点に平面のジオメトリの最初の頂点を設定し
3. で起動時に一度平面のメッシュを作成します。平面の幾何学的形状の最後の頂点にその値を適用し、例えば、最初と最後の頂点

の位置に応じて第二および第三の頂点を変更し、我々はmouseDownイベントにnewRectメッシュ平面を作成し、SEその瞬間にあったの交点にそのジオメトリの最初の頂点をT：

newRectGeom.vertices[0].set(onPlanePoint.x, onPlanePoint.y + .5, onPlanePoint.z); 

、その後mouseMoveに、私たちは、交差点のポイントを取得し、そのまた、我々はの値を変更し、第四（最後の）頂点に座標を適用頂点1と2：

newRect.geometry.vertices[1].set(onPlanePoint.x, newRect.geometry.vertices[0].y, newRect.geometry.vertices[0].z); 
newRect.geometry.vertices[2].set(newRect.geometry.vertices[0].x, newRect.geometry.vertices[0].y, onPlanePoint.z); 
newRect.geometry.vertices[3].set(onPlanePoint.x, onPlanePoint.y + .5, onPlanePoint.z); 

それはそれよりも音:)

jsfiddle例をsimplierです。ビルドモードをオフ - OrbitControlsを有効にします。ビルドモードオン - コントロールが無効になっている場合、長方形を描くことができます。

アプローチ2頂点を制御する代わりに、矩形の位置とスケーリングを制御できます。

newRect.position.addVectors(startPoint, onPlanePoint).divideScalar(2); 
newRect.position.y = 0.5; // to avoid z-fight 
newRect.scale.set(Math.abs(onPlanePoint.x - startPoint.x), 1, Math.abs(onPlanePoint.z - startPoint.z)) 

jsfiddle例：我々は交差点

startPoint.copy(onPlanePoint); 

のポイントとstartPointを設定しますし、我々は我々の矩形の位置とスケーリングを見つけることができますmousedownイベントで

。視覚的にも機能的にも、Approach 1と同じです。私の視点からは、Approach 2がより簡単です。

Answer 2

あなたは

voxel.position.set(x, y, z); 

を呼び出すと、あなたのメッシュの中心は、この位置にsettedされます。したがって、この位置に追加するには、四角形の幅の半分と半分を取る必要があります。これらの値は、バウンディングボックスで取得できます。

var bbox = new THREE.Box3(); 
bbox.setFromObject(voxel); 
var val = bbox.max.x - bbox.min.x;