Aligning polygon along the z-axis

Questions
1

Probably a basic question but still.

I’m trying to position polygon flat along the z-axiz. Logic tells me that that in this case all the y coordinates must be 0 or any other value but all same. However this makes polygon (in my case square) disappear entirely. The best result I’m getting if I’m setting “y” of one side to very small value but still not zero. Something like “0.001”. If I set it to just one point and rest are 0 then I see a triangle. Like one point is drawn under water. Why so?

Here is a codepen of my minimum code to reproduce the issue - https://codepen.io/Tim-the-animator/pen/XWOGYVM

2

To lay flat along the Z axis, all the Z components need to be the same. :slight_smile:
For the Y axis, all Y needs to be the same.

The threejs PlaneGeometry is laid out on the X,Y axis… (as are the output of the Shape/Path functions) so setting all Y components to 0 will get you a line.

3

Hm. Now I’m even more confused. So as. you can see in my CodePen, I’m looking at my scene from the top (camera.position is set to Vector3(0, 5, 0). In fact now I’m even not sure if it is the top). How can I render a flat polygon for that angle?

4

You use Shape→ShapeGeometry→Mesh to define a polygon. By design, Shape defines a flat shape in XY plane only; there is no Z. If you want to create a shape in another orientation, like in XZ, you should still create the shape in XY, but then rotate the mesh so that the shape lays in XZ.

It is like drawing the polygon on a 2D sheet of paper and then lifting the paper and rotating it in a 3D room.

const coordinates = [
    {x: -.1, y: 0 },
    {x: .1, y: 0},
    {x: .1, y: .1},
    {x: -.1, y: .1},
]
const polyShape = new Shape(coordinates);
const polyGeometry = new ShapeGeometry(polyShape);
const polygon = new Mesh(polyGeometry, new MeshBasicMaterial({ color: 0xFF0000, side: DoubleSide, transparent: true, opacity: .3}))
polygon.rotation.x = Math.PI/2;
2 Likes
5

Brilliant! Thank you for the explanation!

1 Like