Utilizing THREE.js to evenly distribute particles on object surfaces, rather than on vertices

Question

Utilizing THREE.js to evenly distribute particles on object surfaces, rather than on vertices

Currently, I have successfully created a particleCloud where the particles are positioned at each vertex of an imported object. However, my goal is to have the particles initially placed on the flat faces of the object instead of in between the vertices and to evenly distribute them on those faces.

In essence, I am aiming for my 3D object to be constructed out of particles

Here is my progress 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've included an image to illustrate what I currently have and my desired outcome. I'm using the front face of a cube as an example, but my object will have more sides.

javascript three.js

Answer 1

Answer №1

UPDATE: The previous response is no longer valid.

You now have the option to utilize MeshSurfaceSampler for generating random samples on a mesh's surface.

To access the MeshSurfaceSampler.js script, navigate to the examples/jsm/math directory.

This information pertains to version r.128 of three.js.

Answer 2

UPDATE: The previous response is no longer valid.

You now have the option to utilize MeshSurfaceSampler for generating random samples on a mesh's surface.

To access the MeshSurfaceSampler.js script, navigate to the examples/jsm/math directory.

This information pertains to version r.128 of three.js.

Answer 3

Answer №2

To create a 3D object using particles, you must position each particle individually. This process involves setting the x, y, and z coordinates for each particle. For instance, below is a snippet of code that demonstrates how to generate a cube:

var numParticles = 500000;
var geometry = new THREE.BufferGeometry();
var positions = new Float32Array(numParticles * 3);
var colors = new Float32Array(numParticles * 3);

var color = new THREE.Color();

var n = 1000, n2 = n / 2; 

for (var i = 0; i < positions.length; i += 3) {
    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;

    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 4

To create a 3D object using particles, you must position each particle individually. This process involves setting the x, y, and z coordinates for each particle. For instance, below is a snippet of code that demonstrates how to generate a cube:

var numParticles = 500000;
var geometry = new THREE.BufferGeometry();
var positions = new Float32Array(numParticles * 3);
var colors = new Float32Array(numParticles * 3);

var color = new THREE.Color();

var n = 1000, n2 = n / 2; 

for (var i = 0; i < positions.length; i += 3) {
    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;

    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

Utilizing THREE.js to evenly distribute particles on object surfaces, rather than on vertices

Answer №1

Answer №2

Similar questions

Utilizing Redux for Efficient Video Player Control

Styling Input elements with a unified border in Bootstrap

Set the position of a div element to be fixed

I'm finding it difficult to understand the reasoning behind the custom hook I created

Seeking assistance to transfer div elements into a different div post an onclick event

Is foreach not iterating through the elements properly?

Changing a live request in React

Tips for employing numerous if-else conditions utilizing the ternary operator in jsonpath-plus?

What is the best way to reset the drawing canvas using JavaScript?

Combining package.json commands for launching both an Express server and a Vue app

Formik's handleChange function is causing an error stating "TypeError: null is not an object (evaluating '_a.type')" specifically when used in conjunction with the onChange event in DateInput

Error message: When using the Three.JS STL Loader, an Uncaught TypeError occurs because the property 'scale' is being called on an undefined value

Tips for calculating the average of various items within an array

What is the best way to modify or revise meta fields for individual products in order to retrieve multiple images for each product in Shopify?

Can AngularJS Filters be used to convert a number into a string, but not the other way around?

Navigate the div with arrow keys

Place jQuery popup box in position

How can I retrieve the value of the last index from the props.data object in React/JS?

I encountered a problem when making multiple JSON calls within a for loop

Steps to display a variable in JavaScript on an HTML textarea