# R3f instance positions

**URL:** <https://discourse.threejs.org/t/r3f-instance-positions/70204>\
**Category:** Questions\
**Created:** [September 2, 2024, 9:28pm UTC](https://discourse.threejs.org/t/r3f-instance-positions/70204 "2024-09-02T21:28:56Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![coder2012](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/coder2012/32/7185_2.png) [@coder2012](https://discourse.threejs.org/u/coder2012)\
**Post date:** [September 2, 2024, 9:28pm UTC](https://discourse.threejs.org/t/r3f-instance-positions/70204/1 "2024-09-02T21:28:56Z")

</div>

When using instances we can specify the position of each one.

Is there a best practice way to put instances in specific locations.

In blender I would use a vertex group to do this.

In r3f I can think of maybe using a black and white mask or maybe defining some region to exclude my instances.

How do you guys deal with this problem?

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [September 2, 2024, 10:49pm UTC](https://discourse.threejs.org/t/r3f-instance-positions/70204/2 "2024-09-02T22:49:31Z")

</div>

here is a quick example of 10000 monkey heads using R3F

> **[R3F Instanced Mesh](https://editor.sbcode.net/eedd8616611c0f9849b4a330b5db58491ee7e3cd)**
>
> https://editor.sbcode.net/eedd8616611c0f9849b4a330b5db58491ee7e3cd

In a `useEffect`, use `setMatrixAt`

---

<div class="post-metadata">

**Author:** ![coder2012](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/coder2012/32/7185_2.png) [@coder2012](https://discourse.threejs.org/u/coder2012)\
**Post date:** [September 3, 2024, 6:24am UTC](https://discourse.threejs.org/t/r3f-instance-positions/70204/3 "2024-09-03T06:24:11Z")

</div>

Thank you for your reply @seanwasere, either you didn’t understand my question or I didn’t explain it well enough.

I know how to do instancing and use `setMatrixAt`.

The problem I need help with, is determining how to show instances in some locations but not others, using a mask for example.

Say I have a landscape, and I only want trees on two hills that run down the side of a valley but not on the valley in-between those hills.

What’s the best way to do this really to get the coordinates needed for each instance?

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [September 3, 2024, 7:45am UTC](https://discourse.threejs.org/t/r3f-instance-positions/70204/4 "2024-09-03T07:45:19Z")

</div>

> [@coder2012](#):
>
> using a mask for example.

You could likely use a surface sampler on the land geometry with painted vertecise to weight the distribution of trees (white = 1, black = 0)

---

<div class="post-metadata">

**Author:** ![coder2012](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/coder2012/32/7185_2.png) [@coder2012](https://discourse.threejs.org/u/coder2012)\
**Post date:** [September 4, 2024, 9:15pm UTC](https://discourse.threejs.org/t/r3f-instance-positions/70204/5 "2024-09-04T21:15:40Z")

</div>

Hey @Lawrence3DPK

Thanks for the idea, so it inspired me to look into this a little more, and I ended up grabbing the image data from the texture, then using the npm package poisson-disk-sampling, to do some variation and avoid overlapping. Here’s my prototype for anyone else who wants to do similar or has a better idea.

```javascript
import { useMemo } from 'react';
import PoissonDiskSampling from 'poisson-disk-sampling';

const getImageData = (texture) => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const { width, height } = texture.image;

  // Set canvas size to match texture size
  canvas.width = width;
  canvas.height = height;

  // Draw the image onto the canvas
  ctx.drawImage(texture.image, 0, 0, width, height);

  // Extract pixel data
  return ctx.getImageData(0, 0, width, height).data;
}

export const Boxes = ({ maskTexture }) => {
  const positions = useMemo(() => {
    const data = getImageData(maskTexture);
    const width = maskTexture.image.width;
    const height = maskTexture.image.height;

    const sampler = new PoissonDiskSampling({
      shape: [width, height], // Define the area size
      minDistance: 60, // Minimum distance between points
      tries: 30 // Attempts per point
    });

    const points = sampler.fill();
    const positions = [];

    points.forEach(([x, z]) => {
      const texX = Math.floor(x);
      const texY = Math.floor(z);
      const index = (texY * width + texX) * 4 + 3; // Access alpha channel
      const maskValue = data[index];

      if (maskValue === 255) {
        positions.push([(x / width) * 10 - 5, 0, (z / height) * 10 - 5]); // Scale to scene
      }
    });

    return positions;
  }, [maskTexture]);

  return (
    <>
      {positions.map((pos, idx) => (
        <mesh key={idx} position={pos}>
          <boxGeometry args={[0.3, 0.3, 0.3]} />
          <meshStandardMaterial color="orange" />
        </mesh>
      ))}
    </>
  );
}

```

 ![test](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/e/dea51f9295ba4300cba145edce7d4a4186312554.png)