Drei JS – Finden Sie alle Punkte, wo ein mesh schneidet eine Ebene

Habe ich eine three.js Szene umfasst eine Ebene schneidet eine Masche. Was ich tun möchte ist bekommen ein array von Punkten für alle Orte, an denen eine Kante des Netzes durchquert die Ebene. Ich habe einen guten Blick für Lösungen und kann nicht scheinen, etwas zu finden.

Hier ist ein Bild von dem, was ich derzeit habe:

Drei JS - Finden Sie alle Punkte, wo ein mesh schneidet eine Ebene

Und hier habe ich markiert die Koordinaten, die ich bin versucht zu sammeln:

Drei JS - Finden Sie alle Punkte, wo ein mesh schneidet eine Ebene

Ob jemand kann mich in die richtige Richtung, das würde am meisten geschätzt.

Dank,

S

InformationsquelleAutor user1961104 | 2017-02-20



One Reply
  1. 25

    Dies ist nicht die ultimative Lösung. Dies ist nur ein Punkt, wo man aus starten.

    UPD: Hier ist eine Erweiterung von dieser Antwort, wie form Konturen aus gegebenen Punkte.

    Außerdem ist es gemäß diese Frage ALSO mit tollen anwers von WestLangley und Lee Stemkoski über die .localToWorld() Methode der THREE.Object3D().

    Nehmen wir an, Sie wollen zu finden, die Schnittpunkte der gewöhnlichen geometrie (zum Beispiel THREE.DodecahedronGeometry()).

    Drei JS - Finden Sie alle Punkte, wo ein mesh schneidet eine Ebene

    Die Idee:

    1. THREE.Plane() hat die .intersectLine ( line, optionalTarget ) Methode

    2. Einem Netz enthält Flächen (THREE.Face3())

    3. Jedes Gesicht hat a, b, c Eigenschaften, wo die Indizes der Eckpunkte gespeichert sind.

    4. Wenn wir wissen, dass die Indizes der Scheitelpunkte, wir können Ihnen aus der fülle der vertices

    5. Wenn wir wissen, dass die Koordinaten der Eckpunkte von einem Gesicht können wir den Bau von drei THREE.Line3() Objekte

    6. Wenn wir drei Zeilen, können wir überprüfen, ob unser Flugzeug schneidet Sie.

    7. Wenn wir einen Schnittpunkt, dann bewahren wir es in einem array.

    8. Wiederholen Sie die Schritte 3 – 7 für jede Seite des mesh

    Einige Erklärung mit code:

    Wir haben plane die THREE.PlaneGeometry() und obj die THREE.DodecahedronGeometry()

    So, lassen Sie uns ein 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);

    Hier drei Eckpunkte jeder Fläche von plane koplanar sind, so können wir erstellen mathPlane aus, indem Sie die .setFromCoplanarPoints() Methode.

    Dann werden wir in einer Schleife durch Gesichter unserer 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);
      });

    wo

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

    und

    function setPointOfIntersection(line, plane) {
      pointOfIntersection = plane.intersectLine(line);
      if (pointOfIntersection) {
        pointsOfIntersection.vertices.push(pointOfIntersection.clone());
      };
    }

    Am Ende werden wir unsere Punkte sichtbar:

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

    jsfiddle Beispiel. Drücken Sie die Taste, um die Punkte der Schnittpunkt zwischen der Ebene und den Dodekaeder.

    • Schön. Könnte genauso gut die Punkte verbinden… jsfiddle.net/8uxw667m/4
    • Ja, toll! Ich habe wirklich vergessen, solch eine offensichtliche optische Sache. Danke!
    • schöne Lösung. Ich als darüber, wie Sie sich entscheiden, ein Punkt(durchschnitten Punkt) zwischen zwei Punkten, nun, es scheint nicht notwendig.
    • Sehr schön. Wirklich zu schätzen die Erklärung.
    • du bist willkommen ) Ihre Frage ist sehr interessant )
    • Hey, deine Idee ist großartig und hat mir geholfen, eine Menge wie auch. Was wäre, wenn ich erstellen Sie eine geschlossene Form (polygon oder trianguliert Form) von diesen Punkten aus? Ich habe es versucht: ich sortiert das segment geschlossene Polygone (funktioniert nicht immer gut). Wenn der Schnitt solide Bohrungen enthält, dann beginnt der Schmerz. So gibt es die Möglichkeit einer triangulierten Form von diesen cloud-Punkte?
    • Es lohnt sich eine neue Frage;) Noch zwei Fragen. Eines ist über, wie zu finden, die Kontur ist die wichtigste Kontur, und der ein Loch in der main-Kontur. Und ein weiteres ist über, wie man erstellen Sie Formen aus den Punkten. Haben Sie schon einen Blick auf, dass ALSO Antwort darüber, wie form, Konturen von den Punkten?
    • Ja, @prisoner849 habe ich bereits umgesetzt, die Kontur, das problem ist, dass diese Segmente sind nicht so sortiert, sortierte ich diese mit einem eigenen Algorithmus, mit Werken, mit der einfache Geometrien (nur zusammenhängende Linien). Sobald ein Punkt nicht verbunden mit den anderen, dann beginnen die Probleme 🙂
    • Ich Frage heute schon eine ähnliche Frage für das zweite problem, aber kein Glück bis jetzt: stackoverflow.com/questions/48169143/…. Wie man eine Form aus der sortierten Punkte ist einfach, wie man diese Punkte, ist die schwierige Aufgabe. Es sei denn, Sie zunächst ein polygon mit dem segment und das triangulieren es.
    • Für die erste Frage (Haupt-Kontur und Löcher Kontur) ist genug, um eine point-in-poly-Algorithmus. Ein weiterer Ansatz für mich ist dies ein jsfiddle.net/wilt/qo869tb3, was ich wirklich brauche, sind die Gesichter von den beschnittenen Form in dem Beispiel in dem link. Sorry für den langen Kommentar 🙂
    • problem ist, dass diese Segmente sind nicht sortiert Wenn Sie einen Blick nehmen an, dass ALSO Antwort, dann Sie finden, dass es löst dieses Problem (die Lösung ist auf der Grundlage der aktuellen und erweitert). Es Gruppen Punkte in Konturen. Keine Segmente gibt.
    • oh … ich habe nicht gesehen, dass der Teil, den ich wirklich leitete es. OPS ^^ ja, das sieht sehr schön aus. Kann ich verwenden, die Kontur zu tun, eine Form wie diese? var shape = new THREE.Shape(); shape.triangulateShape ( contour); wenn ja, es könnte funktionieren, für ein Teil, ist aber immer noch das Problem mit den Löchern 🙂 aber vielen Dank, dass mir bewusst ist der Letzte Teil 🙂
    • hmm… um eine geometrie aus THREE.Shape() (wenn Sie bereits haben Ihre Haupt-Kontur und Löcher), die Sie verwenden können THREE.ShapeGeometry() oder THREE.ShapeBufferGeometry().

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.