THREE.js - position particles evenly on objects faces rather than verticies

Question

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 firstl

Answer 1

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

Answer 2

three.js has some handy methods you can use:

THREE.GeometryUtils.randomPointsInGeometry( geometry, n )

THREE.GeometryUtils.randomPointsInBufferGeometry( geometry, n )

THREE.GeometryUtils.randomPointInFace( face, geometry )

The result may look better if THREE.GeometryUtils.randomPointsInGeometry() ( or BufferGeometry ) is used, as it samples according to face area.

The required GeometryUtils.js file is located in the examples/js/utils directory.

three.js r.71