Three.js - Position Particles Evenly On Objects Faces Rather Than Verticies

Currently I've managed to create a particleCloud with the particles appearing at each vertex of an object I've imported. However I'm trying to get the particles to firstly position

Solution 1:

EDIT: The previous answer was outdated.

You can now use MeshSurfaceSampler to generate random samples on the surface of a mesh.

The MeshSurfaceSampler.js file is located in the examples/jsm/math directory.

three.js r.128

Solution 2:

You have to set the position of each particle individually to build up your 3d object out of particles. Here's an example that makes a cube:

varparticles=500000;

vargeometry=newTHREE.BufferGeometry();

varpositions=newFloat32Array( particles * 3 );
varcolors=newFloat32Array( particles * 3 );

varcolor=newTHREE.Color();

varn=1000, n2 = n / 2; // particles spread in the cubefor ( vari=0; i < positions.length; i += 3 ) {

    // positionsvarx= Math.random() * n - n2;
    vary= Math.random() * n - n2;
    varz= Math.random() * n - n2;

    positions[ i ]     = x;
    positions[ i + 1 ] = y;
    positions[ i + 2 ] = z;

    // colorsvarvx= ( x / n ) + 0.5;
    varvy= ( y / n ) + 0.5;
    varvz= ( z / n ) + 0.5;

    color.setRGB( vx, vy, vz );

    colors[ i ]     = color.r;
    colors[ i + 1 ] = color.g;
    colors[ i + 2 ] = color.b;

}

geometry.addAttribute( 'position', newTHREE.BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'color', newTHREE.BufferAttribute( colors, 3 ) );

geometry.computeBoundingSphere();

//varmaterial=newTHREE.PointCloudMaterial( { size: 15, vertexColors: THREE.VertexColors } );

particleSystem = newTHREE.PointCloud( geometry, material );
scene.add( particleSystem );

source: this threejs example