# Simplest example with Drei sampler

**URL:** https://discourse.threejs.org/t/simplest-example-with-drei-sampler/64921
**Category:** Questions
**Tags:** geometry
**Created:** [May 1, 2024, 2:54pm UTC](https://discourse.threejs.org/t/simplest-example-with-drei-sampler/64921 "2024-05-01T14:54:55Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![amo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/amo/32/45580_2.png) [@amo](https://discourse.threejs.org/u/amo)
#### Post date: [May 1, 2024, 2:54pm UTC](https://discourse.threejs.org/t/simplest-example-with-drei-sampler/64921/1 "2024-05-01T14:54:55Z")

</div>

Hi,

can you give me the simplest transformInstance function to make the code below works ? I can’t succeed doing this.  
Thanks

```javascript
<Sampler
      weight={"normal"} // the name of the attribute to be used as sampling weight
      transform={transformInstance} // a function that transforms each instance given a sample. See the examples for more.
      count={16} // Number of samples
    >
      <mesh>
        <sphereGeometry args={[2]} />
      </mesh>

      <instancedMesh args={[null, null, 1_000]}>
        <sphereGeometry args={[0.1]} />
      </instancedMesh>
    </Sampler>

```

---

<div class="post-metadata">

### Author: ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)
#### Post date: [May 1, 2024, 3:56pm UTC](https://discourse.threejs.org/t/simplest-example-with-drei-sampler/64921/2 "2024-05-01T15:56:27Z")

</div>

here’s a simpler example than the one in the drei github docs

[https://codesandbox.io/p/sandbox/donut-sampler-tb2l6h](https://codesandbox.io/p/sandbox/donut-sampler-tb2l6h)

---

<div class="post-metadata">

### Author: ![rob-myers](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rob-myers/32/17590_2.png) [@rob-myers](https://discourse.threejs.org/u/rob-myers)
#### Post date: [May 1, 2024, 4:04pm UTC](https://discourse.threejs.org/t/simplest-example-with-drei-sampler/64921/3 "2024-05-01T16:04:25Z")

</div>

Here’s another basic example:

[https://hgtkym-5173.csb.app/?component=DreiSamplerTest](https://hgtkym-5173.csb.app/?component=DreiSamplerTest)

> <https://github.com/rob-myers/three-js-examples/blob/14af4a2742ec3d8a27637a9bccbcc1199af795ed/src/r3f/drei-sampler-test.tsx>

---

<div class="post-metadata">

### Author: ![amo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/amo/32/45580_2.png) [@amo](https://discourse.threejs.org/u/amo)
#### Post date: [May 1, 2024, 5:13pm UTC](https://discourse.threejs.org/t/simplest-example-with-drei-sampler/64921/4 "2024-05-01T17:13:09Z")

</div>

> [@rob-myers](#):
>
> ```javascript
> import { OrbitControls, Sampler, TransformFn } from "@react-three/drei";
> 
> export default function DreiSamplerTest() {
> return <>
> <OrbitControls
> onUpdate={x => x.setPolarAngle(Math.PI * (3 / 8))}
> />
> <ambientLight />
> <Sampler
> weight={"normal"} // the name of the attribute to be used as sampling weight
> transform={transformInstance} // a function that transforms each instance given a sample. See the examples for more.
> count={count} // Number of samples
> >
> <mesh>
> <sphereGeometry args={[1]} />
> <meshStandardMater
> 
> ```

Thank you it works like a charm

---

<div class="post-metadata">

### Author: ![amo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/amo/32/45580_2.png) [@amo](https://discourse.threejs.org/u/amo)
#### Post date: [May 2, 2024, 2:55pm UTC](https://discourse.threejs.org/t/simplest-example-with-drei-sampler/64921/5 "2024-05-02T14:55:12Z")

</div>

your example works but if I replace

```javascript
<Sampler
      weight={"normal"} // the name of the attribute to be used as sampling weight
      transform={transformInstance} // a function that transforms each instance given a sample. See the examples for more.
      count={count} // Number of samples
    >
 <mesh>
        <sphereGeometry args={[1]} />
        <meshStandardMaterial color="blue" wireframe />
      </mesh>

```

with

```javascript

  const nodes = useFBX("/Blue.fbx");
  return (

    <Sampler
          ...
         <mesh>
          <primitive object={nodes} scale={0.1} />
        </mesh>

```

it doesn’t work, how to place the sphere on the fbx object ?

---

<div class="post-metadata">

### Author: ![rob-myers](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rob-myers/32/17590_2.png) [@rob-myers](https://discourse.threejs.org/u/rob-myers)
#### Post date: [May 2, 2024, 11:14pm UTC](https://discourse.threejs.org/t/simplest-example-with-drei-sampler/64921/6 "2024-05-02T23:14:47Z")

</div>

Not sure if I understand. Can you provide more code, or e.g. a codesandbox?

---

<div class="post-metadata">

### Author: ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)
#### Post date: [May 2, 2024, 11:39pm UTC](https://discourse.threejs.org/t/simplest-example-with-drei-sampler/64921/7 "2024-05-02T23:39:07Z")

</div>

I believe in general the `<Sampler/>` abstraction is designed to mount instances of one _mesh_ on the surface of another _mesh_. not a collection of nodes on the surface of another collection of nodes. that’s how THREE.MeshSurfaceSampler works anyway, unless `<Sampler />` adds something else to handle node subtrees.

---

<div class="post-metadata">

### Author: ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)
#### Post date: [May 3, 2024, 6:20am UTC](https://discourse.threejs.org/t/simplest-example-with-drei-sampler/64921/8 "2024-05-03T06:20:33Z")

</div>

```jsx
<Sampler>
  <mesh geometry={nodes.anyOneMesh.geometry} scale={0.1}>
    <meshStandardMaterial color="blue" wireframe />
  </mesh>
</Sampler>

```

like @donmccurdy said, the MeshSurfaceSampler operates on one single mesh. not a group, or a mesh inside an empty mesh (like in your example). a mesh in threejs has a geometry and a material, if it doesn’t it’s basically a group.

if you want to sample the whole model with all its parts you have to join and possibly bake materials into one in blender.