如何使用随机粒子填充加载的 STL 网格（不是简单的形状，如立方体等）并使用 three.js 中绑定的此几何体制作动画

Question

如何用随机粒子填充加载的 STL 网格（如 suzane 不是简单的形状，如立方体等）并使用 three.js 在该几何边界内对其进行动画处理？

我看到了很多例子，但所有这些都是具有几何边界的简单形状，例如立方体或球体，受围绕中心的坐标限制

https://threejs.org/examples/?q=points#webgl_custom_attributes_points3

TNX

Answer 1

一个概念，使用射线，计算射线与网格面的交点，如果数字是奇数，则表示该点在网格内部：

Codepen

  function fillWithPoints(geometry, count) {

    var ray = new THREE.Ray()

    var size = new THREE.Vector3();
    geometry.computeBoundingBox();
    let bbox = geometry.boundingBox;

    let points = [];

    var dir = new THREE.Vector3(1, 1, 1).normalize();
    for (let i = 0; i < count; i++) {
      let p = setRandomVector(bbox.min, bbox.max);
      points.push(p);
    }

    function setRandomVector(min, max){
      let v = new THREE.Vector3(
        THREE.Math.randFloat(min.x, max.x),
        THREE.Math.randFloat(min.y, max.y),
        THREE.Math.randFloat(min.z, max.z)
      );
      if (!isInside(v)){return setRandomVector(min, max);}
      return v;
    }

    function isInside(v){

      ray.set(v, dir);
      let counter = 0;

      let pos = geometry.attributes.position;
      let faces = pos.count / 3;
      let vA = new THREE.Vector3(), vB = new THREE.Vector3(), vC = new THREE.Vector3();

      for(let i = 0; i < faces; i++){
        vA.fromBufferAttribute(pos, i * 3 + 0);
        vB.fromBufferAttribute(pos, i * 3 + 1);
        vC.fromBufferAttribute(pos, i * 3 + 2);
        if (ray.intersectTriangle(vA, vB, vC)) counter++;
      }

      return counter % 2 == 1;
    }

    return new THREE.BufferGeometry().setFromPoints(points);
  }

Answer 2

上一个答案的概念很好，但它有一些性能限制：

用每条光线测试整个几何结构
外部点的递归会导致堆栈溢出

此外，它与索引几何不兼容。

可以通过创建存储几何三角形的空间散列图并将相交测试限制在网格的某些部分来改进它。

Demonstration

如何使用随机粒子填充加载的 STL 网格（不是简单的形状，如立方体等）并使用 three.js 中绑定的此几何体制作动画

How fill a loaded STL mesh ( NOT SIMPLE SHAPES LIKE CUBE ETC) with random particles and animate with this geometry bound in three.js

three.js

points