I am struggling to place a particle on the top side of a custom mesh using Three.js. Most tutorials I've come across only demonstrate adding particles to cubes or spheres, leaving me with no solution for my unique shape. How can I successfully position a particle at a random point on the upper surface of my mesh?
var extrusionSettings = {
bevelEnabled: false,
extrudeMaterial: 1, amount:3,
};
var Hexagon=new Array();
Hexagongeometry[0]= new Array();
Hexagongeometry[0].push(new THREE.Vector3(-3, 0.0, 0.0));
Hexagongeometry[0].push(new THREE.Vector3( -3, 3, 0.0));
Hexagongeometry[0].push(new THREE.Vector3( 0, 5, 0.0));
Hexagongeometry[0].push(new THREE.Vector3( 3, 3, 0.0));
Hexagongeometry[0].push(new THREE.Vector3( 3, 0, 0.0));
Hexagongeometry[0].push(new THREE.Vector3( 0, -3, 0.0));
Hexagongeometry[0].push(new THREE.Vector3( -3, 0, 0.0));
var HexagonShape=new Array();
HexagonShape[0] = new THREE.Shape( Hexagongeometry[0] );
var HexagonExtrude=new Array();
HexagonExtrude[0] = new THREE.ExtrudeGeometry( HexagonShape[0], extrusionSettings );
var material=new Array();
material[0] = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var Hexagon=new Array();
Hexagon[0] = new THREE.Mesh( HexagonExtrude[0],material[0] );
scene.add(Hexagon[0]);
var particleMaterial = new THREE.ParticleBasicMaterial({ size: 2, color: 0xff0000, transparency: true, alphaTest: 0.5 });
var particle = new THREE.ParticleSystem( HexagonExtrude[0], particleMaterial );
scene.add( particle);
Despite numerous attempts, I have been unsuccessful in placing the particle on any part of my mesh, specifically hexagon [0]. The techniques demonstrated in tutorials work well for basic shapes like cubes or spheres but are not applicable to my intricate mesh structure. It would greatly facilitate if someone could guide me on how to randomly position multiple particles on various points of my mesh.
I am still learning Three.js and apologize for any language barriers. Your assistance is much appreciated.