How to add a lot of holes on the planeGeometry?

Questions
7

With reference to the personal message.

hofk
My addon Inner Geometry (Triangulation) 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
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/2020/Pattern/Pattern.html

2020-02-26_09.00.16
2020-02-26_09.00.16605×557 25.3 KB

Pattern created with a graphics program. Notice! I am not an artist.
Pattern
Pattern580×550 5.75 KB 

<!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>
2 Likes