# Raycasting to a line or line segment

**URL:** <https://discourse.threejs.org/t/raycasting-to-a-line-or-line-segment/3624>\
**Category:** Questions\
**Tags:** raycaster\
**Created:** [July 31, 2018, 8:05pm UTC](https://discourse.threejs.org/t/raycasting-to-a-line-or-line-segment/3624 "2018-07-31T20:05:35Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![aitheorem](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aitheorem/32/17994_2.png) [@aitheorem](https://discourse.threejs.org/u/aitheorem)\
**Post date:** [July 31, 2018, 8:05pm UTC](https://discourse.threejs.org/t/raycasting-to-a-line-or-line-segment/3624/1 "2018-07-31T20:05:35Z")

</div>

I’m drawing quadrilaterals by using line segments, so that I don’t get diagonals as I do when I use triangles. The issue is when I try to click in the interior of the quadrilateral I get an error message ( as shown below ) which states that v0.distanceTo is not function. There are other geometric shapes being drawn and I get the same error when the quadrilaterals are present. If I remove the quads then the raycasting works without issue. Any help is appreciated in helping me figure out what I’m doing wrong.

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/d/d040d605260e8ffed62bc3d55d63b3fb6cfef77c.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:** [August 1, 2018, 9:44am UTC](https://discourse.threejs.org/t/raycasting-to-a-line-or-line-segment/3624/2 "2018-08-01T09:44:21Z")

</div>

Please provide a [live demo](https://jsfiddle.net/f2Lommf5/) that shows what are you doing in your code.

---

<div class="post-metadata">

**Author:** ![aitheorem](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aitheorem/32/17994_2.png) [@aitheorem](https://discourse.threejs.org/u/aitheorem)\
**Post date:** [August 3, 2018, 6:22pm UTC](https://discourse.threejs.org/t/raycasting-to-a-line-or-line-segment/3624/3 "2018-08-03T18:22:54Z")

</div>

[https://jsfiddle.net/aitheorem/unxh05ka/42/](https://jsfiddle.net/aitheorem/unxh05ka/42/)

This is a scaled down version of what I’m doing.

---

<div class="post-metadata">

**Author:** ![aitheorem](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aitheorem/32/17994_2.png) [@aitheorem](https://discourse.threejs.org/u/aitheorem)\
**Post date:** [August 3, 2018, 6:29pm UTC](https://discourse.threejs.org/t/raycasting-to-a-line-or-line-segment/3624/4 "2018-08-03T18:29:11Z")

</div>

Use this version as the previous version had some duplicated code.

[https://jsfiddle.net/unxh05ka/46/](https://jsfiddle.net/unxh05ka/46/)

---

<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:** [August 3, 2018, 7:05pm UTC](https://discourse.threejs.org/t/raycasting-to-a-line-or-line-segment/3624/5 "2018-08-03T19:05:15Z")

</div>

You have created a vector object like this:

```auto
vec0 = {};

```

Since `vec0` is now no instance of `THREE.Vector3`, you get the mentioned error.

Fixed example: [https://jsfiddle.net/unxh05ka/54/](https://jsfiddle.net/unxh05ka/54/)

---

<div class="post-metadata">

**Author:** ![aitheorem](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aitheorem/32/17994_2.png) [@aitheorem](https://discourse.threejs.org/u/aitheorem)\
**Post date:** [August 3, 2018, 7:38pm UTC](https://discourse.threejs.org/t/raycasting-to-a-line-or-line-segment/3624/6 "2018-08-03T19:38:10Z")

</div>

I appreciate the help. The error has been removed but the intersects array has no face or faceindex information when the triangles are clicked on. Likewise, clicking in the quadrilateral always yields an index value of 0. Is this because the quads and triangle share a common border?

---

<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:** [August 4, 2018, 8:27am UTC](https://discourse.threejs.org/t/raycasting-to-a-line-or-line-segment/3624/7 "2018-08-04T08:27:22Z")

</div>

Update fiddle: [https://jsfiddle.net/unxh05ka/61/](https://jsfiddle.net/unxh05ka/61/)

If I click on the triangles, I get intersections with different face indices. It seems to me that the winding order of your triangles is messed up. I had to rotate the mesh so the front faces are headed towards the camera.

---

<div class="post-metadata">

**Author:** ![aitheorem](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aitheorem/32/17994_2.png) [@aitheorem](https://discourse.threejs.org/u/aitheorem)\
**Post date:** [August 4, 2018, 4:55pm UTC](https://discourse.threejs.org/t/raycasting-to-a-line-or-line-segment/3624/8 "2018-08-04T16:55:47Z")

</div>

Thank you very much!!