web-dev-qa-db-ja.com

3つのJS-メッシュが平面と交差するすべてのポイントを検索します

メッシュと交差する平面を含むthree.jsシーンを作成しました。私がしたいのは、メッシュのエッジが平面と交差するすべての場所のポイントの配列を取得することです。解決策をよく見ましたが、何も見つからないようです。

ここに私が現在持っているものの画像があります：

enter image description here

そして、ここで私が集めようとしている座標を強調しました：

enter image description here

誰かが私を正しい方向に向けることができれば、それは最もありがたいことです。

おかげで、

S

javascript3dthree.js
14
user1961104

これは究極の解決策ではありません。これは、出発点に過ぎません。

UPD： ここ はこの回答の拡張であり、与えられた点から輪郭を形成する方法です。

また、それは this SO question と呼ばれ、WestLangleyとLee Stemkoskiからの.localToWorld()メソッドのTHREE.Object3D()についての素晴らしい回答があります。 。

通常のジオメトリ（たとえば、THREE.DodecahedronGeometry()）の交点を検索するとします。

enter image description here

アイデア：

  1. THREE.Plane()には.intersectLine ( line, optionalTarget )メソッドがあります

  2. メッシュには面が含まれています（THREE.Face3()）

  3. 各面には_a, b, c_プロパティがあり、頂点のインデックスが格納されます。

  4. 頂点のインデックスがわかっている場合、verticesの配列からそれらを取得できます

  5. 面の頂点の座標がわかっている場合、3つのTHREE.Line3()オブジェクトを作成できます

  6. 3本の線がある場合、平面がそれらと交差するかどうかを確認できます。

  7. 交点がある場合は、配列に格納できます。

  8. メッシュの各面に対して手順3〜7を繰り返します。

コードによるいくつかの説明：

planeはTHREE.PlaneGeometry()であり、objはTHREE.DodecahedronGeometry()です

それでは、THREE.Plane()を作成しましょう：

_var planePointA = new THREE.Vector3(),
  planePointB = new THREE.Vector3(),
  planePointC = new THREE.Vector3();

var mathPlane = new THREE.Plane();
plane.localToWorld(planePointA.copy(plane.geometry.vertices[plane.geometry.faces[0].a]));
plane.localToWorld(planePointB.copy(plane.geometry.vertices[plane.geometry.faces[0].b]));
plane.localToWorld(planePointC.copy(plane.geometry.vertices[plane.geometry.faces[0].c]));
mathPlane.setFromCoplanarPoints(planePointA, planePointB, planePointC);
_

ここでは、planeの任意の面の3つの頂点が同一平面上にあるため、.setFromCoplanarPoints()メソッドを使用して、それらからmathPlaneを作成できます。

次に、objの面をループします。

_var a = new THREE.Vector3(),
  b = new THREE.Vector3(),
  c = new THREE.Vector3();

  obj.geometry.faces.forEach(function(face) {
    obj.localToWorld(a.copy(obj.geometry.vertices[face.a]));
    obj.localToWorld(b.copy(obj.geometry.vertices[face.b]));
    obj.localToWorld(c.copy(obj.geometry.vertices[face.c]));
    lineAB = new THREE.Line3(a, b);
    lineBC = new THREE.Line3(b, c);
    lineCA = new THREE.Line3(c, a);
    setPointOfIntersection(lineAB, mathPlane);
    setPointOfIntersection(lineBC, mathPlane);
    setPointOfIntersection(lineCA, mathPlane);
  });
_

どこ

_var pointsOfIntersection = new THREE.Geometry();
...
var pointOfIntersection = new THREE.Vector3();
_

そして

_function setPointOfIntersection(line, plane) {
  pointOfIntersection = plane.intersectLine(line);
  if (pointOfIntersection) {
    pointsOfIntersection.vertices.Push(pointOfIntersection.clone());
  };
}
_

最後に、ポイントを表示します。

_var pointsMaterial = new THREE.PointsMaterial({
    size: .5,
    color: "yellow"
  });
var points = new THREE.Points(pointsOfIntersection, pointsMaterial);
scene.add(points);
_

jsfiddle の例。そこにあるボタンを押して、平面と12面体の間の交点を取得します。

29
prisoner849