How to add a lof of holes (3000 holes) on the planeGeometry?
Hi!
How does it have to look like?
What kind of holes do you want to make? A sketch would be helpful.
1 Like
Is it based on a texture?
yes, i want to change all the small sphere to hole
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
Pattern created with a graphics program. Notice! I am not an artist.
<!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
i want to make a hole by code, i have a lot off point(x,y)
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.
The example from it, comments translated with DeepL Translate: The world's most accurate 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
multiple languages
