# 2D object in 3D space (by Vertices)

Thanks for having a look at it and for the refactoring! Yeah, it seems it fails depending on the set of points used. But I have found it is not related to having a point at `(0, 0)`. So, for example…

This works:

``````var points = [
new THREE.Vector2(-20, 0),
new THREE.Vector2(-20, -20),
new THREE.Vector2(20, -20),
new THREE.Vector2(20, 40),
new THREE.Vector2(-10, 40),
new THREE.Vector2(-10.0, 0.0),
new THREE.Vector2(-20, 0),
];
``````

This does not:

``````var points = [
new THREE.Vector2(-20, 0),
new THREE.Vector2(-20, -20),
new THREE.Vector2(10, -20),
new THREE.Vector2(10, 40),
new THREE.Vector2(-10, 40),
new THREE.Vector2(-10.0, 0.0),
new THREE.Vector2(-20, 0),
];
``````

Notice the change in points `2` and `3`, where I only change their `x` attribute from `20` to `10`.

Thanks a lot! It works great. Only I just discovered the order is important… (hence your `reverse()` call). The problem is that the points on the X-Y plane are provided and there is no guarantee they come sorted counterclockwise (they could be sorted clockwise). Any magic Three.js function to deal with that? Interestingly, the order does not seem to matter for the orange vertices. Only the `ShapeBufferGeometry` is affected. Take a look at this method: https://threejs.org/docs/index.html#api/en/extras/ShapeUtils.isClockwise

1 Like

Works perfectly, thanks! The docs say `.isClockwise` but it seems it is written `.isClockWise` (aren’t the docs autogenerated?).

True. There’s a typo in the docs Must be `.isClockWise()` or a typo in the source code 1 Like

@hofk Could it be a problem of the order of the vertices in the array? I tried with `points = points.reverse();` (got the idea from @prisoner849’s proposal) and it seems to work fine (?). Not sure if it really works fine when you make sure points are sorted anticlockwise or it is just luck and simply, with enough time, I will find another example that fails. I have not yet dealt with ShapeGeometry in detail. But I noticed that Raycaster is much too complex for the simple thing. It is only the intersection of the plane with a vertical line. You have all values and can calculate the z component easily. You get it from the vector-formula of the normal form of the plane. (x-p)*n = 0

``````for ( var i = 0; i < points.length; i ++ ) {

x = points[ i ][ 0 ];
y = points[ i ][ 1 ];

z = ( zp * zn - ( x - xp ) * xn - ( y - yp ) * yn ) / zn;

console.log( 'x, y, z ', x, y, z );

planePoints.push( new THREE.Vector3( x, y, z ) );

}
``````

see PlanePoints

1 Like

Are you aware that you have to define your points in CCW order?

It seems to me I was defining my points in CCW order, right? The shape was successfully created in the X-Y (2D) plane. It only fails when altering the Z coordinates to make the shape tilted.

We’ve discussed at github that shapes are defined by 2D points. I don’t think this design decision will be changed.

I think in a 3D world, it is not unreasonable to ask for 2D shapes to be not laying on the X-Y plane. Also, not unreasonable to have a scenario in which you know the 3D global/world coordinates of those points.

What would be the recommended way to construct a planar shape out of those 3D points? Is the recommended way intuitive enough to not need any addition to the public API to make it easier?

The question is already a bit confusing since you can only produce such a shape if the points lie in a conceptual 2D plane. So as mentioned at github, transform your points into the XY plane first before generating your shapes. And no, I don’t think we need an API for this. This kind of preparation has to be done on user-level with the existing API.