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:

var particles = 500000;

var geometry = new THREE.BufferGeometry();

var positions = new Float32Array( particles * 3 );
var colors = new Float32Array( particles * 3 );

var color = new THREE.Color();

var n = 1000, n2 = n / 2; // particles spread in the cube

for ( var i = 0; i < positions.length; i += 3 ) {

    // positions

    var x = Math.random() * n - n2;
    var y = Math.random() * n - n2;
    var z = Math.random() * n - n2;

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

    // colors

    var vx = ( x / n ) + 0.5;
    var vy = ( y / n ) + 0.5;
    var vz = ( 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', new THREE.BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );

geometry.computeBoundingSphere();

//

var material = new THREE.PointCloudMaterial( { size: 15, vertexColors: THREE.VertexColors } );

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

source: this threejs example