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

您必须单独设置每个粒子的位置才能用粒子构建 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

Answer 2

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

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

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

three.js r.128

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

THREE.js - position particles evenly on objects faces rather than verticies

javascript