# Adding Multiple Planes with different paths

How can we implement Multiple Planes with different vertices

Maybe you can create a custom Mesh?

I am using React Babylon js

There are five different planes in this image; I want Multiple Planes with various vertices. Moreover, the size of the plane depends on the vertex values.Preformatted text

``````const paths = [

[
new Vector3(-9, 5, 7),
new Vector3(60, 3, 5.9),
new Vector3(9.78, 2.68, 40.7),
new Vector3(0, 0, -2),

],
[
new Vector3(-1, 0, 0),
new Vector3(0, 1, 0),
new Vector3(1, 0, 0),
new Vector3(0, -1, 0),

],
[
new Vector3(-2, 0, -2),
new Vector3(2, 0, -2),
new Vector3(2, 0, 2),
new Vector3(-2, 0, 2),

],
[
new Vector3(-1, 0, 0),
new Vector3(0, 0, 1),
new Vector3(1, 0, 0),
new Vector3(0, 0, -1),

],
// [
//   new Vector3(-4, 0, -5),
//   new Vector3(0, 0, 1),
//   new Vector3(1, 0, 0),
//   new Vector3(0, 0, -1),

// ],
];

const WithHtmlTextss = () => {
const [position, setPosition] = useState(Vector3.Zero());
const [rotation, setRotation] = useState(Vector3.Zero());
return (
<>
{paths.map((path, index) => (
<Plane
key={`plane\${index}`}
name={`plane\${index}`}
position={new Vector3((index % 2) * 4 - 2, 0, Math.floor(index / 2) * 4 - 2)}
rotation={new Vector3(Math.PI / 2, 0, 0)}
width={2}
height={2}
path={path}
sideOrientation={Plane.DOUBLESIDE}
useVertexColors={true}
enablePointerMoveEvents={true}
>
}
</Plane>
))}
</>
);
};

const HtmlTextssss = () => (
<div style={{ flex: 1, display: "flex" }}>
<Scene>
<freeCamera
name="camera1"
position={new Vector3(0, 5, -10)}
setTarget={[Vector3.Zero()]}
/>
<hemisphericLight
name="light1"
intensity={0.7}
direction={Vector3.Up()}
/>
<WithHtmlTextss />
</Scene>
</Engine>
</div>
);

export default HtmlTextssss;

``````

I think you can find thinInstance api in React-Babylon, you can set color, position, rotation, scale for each instance plane