THREE.js - 将粒子均匀地放置在对象面上而不是顶点上

Question

目前我已经设法创建了一个粒子云，粒子出现在我导入的对象的每个顶点上。然而，我试图让粒子首先定位在物体的平面上，而不是它们之间的点，然后将粒子均匀地分布在这些面上。

基本上我试图让我的3D对象由粒子构成

这是我到目前为止所做的：

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);

});

编辑 - 1

我附上了一张图片来试着描述我现在拥有的东西以及我想要实现的目标。它以立方体上的正面为例。我的目标将有更多的方面。

Answer 1

three.js有一些方便的方法可以使用：

THREE.GeometryUtils.randomPointsInGeometry()

如果使用BufferGeometry（或GeometryUtils.js），结果可能看起来更好，因为它会根据面部区域进行采样。

所需的examples/js/utils文件位于{{1}}目录。

three.js r.71

Answer 2

您必须单独设置每个粒子的位置，以便从粒子中构建3d对象。这是一个制作立方体的例子：

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 );

来源：this threejs example