Skip to main content

Rectangle

The Rectangle class is used to create a rectangle with a given center, width, and breadth.

Create Rectangle​

const rectangleData = {
  center: new Vector3D(0, 0, 0),
  width: 2,
  breadth: 10
}

const ogRectangle = new Rectangle(rectangleData);
scene.add(ogRectangle);

Create Rectangle with different properties​

const ogRectangle = new Rectangle({
  center: new Vector3D(0, 3, 0),
  width: 2,
  breadth: 10
});

scene.add(ogRectangle);

ogRectangle.color = 0x00ff00;
ogRectangle.width = 5;
ogRectangle.breadth = 15;

Properties​

These properties can be edited to change the appearance of the rectangle in real-time which generates a new geometry and updates the scene.

PropertyTypeDescription
widthnumberThe width of the rectangle.
breadthnumberThe breadth of the rectangle.
colornumberThe color of the rectangle.
tip

Apart from OpenGeometry properties, you can also use the Three.js properties to change the appearance of the rectangle.

And One More Thing​

Let's checkout the live example here