# How to sample points on surface based on UV (MeshSurfaceSampler)?

**URL:** https://discourse.threejs.org/t/how-to-sample-points-on-surface-based-on-uv-meshsurfacesampler/79171
**Category:** Questions
**Tags:** geometry
**Created:** [March 7, 2025, 7:28pm UTC](https://discourse.threejs.org/t/how-to-sample-points-on-surface-based-on-uv-meshsurfacesampler/79171 "2025-03-07T19:28:12Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![mattias\_98](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mattias_98/32/37470_2.png) [@mattias\_98](https://discourse.threejs.org/u/mattias_98)
#### Post date: [March 7, 2025, 7:28pm UTC](https://discourse.threejs.org/t/how-to-sample-points-on-surface-based-on-uv-meshsurfacesampler/79171/1 "2025-03-07T19:28:12Z")

</div>

Hey everyone,

So i’ve been using the [MeshSurfaceSampler](https://threejs.org/docs/#examples/en/math/MeshSurfaceSampler) to sample points along my mesh’ surface, however, I want to sample points based on the Y-coordinates of the mesh’ faces. I UV unwrapped my mesh from a 2D view-perspective, so I can control the weightMap on the Y-coordinate perfectly together with a 2D canvas.

Although the [setWeightAttribute](https://threejs.org/docs/index.html#examples/en/math/MeshSurfaceSampler.setWeightAttribute), method doesnt do what I’d hoped. Instead of sampling the points along the faces of the UV coordinates with smooth interpolation, it samples the points till the nearest vertex when applying the weightMap, obviously the weight is applied to the vertices rather than the faces.

Unfortunately, I can’t afford to subdivide the mesh further.

[Sandbox here.](https://codesandbox.io/p/sandbox/frosty-merkle-z5hksn)  
Use the sampler sliders with the uvAlphaMap checked on and off to see what I mean. I want the points to follow the weighted faces, not the vertices.

---

<div class="post-metadata">

### Author: ![Fennec](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fennec/32/59265_2.png) [@Fennec](https://discourse.threejs.org/u/Fennec)
#### Post date: [March 8, 2025, 12:38am UTC](https://discourse.threejs.org/t/how-to-sample-points-on-surface-based-on-uv-meshsurfacesampler/79171/2 "2025-03-08T00:38:20Z")

</div>

You can try with [three-mesh-bvh](https://github.com/gkjohnson/three-mesh-bvh), you can cast the ray along any axis you need.

Here’s an excellent 👌 implementation:

> [@Sand Nefertiti (three-mesh-bvh)](https://discourse.threejs.org/t/sand-nefertiti-three-mesh-bvh/29098):
>
> Hi community! For years I’ve been dreaming about an instrument, that would allow me to fill a mesh with points, so I could create cool things. My own [attempt](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), based on default raycasting with counting of intersections, was very slow. But everything changed since @gkjohnson released his awesome plugin: [Three-mesh-bvh: A plugin for fast geometry raycasting and spatial queries!](https://discourse.threejs.org/t/three-mesh-bvh-a-plugin-for-fast-geometry-raycasting-and-spatial-queries/26394) Now, I want to show you my new attempt on the field of filling meshes with points. The core of the method is simple: u…

---

<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: [March 8, 2025, 4:30pm UTC](https://discourse.threejs.org/t/how-to-sample-points-on-surface-based-on-uv-meshsurfacesampler/79171/3 "2025-03-08T16:30:42Z")

</div>

> [@mattias\_98](#):
>
> using the [MeshSurfaceSampler](https://threejs.org/docs/#examples/en/math/MeshSurfaceSampler) to sample points along my mesh’ surface

You can use your own logics to put point in different formations, writing the rules you want 🤔

Picture:

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/c/ac850282aed3eb977e2fb7c71e0d0d93988e4475.png)

Demo: [https://codepen.io/prisoner849/full/zxYzQXJ](https://codepen.io/prisoner849/full/zxYzQXJ)

---

<div class="post-metadata">

### Author: ![mattias\_98](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mattias_98/32/37470_2.png) [@mattias\_98](https://discourse.threejs.org/u/mattias_98)
#### Post date: [March 13, 2025, 10:11pm UTC](https://discourse.threejs.org/t/how-to-sample-points-on-surface-based-on-uv-meshsurfacesampler/79171/4 "2025-03-13T22:11:13Z")

</div>

Thank you so much.

I was trying something like that, but I wasn’t being successful in implementing my logic and I’m not really that good at math. You seem to be really good at Three, hence i see your pen’s all the time.

If you don’t mind, I’d love to have someone else have a look at this. I’m basically trying to stack each ‘particle’ on top of each other, and to make it look realistic I need to;

Add some sort of self collission between each particle as well as the the jar itself.

I want to try and fake it using the MeshSurfaceSampler rather than using raytracing or some other expensive type of calculation, as I’m really in a fight with performance here. (I need the jar to be able to be fully filled with 7 different types of instances or sprites, each being different sizes and amounts)

I’m also doing the yValue calculation wrong, I think? There’s something strange going on at the top. The logic is at ./spice.js - #samplePoints.

---

<div class="post-metadata">

### Author: ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)
#### Post date: [March 14, 2025, 3:40am UTC](https://discourse.threejs.org/t/how-to-sample-points-on-surface-based-on-uv-meshsurfacesampler/79171/5 "2025-03-14T03:40:02Z")

</div>

> [@mattias\_98](#):
>
> You seem to be really good at Three

… massive understatement. 😃

… this thread has more goats than a petting zoo.

---

<div class="post-metadata">

### Author: ![mattias\_98](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mattias_98/32/37470_2.png) [@mattias\_98](https://discourse.threejs.org/u/mattias_98)
#### Post date: [March 14, 2025, 5:23am UTC](https://discourse.threejs.org/t/how-to-sample-points-on-surface-based-on-uv-meshsurfacesampler/79171/6 "2025-03-14T05:23:27Z")

</div>

lmao, I put goat first and then changed it be more ‘professional’

Everyone’s so good here, honestly it’s intimidating😭
