title: I want to insert these rectangles in the PlaneGeometry as many I can but not able to achieve it?
body: <p>I want to show rectangles as per my requirements in the planeGeometry as shown in images.
  <a href="https://i.stack.imgur.com/oCj32.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oCj32.png" alt="enter image description here" /></a></p>
  <p>I was able to achieve this rectangle using ctx.strokeReact from canvas 2d as shown below in images.
  <a href="https://i.stack.imgur.com/t3T8G.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t3T8G.png" alt="enter image description here" /></a></p>
  <p>Here is the code, for adding 5 rectangle using for loop but I'm getting only one rectangle on planeGeometry.</p>
  <pre><code>createStroke = (j) =&gt; {
  
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = &quot;white&quot;;
  ctx.strokeStyle = &quot;white&quot;;
  ctx.lineWidth = 2;
  console.log(&quot;j is &quot; + j);
  ctx.strokeRect(10 + j, 5, 30, 30);
  
  return ctx;
  
   }
  
   let ctxArr = [];
  let texture;
  var j = 0;
  
  for (var i = 0; i &lt; 5; i++) {
  
    ctxArr[0] = this.createStroke(j);
    j = j + 2;
  
  }
  
  
  console.log(&quot;ctxArr[0].canvas &quot; + new THREE.CanvasTexture(ctxArr[0].canvas))
  
  texture = new THREE.CanvasTexture(ctxArr[0].canvas);
  
  var planeGeo = new THREE.PlaneGeometry(5, 6);
  var planeMaterial = new THREE.MeshBasicMaterial(
    {
      map: texture,
      // wireframe: true
    }
  );
  
  // planeGeo.rotateY(1);
  
  var plane = new THREE.Mesh(planeGeo, planeMaterial)
  // plane.material.color.setHex( 0xf7d36f );
  
  plane.position.set(3, 0, 0)
  // plane.rotateX(-Math.PI / 2.0);
  // plane.copy();
  this.scene.add(plane);
  </code></pre>
  <p>How to achieve the functionality for the same as first image.
  Any help , guidance, reference or suggestion would be helpful. Thanks</p>