javascript - 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

编辑:之前的答案已过时。

您现在可以使用 MeshSurfaceSampler 在网格表面生成随机样本。

MeshSurfaceSampler.js 文件位于 examples/jsm/math 目录中。

three.js r.128