Adding Multiple Planes with different paths

Questions
1

How can we implement Multiple Planes with different vertices

2

Sorry, do you have any exampler about your question.
Maybe you can create a custom Mesh?

3

I am using React Babylon js

image
image1630×699 5.05 KB

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" }}>
    <Engine antialias adaptToDeviceRatio canvasId="babylonJS">
      <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;
4

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

2 Likes