# Having trouble getting point index clicked on in Points geometry

**URL:** <https://discourse.threejs.org/t/having-trouble-getting-point-index-clicked-on-in-points-geometry/58390>\
**Category:** Questions\
**Tags:** raycaster\
**Created:** [November 20, 2023, 7:24pm UTC](https://discourse.threejs.org/t/having-trouble-getting-point-index-clicked-on-in-points-geometry/58390 "2023-11-20T19:24:08Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![ajmas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ajmas/32/41789_2.png) [@ajmas](https://discourse.threejs.org/u/ajmas)\
**Post date:** [November 20, 2023, 7:24pm UTC](https://discourse.threejs.org/t/having-trouble-getting-point-index-clicked-on-in-points-geometry/58390/1 "2023-11-20T19:24:08Z")

</div>

I have a scene which takes on the form of a sphere, representing the Earth, with a collection of points in orbit. I now want to be able to click on a given point and get its index, but I am having trouble getting it working.

I am looking at other questions, but I don’t seem to be working out the missing piece of the puzzle.

The camera and scene are setup as follows:

```javascript
    this.scene = new SatelliteOrbitScene();
    this.camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );

    this.renderer = new WebGLRenderer({ antialias: false });
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    document
      .querySelector(this.config.canvasSelector)
      ?.appendChild(this.renderer.domElement);

    this.controls = new OrbitControls( this.camera, this.renderer.domElement );
    this.camera.position.set( 15, 0, 10000 );
    this.controls.update();

    this.raycaster = new Raycaster();

```

The points are set up as follows:

```javascript
    const geometry = new BufferGeometry();
    const vertices: Float32Array = new Float32Array();
    const sizes: Float32Array = new Float32Array();
    const colors: number[] = [];

    vertices.fill(0, 0, this.satelliteStore.satData.length * 3);
    colors.fill(0, 0, this.satelliteStore.satData.length * 3);
    sizes.fill(10, 0, this.satelliteStore.satData.length);

    geometry.setAttribute('position', new Float32BufferAttribute( vertices, 3 ) );
    geometry.setAttribute('color', new Float32BufferAttribute( colors, 4 ) );
    geometry.setAttribute('size', new Float32BufferAttribute( sizes, 1 ) );

    const texture = new TextureLoader().load(`${this.baseUrl}/images/circle.png`);
    const shader = this.shaderStore.getShader('dot2');

    const material = new ShaderMaterial({
      uniforms: {
        color: { value: new Color( 0xffffff ) },
        pointTexture: { value: texture }
      },
      clipping: true,
      vertexShader: shader.vertex,
      fragmentShader: shader.fragment,
      blending: AdditiveBlending,
      depthTest: true,
      transparent: true
    });

```

Then trying to handle the click:

```javascript
    const canvasElement = this.renderer.domElement;
    canvasElement.addEventListener('click', (event:MouseEvent) => {
      if (!this.raycaster || !this.scene) {
        return;
      }

      const bounds = canvasElement.getBoundingClientRect();
      const mouse: Vector2 = new Vector2();
      mouse.x = ( (event.clientX - bounds.left) / canvasElement.clientWidth ) * 2 - 1;
      mouse.y = - ( (event.clientY - bounds.top) / canvasElement.clientHeight ) * 2 + 1;
      this.raycaster.setFromCamera( mouse, this.camera as PerspectiveCamera);
      const intersects = this.raycaster.intersectObjects(this.scene.children, true);
      if (intersects.length > 0) {
        console.log('>>>', intersects);
        // Do stuff
      }
    });

```

When I look at the value of `intersects` I am not seeing anything that would let me know the point that was clicked.

Can anyone suggest where I’m going wrong?

BTW the project code: [GitHub - ajmas/StuffInSpace at issue-1-threejs](https://github.com/ajmas/StuffInSpace/tree/issue-1-threejs)

---

<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:** [November 21, 2023, 1:51am UTC](https://discourse.threejs.org/t/having-trouble-getting-point-index-clicked-on-in-points-geometry/58390/2 "2023-11-21T01:51:36Z")

</div>

What DO you see when you get an intersect? Or are you not getting an intersect?

(you can adjust the tolerance of point clicking by adjusting the raycaster.params.Point.threshold)

[https://threejs.org/docs/#api/en/core/Raycaster.params](https://threejs.org/docs/#api/en/core/Raycaster.params)

---

<div class="post-metadata">

**Author:** ![ajmas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ajmas/32/41789_2.png) [@ajmas](https://discourse.threejs.org/u/ajmas)\
**Post date:** [November 23, 2023, 5:56pm UTC](https://discourse.threejs.org/t/having-trouble-getting-point-index-clicked-on-in-points-geometry/58390/3 "2023-11-23T17:56:12Z")

</div>

If I adjust the points threshold (`this.raycaster.params.Points.threshold`):

- 1: Unless I click on the Earth nothing. It just gives me 2 intersects when clicking on the earth
- 5: Unless I click on the Earth nothing. It just gives me 2 intersects when clicking on the earth
- 5.1+: Clicking on a point gives me 11000 intersects

I also tried 0.1 per [another question](https://discourse.threejs.org/t/raycast-to-select-points-in-pointcloud-returns-all-points-intersectobjects/21428), but no help.

Looks this is not quite the solution by itself.

---

<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:** [November 24, 2023, 7:27am UTC](https://discourse.threejs.org/t/having-trouble-getting-point-index-clicked-on-in-points-geometry/58390/4 "2023-11-24T07:27:19Z")

</div>

I’m all out of ideas. 🙂 can you make a minimal repro that shows the issue, in something like glitch?

---

<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:** [November 24, 2023, 8:48am UTC](https://discourse.threejs.org/t/having-trouble-getting-point-index-clicked-on-in-points-geometry/58390/5 "2023-11-24T08:48:55Z")

</div>

Hi!

> [@ajmas](#):
>
> `vertexShader: shader.vertex,`

What does happen in vertex shader?  
If you move vertices with shader, then raycaster knows nothing about it, as it works with data of a geometry on JS side.

---

<div class="post-metadata">

**Author:** ![ajmas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ajmas/32/41789_2.png) [@ajmas](https://discourse.threejs.org/u/ajmas)\
**Post date:** [November 24, 2023, 8:21pm UTC](https://discourse.threejs.org/t/having-trouble-getting-point-index-clicked-on-in-points-geometry/58390/6 "2023-11-24T20:21:37Z")

</div>

Based on @manthrax’s suggestion I have created a cut down sandbox project and I do see that it is working in the scenario. I’ll need to explore why this isn’t working properly in my main project.

> **[JavaScript Playground](https://playcode.io/1673614)**
>
> Try this online JavaScript Playground playground with instant live preview and console. Easy & Fast. Experiment yourself.

And on GitHub: [GitHub - ajmas/threejs-points-raycast: Sandbox project to demonstrate raycasting for click in a point cloud](https://github.com/ajmas/threejs-points-raycast)

At the very least this serves as a working example for anyone else dealing with a point cloud.

BTW to answer @prisoner849: replacing the `ShaderMaterial` with `PointsMaterial` in the main project didn’t resolve the issue. The vertex shader code was:

```javascript
attribute float size;
attribute vec4 color;

varying vec4 vColor;

void main() {
  vec4 position = projectionMatrix * modelViewMatrix * vec4(position,1.);
  gl_PointSize = min(max(320000.0 / position.w, 7.5), 20.0) * 1.0;
  gl_Position = position;
  vColor = color;
}

```

---

<div class="post-metadata">

**Author:** ![agargaro](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/agargaro/32/35529_2.png) [@agargaro](https://discourse.threejs.org/u/agargaro)\
**Post date:** [November 24, 2023, 9:42pm UTC](https://discourse.threejs.org/t/having-trouble-getting-point-index-clicked-on-in-points-geometry/58390/7 "2023-11-24T21:42:29Z")

</div>

Opening the example with chrome, it seems to work, the points I click turn red.  
Maybe I don’t quite understand the problem as the raycaster seems to work.

---

<div class="post-metadata">

**Author:** ![ajmas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ajmas/32/41789_2.png) [@ajmas](https://discourse.threejs.org/u/ajmas)\
**Post date:** [November 24, 2023, 10:36pm UTC](https://discourse.threejs.org/t/having-trouble-getting-point-index-clicked-on-in-points-geometry/58390/8 "2023-11-24T22:36:50Z")

</div>

The example works, so I now have a reference of part of the code which works. I shared it so others could make use of it - there are a lot questions on raycaster and points cloud, but not any that really came with a suitable working example.

It just isn’t working as part of my integrated code (see project linked at start), so I’ll need to explore what could be throwing off the raycaster and share my findings.

---

<div class="post-metadata">

**Author:** ![ajmas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ajmas/32/41789_2.png) [@ajmas](https://discourse.threejs.org/u/ajmas)\
**Post date:** [November 30, 2023, 7:31pm UTC](https://discourse.threejs.org/t/having-trouble-getting-point-index-clicked-on-in-points-geometry/58390/9 "2023-11-30T19:31:44Z")

</div>

I did some more digging and the issue is happening if the point coordinates are updated after the initial render.

So in the code I initially provided above:

```javascript
const vertices: Float32Array = new Float32Array();

```

and then:

```javascript
setTimeout(() => {
  geometry.setAttribute('position', new Float32BufferAttribute(allPointCoords, 3));
}, 200);

```

This reproduces the issue: [Raycasting Troubleshooting](https://playcode.io/1680010)

I suspect there is a call I am missing to let the raycaster to use the new values?

---

<div class="post-metadata">

**Author:** ![ajmas](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ajmas/32/41789_2.png) [@ajmas](https://discourse.threejs.org/u/ajmas)\
**Post date:** [November 30, 2023, 7:36pm UTC](https://discourse.threejs.org/t/having-trouble-getting-point-index-clicked-on-in-points-geometry/58390/10 "2023-11-30T19:36:07Z")

</div>

So this missing part to all this was calling some functions following the position attribute changes:

```javascript
geometry.computeBoundingBox();
geometry.computeBoundingSphere();

```

Documentation on this: [three.js docs](https://threejs.org/docs/#manual/en/introduction/How-to-update-things)

Updated example, showing the working solution: [Raycasting and updating points](https://playcode.io/1680028)