# Custom Terrain Intersection Question

**URL:** <https://discourse.threejs.org/t/custom-terrain-intersection-question/7178>\
**Category:** Questions\
**Tags:** plane, geometry\
**Created:** [April 20, 2019, 10:00pm UTC](https://discourse.threejs.org/t/custom-terrain-intersection-question/7178 "2019-04-20T22:00:40Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![titansoftime](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/titansoftime/32/1044_2.png) [@titansoftime](https://discourse.threejs.org/u/titansoftime)\
**Post date:** [April 20, 2019, 10:00pm UTC](https://discourse.threejs.org/t/custom-terrain-intersection-question/7178/1 "2019-04-20T22:00:40Z")

</div>

In my game I use a custom terrain (generated from heightmap) intersection method that performs very well. Intersecting the terrain geometry itself is extremely slow so I built this as an alternative.

Basically what I’m doing is determining which terrain “face index” an object is on, grabbing the correlating vertices from the terrain geometry and constructing a `THREE.Plane` object that is set via the referenced co-planar points and intersecting with that.

In most cases this method works great, but on more extreme slopes it kind of breaks down as demonstrated below:

[https://jsfiddle.net/titansoftime/bh9d5g6t/](https://jsfiddle.net/titansoftime/bh9d5g6t/)

These are a couple in-game screens showing this effect. The triangle patterns on the slopes indicates to me that I may be making a mistake. Only half the “face” is working.

![test](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/f/fa9345b73ae39520e1f7e8bea3e58ddec5e4348d.jpeg)

![test2](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/a/a3d6ac07ca8f4829fb0bf3b2a3a68d7eeb083fb2.jpeg)

Am I doing something wrong?

---

<div class="post-metadata">

**Author:** ![Aerion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aerion/32/6633_2.png) [@Aerion](https://discourse.threejs.org/u/Aerion)\
**Post date:** [April 21, 2019, 1:49am UTC](https://discourse.threejs.org/t/custom-terrain-intersection-question/7178/2 "2019-04-21T01:49:33Z")

</div>

I’ve been actually looking for a slope terrain sliding function, based on X-Rotation Angle. Would be great if a very simple example could be put out. Thanks alot & have a great easter! 🙂

---

<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:** [April 21, 2019, 9:09am UTC](https://discourse.threejs.org/t/custom-terrain-intersection-question/7178/3 "2019-04-21T09:09:41Z")

</div>

I refactored your fiddle a bit for a simple (possible) solution: [https://jsfiddle.net/683wL4qe/](https://jsfiddle.net/683wL4qe/)

The idea is to compute the distance from the mesh position to the plane and then subtract this value from the y-component of `ball.position`. But before doing this, you multiply the distance with a value lower than 1 (e.g. `0.2`) in order to have a smooth transition.

Note: At the beginning, the ball moves from `(0, 0, 0)` onto the plane. This can be avoided if you directly assign a valid start position when the mesh is added to the scene.

I’m not sure I understand your raycasting code in `intersectTerrain()` so I just compute the distance to the plane via `Plane.distanceToPoint()` which should be a good approximation. It’s also faster than a raycast. The approach is not a perfect solution but it might be sufficient for certain use cases.

---

<div class="post-metadata">

**Author:** ![titansoftime](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/titansoftime/32/1044_2.png) [@titansoftime](https://discourse.threejs.org/u/titansoftime)\
**Post date:** [April 21, 2019, 7:49pm UTC](https://discourse.threejs.org/t/custom-terrain-intersection-question/7178/4 "2019-04-21T19:49:52Z")

</div>

Very nice! Perfectly smooth and much more performant!

There are certainly use cases that I will use this for.

Unfortunately for my grass positioning, I really needed that accuracy (which is too bad because load time was **much** better with your method).

The triangle pattern clue checked out and ultimately revealed the incredibly obvious mistake I was making. I was only checking half the face and completely ignoring the fact the the other triangle within the face could (and likely does) have a much different orientation. Now I make sure that the indices I use to set the intersect plane are from the triangle that the object is actually within.

[https://jsfiddle.net/titansoftime/qw13oe8r/](https://jsfiddle.net/titansoftime/qw13oe8r/)

I am going to take another stab at implementing your solution but this time with the triangle check as well.

Thank you very much for helping me out =]

---

<div class="post-metadata">

**Author:** ![Aerion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aerion/32/6633_2.png) [@Aerion](https://discourse.threejs.org/u/Aerion)\
**Post date:** [April 21, 2019, 7:57pm UTC](https://discourse.threejs.org/t/custom-terrain-intersection-question/7178/5 "2019-04-21T19:57:45Z")

</div>

@titansoftime Can you add a small example of a camera that is controlled by the keys can slide down a slope if it is too steep?

---

<div class="post-metadata">

**Author:** ![titansoftime](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/titansoftime/32/1044_2.png) [@titansoftime](https://discourse.threejs.org/u/titansoftime)\
**Post date:** [April 21, 2019, 7:59pm UTC](https://discourse.threejs.org/t/custom-terrain-intersection-question/7178/6 "2019-04-21T19:59:18Z")

</div>

If you build a fiddle with an attempt at it, I will be more than happy to check it out.

---

<div class="post-metadata">

**Author:** ![Aerion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aerion/32/6633_2.png) [@Aerion](https://discourse.threejs.org/u/Aerion)\
**Post date:** [April 21, 2019, 8:00pm UTC](https://discourse.threejs.org/t/custom-terrain-intersection-question/7178/7 "2019-04-21T20:00:08Z")

</div>

ok, cool! i will do that 🙂