“This is the seventh day of my participation in the First Challenge 2022.

I. Problem description

In A three-dimensional coordinate system, given the coordinates of three points, such as A :(0, 0, 0), B :(20, 0, 0), and c :(0, 40, 0), what is the area of the triangle formed by these three points?

2. How to solve the problem

When I got this question, I was a little confused at first, and I didn’t know how to start. Later, when I calmed down and thought about it carefully, I found that the solution could be divided into the following parts:

Triangle area solution in two – dimensional coordinate system

In A two-dimensional coordinate system, given the coordinates of three points, such as A :(0, 0), B :(20, 0), and c :(0, 40), what is the area of the triangle formed by these three points?

A: If we know the base A and the height H of the triangle, then I can use the formula S=ah/2, or if we know the two sides A and B and the Angle C between them, then we can use the formula S=1/2ab sinc, which is elementary school math, but if we know the vectors A and B, we can use the cross product, we can use the formula: S = 1/2 | a | b | | sin < | a | b | | >, because in the coordinate system, so we can use this formula the problem solving:

Vector A = (20, 0); Vector b = (0, 40); Area is equal to: 1/2 * (20, 0) * (0, 40) = 400;

Solution of triangular area in three – dimensional coordinate system

With that in mind, we found that we could use the cross product of a vector to find the Angle and the area. When I found that threejs had vectors in it, I decided to use Threejs to solve this problem.

A: Vector A = (20, 0, 0); Vector b = (0, 40, 0); Area is equal to: 1/2 * (20, 0, 0) * (0, 40, 0) = 400;

Three, coding implementation

  1. First, set the coordinates p1, P2, p3 of the triangle
// The three points of the triangle are p1, P2, p3
      const p1 = new THREE.Vector3(0.0.0); // Point 1 coordinates
      const p2 = new THREE.Vector3(20.0.0); // Point 2 coordinates
      const p3 = new THREE.Vector3(0.40.0); // Point 3 coordinates
Copy the code
  1. P1, p2, let’s say we have a vector v1
// The points p1 and p2 define a vector
      const v1 = p1.clone().sub(p2);
Copy the code
  1. The points P1 and p3 define a vector v2
// the points p1 and p3 define a vector
      const v2 = p1.clone().sub(p3);
Copy the code
  1. Returns the cosine of the Angle between vertex P1 of the triangle
const CosineValue = v1.dot(v2) / (v1.length() * v2.length());
Copy the code
  1. Returns the Angle of the triangle vertex P1
Math.acos(CosineValue) * 180) / Math.PI

6.Calculation of triangular area` ``js areaOfTriangle( p1: THREE.Vector3, p2: THREE.Vector3, p3: THREE.Vector3 ): number { let v1 = new THREE.Vector3(); let v2 = new THREE.Vector3(); V1 = p1.clone().sub(p2); v2 = p1.clone().sub(p3); const v3 = new THREE.Vector3(); CrossVectors (v1, v2); const s = v3.length() / 2; return s; }Copy the code

6. See the results

We conclude that the cosine of the Angle between the two sides of the triangle is 0, the Angle between the two sides of the triangle is 90, and the area of the triangle is 400.

Four, thinking

The area of any triangle

So with this triangle formula, we can figure out the area and Angle of any triangle, for example

const p1 = new THREE.Vector3(0.0.20); // Point 1 coordinates
      const p2 = new THREE.Vector3(20.0.0); // Point 2 coordinates
      const p3 = new THREE.Vector3(0.40.0); // Point 3 coordinates
Copy the code

What is the area of the triangle p1, P2,p3?

A: The cosine value of the Angle between the two sides of a triangle is 0.3162277660168379, the Angle between the two sides of a triangle is 71.56505117707799, and the area of the triangle is 600.

The area of any rectangle

If you know the coordinates of cuboid P1, P2, P3,p4 to find the area?

const p1 = new THREE.Vector3(0.0.20); // Point 1 coordinates
      const p2 = new THREE.Vector3(20.0.0); // Point 2 coordinates
      const p3 = new THREE.Vector3(0.40.0); // Point 3 coordinates
      const p4 = new THREE.Vector3(20.40.0); // Point 4 coordinates
Copy the code

A: A cuboid is two triangles, so our formula is as follows:

/ / rectangle
  areaOfCuboid(
    p1: THREE.Vector3,
    p2: THREE.Vector3,
    p3: THREE.Vector3,
    p4: THREE.Vector3
  ): number {
    let v1 = new THREE.Vector3();
    let v2 = new THREE.Vector3();
    let v3 = new THREE.Vector3();
    let v4 = new THREE.Vector3();
    // Compute the vector formed by two edges of two vertices
    v1 = p1.clone().sub(p2);
    v2 = p1.clone().sub(p3);
    v3 = p4.clone().sub(p2);
    v4 = p4.clone().sub(p3);

    const v5 = new THREE.Vector3();
    const v6 = new THREE.Vector3();
    // Calculate the triangle area
    v5.crossVectors(v1, v2);
    v6.crossVectors(v3, v4);
    console.log(v5, v6);
    const s1 = v5.length() / 2;
    const s2 = v6.length() / 2;
    return s1 + s2;
  }
Copy the code

Results: The cuboid has an area of 1000

associated

Vue3.0 + TS + Threejs implements simple demo