# Draw a line on surface mesh!

**URL:** <https://discourse.threejs.org/t/draw-a-line-on-surface-mesh/33488>\
**Category:** Questions\
**Tags:** surface, geometry\
**Created:** [January 11, 2022, 4:06am UTC](https://discourse.threejs.org/t/draw-a-line-on-surface-mesh/33488 "2022-01-11T04:06:33Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![vacsHoai](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vacshoai/32/13764_2.png) [@vacsHoai](https://discourse.threejs.org/u/vacsHoai)\
**Post date:** [January 11, 2022, 4:06am UTC](https://discourse.threejs.org/t/draw-a-line-on-surface-mesh/33488/1 "2022-01-11T04:06:33Z")

</div>

Hello guys,

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/c/ac36d86dde604431a0b3dab0719202a8243937e7.jpeg)  
I want a function to view the terrain shape and measure its height. How can I draw a line from 2 points on the surface of the model.  
Can anyone give me some directions. Any information is precious to me.  
Thanks.

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [January 11, 2022, 7:45am UTC](https://discourse.threejs.org/t/draw-a-line-on-surface-mesh/33488/2 "2022-01-11T07:45:46Z")

</div>

See  
[[SOLVED]Mesure distance between two points on a object by clicking - #34 by prisoner849](https://discourse.threejs.org/t/solved-mesure-distance-between-two-points-on-a-object-by-clicking/6082/34)  
[https://codepen.io/prisoner849/pen/NozKOL](https://codepen.io/prisoner849/pen/NozKOL)

and from the [Collection of examples from discourse.threejs.org](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315)

[ExtendedLineAtoB](https://hofk.de/main/discourse.threejs/2020/ExtendedLineAtoB/ExtendedLineAtoB.html)

---

<div class="post-metadata">

**Author:** ![vacsHoai](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vacshoai/32/13764_2.png) [@vacsHoai](https://discourse.threejs.org/u/vacsHoai)\
**Post date:** [January 11, 2022, 8:03am UTC](https://discourse.threejs.org/t/draw-a-line-on-surface-mesh/33488/3 "2022-01-11T08:03:34Z")

</div>

Thank you for your response. But what I want is a line connecting 2 points and lying on the surface of the object, not a line segment representing the distance of those 2 points.  
Like that:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/6/26c54b1eeb4568093b451157f5a16949ebc813c7.png)

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [January 11, 2022, 8:44am UTC](https://discourse.threejs.org/t/draw-a-line-on-surface-mesh/33488/4 "2022-01-11T08:44:19Z")

</div>

Maybe you can modify this example @prisoner849 ?

[LineOnHover](https://hofk.de/main/discourse.threejs/2021/LineOnHover/LineOnHover.html)

 ![2022-01-11 09.40.29](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/a/8a2ee386ab42f9f6f9137cce86ded9ed0c69938e.png)

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [January 11, 2022, 9:06am UTC](https://discourse.threejs.org/t/draw-a-line-on-surface-mesh/33488/5 "2022-01-11T09:06:53Z")

</div>

One of solution is using geometry intersection. Line like thin box.

> **[GitHub - manthrax/THREE-CSGMesh: Conversion of a CSG library for use with...](https://github.com/manthrax/THREE-CSGMesh)**
>
> Conversion of a CSG library for use with modern THREE.js - GitHub - manthrax/THREE-CSGMesh: Conversion of a CSG library for use with modern THREE.js

> **[commonNodeJS/intersections at master · anhr/commonNodeJS](https://github.com/anhr/commonNodeJS/tree/master/intersections)**
>
> master/intersections

[https://raw.githack.com/anhr/commonNodeJS/master/intersections/Examples/index.html](https://raw.githack.com/anhr/commonNodeJS/master/intersections/Examples/index.html)  
Or decals: [three.js examples](https://threejs.org/examples/?q=dec#webgl_decals)

---

<div class="post-metadata">

**Author:** ![1000island](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/1000island/32/28687_2.png) [@1000island](https://discourse.threejs.org/u/1000island)\
**Post date:** [August 10, 2022, 6:09am UTC](https://discourse.threejs.org/t/draw-a-line-on-surface-mesh/33488/6 "2022-08-10T06:09:18Z")

</div>

@vacsHoai did any of the suggestions here work for you? I am trying to do the same thing (draw a surface line and do a measurement), but with a more complex mesh. Thanks!