CODEWITHSUNDEEP
javascriptthree.jsaframe
QUANG Tuấn Vũ
QUANG Tuấn Vũ

Reputation: 131

Can't create a 3D Plane in XZ Plane

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/

Upvotes: 1

Views: 192

Answers (1)

Hao Wu
Hao Wu

Reputation: 20669

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 ) );

Upvotes: 2

Related Questions