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

Question

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

基本上我正试图让我的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( geometry, n )

THREE.GeometryUtils.randomPointsInBufferGeometry( geometry, n )

THREE.GeometryUtils.randomPointInFace( face, geometry )

如果THREE.GeometryUtils.randomPointsInGeometry()(或BufferGeometry)使用结果可能看起来更好,因为它根据面部区域进行采样.

所需GeometryUtils.js文件位于examples/js/utils目录中.

three.js r.71