# How to add a lot of holes on the planeGeometry?

**URL:** <https://discourse.threejs.org/t/how-to-add-a-lot-of-holes-on-the-planegeometry/13025>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [February 25, 2020, 8:14am UTC](https://discourse.threejs.org/t/how-to-add-a-lot-of-holes-on-the-planegeometry/13025 "2020-02-25T08:14:50Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tojo\_Fabrice](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tojo_fabrice/32/8799_2.png) [@Tojo\_Fabrice](https://discourse.threejs.org/u/Tojo_Fabrice)\
**Post date:** [February 25, 2020, 8:14am UTC](https://discourse.threejs.org/t/how-to-add-a-lot-of-holes-on-the-planegeometry/13025/1 "2020-02-25T08:14:50Z")

</div>

How to add a lof of holes (3000 holes) on the planeGeometry?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [February 25, 2020, 8:24am UTC](https://discourse.threejs.org/t/how-to-add-a-lot-of-holes-on-the-planegeometry/13025/2 "2020-02-25T08:24:40Z")

</div>

Hi!  
How does it have to look like?

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [February 25, 2020, 8:25am UTC](https://discourse.threejs.org/t/how-to-add-a-lot-of-holes-on-the-planegeometry/13025/3 "2020-02-25T08:25:54Z")

</div>

What kind of holes do you want to make? A sketch would be helpful.

---

<div class="post-metadata">

**Author:** ![Tojo\_Fabrice](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tojo_fabrice/32/8799_2.png) [@Tojo\_Fabrice](https://discourse.threejs.org/u/Tojo_Fabrice)\
**Post date:** [February 25, 2020, 9:19am UTC](https://discourse.threejs.org/t/how-to-add-a-lot-of-holes-on-the-planegeometry/13025/4 "2020-02-25T09:19:01Z")

</div>

![poisson](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/2/295bd1e2e8ab2ddcaf664c8d7addd3743beb241d.png)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [February 25, 2020, 9:24am UTC](https://discourse.threejs.org/t/how-to-add-a-lot-of-holes-on-the-planegeometry/13025/5 "2020-02-25T09:24:03Z")

</div>

Is it based on a texture?

---

<div class="post-metadata">

**Author:** ![Tojo\_Fabrice](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tojo_fabrice/32/8799_2.png) [@Tojo\_Fabrice](https://discourse.threejs.org/u/Tojo_Fabrice)\
**Post date:** [February 25, 2020, 10:33am UTC](https://discourse.threejs.org/t/how-to-add-a-lot-of-holes-on-the-planegeometry/13025/6 "2020-02-25T10:33:37Z")

</div>

yes, i want to change all the small sphere to hole

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [February 26, 2020, 8:02am UTC](https://discourse.threejs.org/t/how-to-add-a-lot-of-holes-on-the-planegeometry/13025/7 "2020-02-26T08:02:58Z")

</div>

With reference to the personal message.

* * *

[hofk](https://discourse.threejs.org/u/hofk)  
My addon [Inner Geometry (Triangulation)](https://discourse.threejs.org/t/inner-geometry-triangulation/12565) does not seem to be suitable there either. It makes holes, but rather few and special.

Is it not better to create the pattern as a texture?

[Tojo\_Fabrice](https://discourse.threejs.org/u/Tojo_Fabrice)  
So, how to create a pattern?

* * *

Modification of the example [https://hofk.de/main/discourse.threejs/2018/Spotlight/Spotlight.html](https://hofk.de/main/discourse.threejs/2018/Spotlight/Spotlight.html)

[https://hofk.de/main/discourse.threejs/2020/Pattern/Pattern.html](https://hofk.de/main/discourse.threejs/2020/Pattern/Pattern.html)

 ![2020-02-26_09.00.16](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/2/2da26c01babd03471dece5ccf5ac38072f48678f.png)  
Pattern created with a graphics program. Notice! I am not an artist.  
 ![Pattern](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/8/8a486822b26aaaf4cfd35eb9c988404128cbbbf7.png)

```
<!DOCTYPE html>
<!-- -->
<head>
  <title> Pattern </title>
  <meta charset="utf-8" />
  <style>
	body {
		margin: 0;
		}
  </style>
</head>
<body> </body>
<script src="../js/three.min.113.js"></script>	
<script src="../js/OrbitControls.js"></script>

<script>

 // @author hofk 

'use strict'
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 0.01, 100 );
camera.position.set( 10, 8, 12 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xcccccc );
document.body.appendChild( renderer.domElement );
const controls = new THREE.OrbitControls( camera, renderer.domElement );	
const axesHelper = new THREE.AxesHelper( 20 );
scene.add( axesHelper );

const ambientLight = new THREE.AmbientLight( 0x404040, 0.9 ); 
scene.add( ambientLight );

const pointLight = new THREE.PointLight( 0x303030 );
pointLight.position.set( 8, 80, 0 );
scene.add( pointLight );

const spotLight = new THREE.SpotLight( 0xffffff, 5, 24, 0.3, 0.25, 2 );
spotLight.position.set( 8, 10, -2 );
spotLight.target.position.set( 0.5, 0, 5 );
scene.add( spotLight.target);
const spotLightHelper = new THREE.SpotLightHelper( spotLight );
scene.add( spotLightHelper );
scene.add( spotLight );

const floorGeo = new THREE.PlaneBufferGeometry( 8, 8 );
floorGeo.rotateX( 1.57 );
floorGeo.translate( 4, 0, 0 );
const floor = new THREE.Mesh( floorGeo, new THREE.MeshStandardMaterial( { color: 0xccccff, side: THREE.DoubleSide } ) );
scene.add( floor );

const wallGeo = new THREE.PlaneBufferGeometry( 8, 8 );
wallGeo.rotateY( 1.57 );
wallGeo.translate( 0, 4, 0 );
const wallMat = new THREE.MeshPhongMaterial( { color: 0xee44ee, side: THREE.DoubleSide } );
const wall = new THREE.Mesh( wallGeo, wallMat );
scene.add( wall );

const pictureGeo = new THREE.PlaneBufferGeometry( 12, 12, 12, 12 );
pictureGeo.rotateY( 1.57 );
pictureGeo.translate( 0.01, 2.5, 1.5);
const texture	= new THREE.TextureLoader().load( "pattern.png" ); 
const pictureMat = new THREE.MeshBasicMaterial( { map: texture, side: THREE.DoubleSide, transparent: true } );
// const pictureMat = new THREE.MeshPhongMaterial( { color: 0xffff00, side: THREE.DoubleSide } );
const picture = new THREE.Mesh( pictureGeo, pictureMat );
scene.add( picture );

animate();

function animate() {

	requestAnimationFrame( animate );
	spotLightHelper.update(); 
	renderer.render( scene, camera );
	
}
</script>
</html>
```

---

<div class="post-metadata">

**Author:** ![Tojo\_Fabrice](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tojo_fabrice/32/8799_2.png) [@Tojo\_Fabrice](https://discourse.threejs.org/u/Tojo_Fabrice)\
**Post date:** [February 26, 2020, 8:45am UTC](https://discourse.threejs.org/t/how-to-add-a-lot-of-holes-on-the-planegeometry/13025/8 "2020-02-26T08:45:32Z")

</div>

how to create it?

 ![Pattern](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/8/8a486822b26aaaf4cfd35eb9c988404128cbbbf7.png)

---

<div class="post-metadata">

**Author:** ![Tojo\_Fabrice](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tojo_fabrice/32/8799_2.png) [@Tojo\_Fabrice](https://discourse.threejs.org/u/Tojo_Fabrice)\
**Post date:** [February 26, 2020, 8:48am UTC](https://discourse.threejs.org/t/how-to-add-a-lot-of-holes-on-the-planegeometry/13025/9 "2020-02-26T08:48:14Z")

</div>

i want to make a hole by code, i have a lot off point(x,y)

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [February 26, 2020, 5:05pm UTC](https://discourse.threejs.org/t/how-to-add-a-lot-of-holes-on-the-planegeometry/13025/10 "2020-02-26T17:05:49Z")

</div>

**png images can also be programmed**

I didn’t do it myself, but it will take some time to learn how to use it.

I have found a page, but in German. Can be translated.

> **[Grafiken erstellen über PHP](https://www.php-kurs.com/grafiken-erstellen-mit-php.htm)**
>
> PHP kann Grafiken erstellen bzw. bestehende Bilder erweitern: z.B. eine E-Mail-Adresse automatisch als JPG bzw. PNG erstellen.

The example from it, comments translated with [DeepL Translate: The world's most accurate translator](https://www.deepl.com/translator)

> PHP source code: Content of the PHP file on-the-fly-graphic-php
> 
> ```
> > <?php
> > header("Content-type: image/png");
> > // create an empty image with 400px width and 300px height
> > $image = imagecreatetruecolor(400, 300);
> > // create background color
> > imagecolorallocate($image, 150, 150, 0);
> >  
> > // set colors
> > $color1 = imagecolorallocate($image, 255, 255, 0);
> > $color2 = imagecolorallocate($image, 0, 255, 0);
> > $color3 = imagecolorallocate($image, 0, 0, 255);
> > // square drawing
> > // with the following coordinates (x1, y1, x2, y2, color);
> > imagefilledrectangle ($image, 20, 75, 350,250, $color1);
> > imagefilledrectangle ($image, 150, 100, 200, 280, $color2);
> > imagefilledrectangle ($image, 220, 150, 330, 190, $color3);
> > // output of the image
> > imagepng($image);
> > ?>
> 
> ```

In the extension to the rectangles you need the function for drawing ellipses:

`imagefilledellipse($image, 200, 150, 300, 200, $color);`

This has the structure:  
`(x-coordinate of center, y-coordinate of center, width, height, color)`

* * *

**UPDATE:** I found [PHP: PNG creation with PHP - Manual](https://www.php.net/manual/en/image.examples-png.php)  
_multiple languages_  
🙂

see also [PHP: PHP/FI Version 2.0 Documentation](https://www.php.net/manual/phpfi2.php#funcs)