Can't create a 3D Plane in XZ Plane

Question

I use Aframe library, when creating a plane, I have used these points

point_1 = [0, 0, 0]; point_2 = [1, 0, 0]; point_3 = [1, 1, 0]; point_4 = [0, 1, 0];

to make a plane in XY plane, It works, code: https://jsfiddle.net/qtv10291/yp4mx6re/8/ But when I change point to: point_1 = [0, 0, 0]; point_2 = [1, 0, 0]; point_3 = [1, 0, 1]; point_4 = [0, 0, 1];

to create a plane in XZ plane, It doesn't work and error THREE.DirectGeometry: Faceless geometries are not supported., code: https://jsfiddle.net/qtv10291/49gvwL8a/

Answer 1

Shape is only 2D and only accept (x, y) points, The third axis of the points you passed in are ignored.

If you want to create an XZ plane, either rotate the XY plane 90 degrees:

const geometry = new THREE.ShapeGeometry( polygon );
geometry.rotateX(-Math.PI * 0.5);

Or create it via vertices and faces:

const geometry = new THREE.Geometry();
geometry.vertices = points;
geometry.faces.push( new THREE.Face3( 2, 1, 0 ), new THREE.Face3( 2, 0, 3 ) );