# Raycasting to buffergeometry failed

**URL:** <https://discourse.threejs.org/t/raycasting-to-buffergeometry-failed/13283>\
**Category:** Questions\
**Tags:** typescript, raycaster\
**Created:** [March 4, 2020, 9:52am UTC](https://discourse.threejs.org/t/raycasting-to-buffergeometry-failed/13283 "2020-03-04T09:52:14Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Torben\_Van\_Assche](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/torben_van_assche/32/9520_2.png) [@Torben\_Van\_Assche](https://discourse.threejs.org/u/Torben_Van_Assche)\
**Post date:** [March 4, 2020, 9:52am UTC](https://discourse.threejs.org/t/raycasting-to-buffergeometry-failed/13283/1 "2020-03-04T09:52:14Z")

</div>

I have these 2 events that are fired, The objects I am targetting are BufferGeometry but its not returning any intersections. The objects in the intersections array are groups, if I change this to check for my meshes it throws an error. Does anyone know what might be causing this to happen?

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/7/71ecaa51eef88bdab2e50ca27ae0bef730c7d051.png)

```auto
export class Raycaster extends THREE.Raycaster {
    mouse: THREE.Vector2 = new THREE.Vector2();

    constructor(camera: THREE.PerspectiveCamera, renderer: Renderer) {
        super();

        fromEvent(renderer.domElement, 'mousemove').subscribe((event: MouseEvent) => {
            const canvasBounds = renderer.domElement.getBoundingClientRect();
            this.mouse.x = ((event.clientX - canvasBounds.left) / (canvasBounds.right - canvasBounds.left)) * 2 - 1;
            this.mouse.y = - ((event.clientY - canvasBounds.top) / (canvasBounds.bottom - canvasBounds.top)) * 2 + 1;
        });

        const click = fromEvent(renderer.domElement, 'click');
        click.subscribe((event: MouseEvent) => {
            this.setFromCamera(this.mouse, camera);

            let arr = [];
            DataController.scene.children[0].children[0].traverse((mesh) => {
                if (mesh.type === "Mesh") {
                    arr.push(mesh);
                }
            });

            const intersections = this.intersectObjects(arr);

            if (intersections.length > 0) {
                ((intersections[0].object as THREE.Mesh).material as MeshStandardMaterial).color.set(0xFF0000);
            }
        });
    }
}

```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 4, 2020, 10:35am UTC](https://discourse.threejs.org/t/raycasting-to-buffergeometry-failed/13283/2 "2020-03-04T10:35:14Z")

</div>

Can you please verify if the geometry actually has data? If `Cannot read property '0' of null` is reported in `BufferAttribute.getX()`, it means that the array property of the buffer attribute is `null`.

---

<div class="post-metadata">

**Author:** ![Torben\_Van\_Assche](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/torben_van_assche/32/9520_2.png) [@Torben\_Van\_Assche](https://discourse.threejs.org/u/Torben_Van_Assche)\
**Post date:** [March 4, 2020, 10:39am UTC](https://discourse.threejs.org/t/raycasting-to-buffergeometry-failed/13283/3 "2020-03-04T10:39:05Z")

</div>

I can see the geometry in the scene, so it should exist. I have made an output of the first element in the array that is passed for intersection checking in case you see anything thats wrong.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/e/e41dfff8791274943450ccb69ad070b4778b666e.png)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 4, 2020, 10:41am UTC](https://discourse.threejs.org/t/raycasting-to-buffergeometry-failed/13283/4 "2020-03-04T10:41:34Z")

</div>

Well, the array property of all attributes is null.

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/f/f939794381885613df1e1f8a9514bfdac3538932.png)

The geometry can still be rendered if the respective WebGL buffers already exist. Sometimes devs clear the array property after the first upload in order to save some memory. The following example also uses this approach:

[https://threejs.org/examples/webgl\_buffergeometry](https://threejs.org/examples/webgl_buffergeometry)

---

<div class="post-metadata">

**Author:** ![Torben\_Van\_Assche](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/torben_van_assche/32/9520_2.png) [@Torben\_Van\_Assche](https://discourse.threejs.org/u/Torben_Van_Assche)\
**Post date:** [March 4, 2020, 10:43am UTC](https://discourse.threejs.org/t/raycasting-to-buffergeometry-failed/13283/5 "2020-03-04T10:43:23Z")

</div>

I see, I will need to check the source code that generates the attributes to be sure they are filled. I will keep you updated once I find the relevant code.

---

<div class="post-metadata">

**Author:** ![Torben\_Van\_Assche](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/torben_van_assche/32/9520_2.png) [@Torben\_Van\_Assche](https://discourse.threejs.org/u/Torben_Van_Assche)\
**Post date:** [March 4, 2020, 12:59pm UTC](https://discourse.threejs.org/t/raycasting-to-buffergeometry-failed/13283/6 "2020-03-04T12:59:36Z")

</div>

Looking in the source code of the package I found this. Seems like he actually did do it to save on memory!

```auto
    function disposeArray() {
        this.array = null;
    }

    three_geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ).onUpload( disposeArray ) );
    three_geometry.setAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ).onUpload( disposeArray ) );
    three_geometry.setAttribute( 'uv', new THREE.Float32BufferAttribute( uvs, 2 ).onUpload( disposeArray ) );

```