[SOLVED] How to create plane by points (vertex)?

Help & Support
1

Suppose I have a list of points like [ [x1, y1, z1], [x2, y2, z2], [x3, y3, z3], [x4, y4, z4] ], how to create plane by these points (just assume they are in the same plane)?

And if I can create it, can I get its euler angles ? can I create a rigidbody for it ?

2

The easiest way to create a plane is, of course, to create a plane in the Editor:

createplane.gif1259×641 219 KB

The problem here is: how do you rotate the plane such that the points you specify lie in that plane? Well, you can:

  1. Calculate the normal of the plane defined by those 4 points.
  2. Figure out the quaternion that rotates [0, 1, 0] (the default plane normal) to the normal of your plane.

Alternatively, you can create a plane from the 4 points in code, using the pc.createMesh function. So something like:

var mesh = pc.createMesh(
    this.app.graphicsDevice,
    [ x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4 ],
    {
        normals: [ nx, ny, nz, nx, ny, nz, nx, ny, nz, nx, ny, nz ],
        uvs: [ 0, 0, 0, 1, 1, 1, 1, 0 ],
        indices: [ 0, 1, 2, 0, 2, 3 ]
    });

Notice the normal is the same for each vertex, as you’d expect. Let’s say your vertices are v1, v2, v3, v4. The normal is (v2 - v1) cross (v4 - v1)

… where ‘cross’ is a cross product operation.

A much more complex example app showing how to create a mesh from a bunch of points is the terrain example.

1 Like
3

Thanks, will.

Currently I am using the solution 1 (calculate the normal) to implement the plane.

4

For more information, we can do the following steps:

  • calculate the points’ normal vector:
var points = points.map(p => new pc.Vec3(p));
var v1 = new pc.Vec3().sub2(points[0], points[1]);
var v2 = new pc.Vec3().sub2(points[0], points[2]);
var normal = new pc.Vec3().cross(v1, v2);
  • calculate the quaternion
var axis = new pc.Vec3().cross(pc.Vec3.UP, normal);
var angle =  Math.acos(
  (pc.Vec3.UP.dot(normal)) / (pc.Vec3.UP.length() * normal.length())
) * 180 / Math.PI;
var quat = new pc.Quat().setFromAxisAngle(axis, angle);
  • rotate the plane
var plane = new pc.Entity();
plane.addComponent('model', { type: 'plane' });
plane.setEulerAngles(quat.getEulerAngles());
1 Like