THREE.js - position particles evenly on the faces of objects, not on the vertices
Currently I have managed to create a particleCloud with particles appearing at each vertex of the object I imported. However, I am trying to get the particles to first be positioned on the flat edges of the object, not at the points between them, and secondly, to distribute the particles evenly on those faces.
Basically I am trying to get my 3D object from particles
This is what I have so far:
var loader = new THREE.JSONLoader();
loader.load('./resources/model.json', function (geometry, materials) {
var material = new THREE.MeshFaceMaterial(materials);
var model = new THREE.Mesh(geometry, material);
var particleCount = geometry.vertices.length,
particles = new THREE.Geometry(),
pMaterial = new THREE.PointCloudMaterial({
color: 0xFFFFFF,
size: 1
});
for (var p = 0; p < particleCount; p ++) {
particle = model.geometry.vertices[p];
particles.vertices.push(particle);
}
particleSystem = new THREE.PointCloud(particles, pMaterial);
particleSystem.position.set(0, -100, 0)
particleSystem.scale.set(100,100,100)
scene.add(particleSystem);
});
EDIT - 1
I have added an image to try and describe what I have and what I am trying to achieve. This is a cube use case. My subject will have more sides.
source to share
three.js has several useful methods that you can use:
THREE.GeometryUtils.randomPointsInGeometry( geometry, n )
THREE.GeometryUtils.randomPointsInBufferGeometry( geometry, n )
THREE.GeometryUtils.randomPointInFace( face, geometry )
The result may look better if used THREE.GeometryUtils.randomPointsInGeometry()
(or BufferGeometry
) as it renders according to the face area.
The required GeometryUtils.js
file is located in the directory examples/js/utils
.
three.js r.71
source to share
You must set the position of each particle individually to create your own 3D particle object. Here's an example the cube does:
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 3D example
source to share