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

**URL:** <https://discourse.threejs.org/t/how-fill-a-loaded-stl-mesh-not-simple-shapes-like-cube-etc-with-random-particles-and-animate-with-this-geometry-bound-in-three-js/4702>\
**Category:** Questions\
**Tags:** loaders, materials, geometry\
**Created:** [October 27, 2018, 7:04pm UTC](https://discourse.threejs.org/t/how-fill-a-loaded-stl-mesh-not-simple-shapes-like-cube-etc-with-random-particles-and-animate-with-this-geometry-bound-in-three-js/4702 "2018-10-27T19:04:38Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![den812](https://avatars.discourse-cdn.com/v4/letter/d/a6a055/32.png) [@den812](https://discourse.threejs.org/u/den812)\
**Post date:** [October 27, 2018, 7:04pm UTC](https://discourse.threejs.org/t/how-fill-a-loaded-stl-mesh-not-simple-shapes-like-cube-etc-with-random-particles-and-animate-with-this-geometry-bound-in-three-js/4702/1 "2018-10-27T19:04:38Z")

</div>

**How I can fill a loaded STL mesh ( like Suzanne but NOT SIMPLE SHAPES LIKE CUBE etc) with random particles and animate it inside this geometry bounds with three.js ?**

I see many examples but all of it for simple shapes with geometrical bounds like cube or sphere with limit by coordinates around center

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

```

was found this example: [https://threejs.org/examples/?q=points#webgl\_points\_dynamic](https://threejs.org/examples/?q=points#webgl_points_dynamic) but it’s another solution when using vertexes of geometry of mesh like points material… I already do it , but how I can fill volume of this meshes?  
I need algorithm to detect coordinates includes in the mesh volume ((  
Also I think about raycasting from center of mesh, but this method also cant cover all volume of complex meshes (

TNX

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [October 27, 2018, 8:47pm UTC](https://discourse.threejs.org/t/how-fill-a-loaded-stl-mesh-not-simple-shapes-like-cube-etc-with-random-particles-and-animate-with-this-geometry-bound-in-three-js/4702/2 "2018-10-27T20:47:37Z")

</div>

Hi!  
You can “raycast” your mesh with infinite ray from the desired point with the direction, for example, [1, 0, 0] against all the triangles in the mesh and count how many triangles were intersected. If the number of interstected faces is odd, then the point is inside the mesh.

---

<div class="post-metadata">

**Author:** ![den812](https://avatars.discourse-cdn.com/v4/letter/d/a6a055/32.png) [@den812](https://discourse.threejs.org/u/den812)\
**Post date:** [October 27, 2018, 9:49pm UTC](https://discourse.threejs.org/t/how-fill-a-loaded-stl-mesh-not-simple-shapes-like-cube-etc-with-random-particles-and-animate-with-this-geometry-bound-in-three-js/4702/3 "2018-10-27T21:49:59Z")

</div>

But if mesh have a not convex shape? for ex shape of letter G extruded and you trace ?

may be existed some example of this method in three.js code?  
TNX

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [October 27, 2018, 9:53pm UTC](https://discourse.threejs.org/t/how-fill-a-loaded-stl-mesh-not-simple-shapes-like-cube-etc-with-random-particles-and-animate-with-this-geometry-bound-in-three-js/4702/4 "2018-10-27T21:53:39Z")

</div>

> [@den812](#):
>
> may be existed some example of this method in three.js code?

I’m working on its concept 🙂

---

<div class="post-metadata">

**Author:** ![den812](https://avatars.discourse-cdn.com/v4/letter/d/a6a055/32.png) [@den812](https://discourse.threejs.org/u/den812)\
**Post date:** [October 27, 2018, 9:56pm UTC](https://discourse.threejs.org/t/how-fill-a-loaded-stl-mesh-not-simple-shapes-like-cube-etc-with-random-particles-and-animate-with-this-geometry-bound-in-three-js/4702/5 "2018-10-27T21:56:30Z")

</div>

I think about another method about slice of object for the first with Z and then by Y and after that by X and we have lines with only one coordinates for testing, but I think performance in this case is not so good as raycasing… will wait your concept 🤩

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [October 27, 2018, 11:58pm UTC](https://discourse.threejs.org/t/how-fill-a-loaded-stl-mesh-not-simple-shapes-like-cube-etc-with-random-particles-and-animate-with-this-geometry-bound-in-three-js/4702/6 "2018-10-27T23:58:12Z")

</div>

Okay, here it is. Works like I said: counts the number of intersected faces, and if it’s odd, then a point is inside of a mesh (geometry):

https://codepen.io/prisoner849/embed/preview/LgabWZ?height=300&slug-hash=LgabWZ&default-tabs=html,result&host=https://codepen.io

```auto
  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);
  }

```