Dividing Plane Geometry into definite number of small planes like cells in excel sheet

Questions
1

Hi

I am using a plane using plane geometry to tag a side of a hotel and now I want to divide that plane into small portions (different colors based upon some criteria). Each cell will represent a specific part of the building and I should be able to click on a cell to be able to show some information on screen.

How I can divide that plane into small cells.
I know we have widthSegments and heightSegments but how can I show those segments with different colors and make them interactive.

Thank you.

2

Best solution: just create N*N smaller planes, reposition and rescale them to (1/N).

A bit worse solution: Subdivide using a modifier. But it will make stuff much harder for you later.

1 Like
3

@mjurczyk Thank you for your reply.
But I am having a little problem in calculating the position of those planes.
Since the bigger plane is rotated, We can’t just increase say x-axis by the width and y-axis by height of smaller plane to calculate positions (x, y).

Also the plane is in 3D space so its a little hard to know which two sides to increase to calculate position of planes. (x, y) or (y, z) or (x, z) or all of them in case if plane is not parallel to any axis.

Do you have any example code or any idea on how can I easily calculate positions of small rectangles?

4

Something like this should do the trick.

You can create a group that inherits transformation from the bigger plane (or add subdivided planes to the bigger plane, that’ll work as well - and will automatically transform smaller planes for you.)

2 Likes
5

@mjurczyk Thank you sir
It really helped.
As I am a newbie, I didn’t know about THREE.Group and was calculating each sub cell position myself.

6

@mjurczyk Another question?
Is it possible to write something on the planes or to show text on the plane?

7

As a newbie you will find suggestions in the Collection.

E.g.

PictureBall

Fabricjs

HelperExample

Links in source code.

See also

2 Likes
8

Yep - also here’s an example (code) from docs on how to render text geometry.

After creating a Mesh with TextGeometry, you can then do:

subplane.add(textMesh);

This will add the text in the center of that particular subplane. :slight_smile:

1 Like