# 3d Navigation w/ Yuka.js (1st attempt)

**URL:** <https://forum.babylonjs.com/t/3d-navigation-w-yuka-js-1st-attempt/34052>\
**Category:** Demos and projects\
**Tags:** yuka, ai, navigation\
**Created:** [September 19, 2022, 10:14pm UTC](https://forum.babylonjs.com/t/3d-navigation-w-yuka-js-1st-attempt/34052 "2022-09-19T22:14:52Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![arcman7](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/arcman7/32/20249_2.png) [@arcman7](https://forum.babylonjs.com/u/arcman7)\
**Post date:** [September 19, 2022, 10:14pm UTC](https://forum.babylonjs.com/t/3d-navigation-w-yuka-js-1st-attempt/34052/1 "2022-09-19T22:14:52Z")

</div>

Original:

> **[Babylon.js Playground](https://playground.babylonjs.com/#I5XTGK)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Slightly-cleaned:

> **[Babylon.js Playground](https://playground.babylonjs.com/#I5XTGK%2317)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

This playground demonstrates a first attempt at getting the Yuka.js NavMesh class working on a non-flat 3d terrain. In this example the terrain being used is the surface of a tree-trunk and it’s branches.

You’ll notice in the code, there’s a function called connectNodes (being used at lines 108-128), and it is used to literally patch the navMesh.graph with the missing graph edges necessary to allow navigation from any of the branches back to the main tree-trunk.

Currently the best navigation is achieved by first selecting a point on the surface of the tree trunk _near_ the branch you want to travel to, allow the cone to travel to that position first and then click somewhere on the branch. Otherwise the path generator is prone to generating unrealistic paths.

I realize this is pretty hacky, but you’ve gotta start somewhere! I’m also really hoping that people smarter than me will chime in 😃

I wanted to note that I borrowed a bunch of code from @labris/@roland 's examples, it was extremely helpful.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [September 20, 2022, 2:16pm UTC](https://forum.babylonjs.com/t/3d-navigation-w-yuka-js-1st-attempt/34052/2 "2022-09-20T14:16:53Z")

</div>

Nice !!!

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [September 20, 2022, 2:33pm UTC](https://forum.babylonjs.com/t/3d-navigation-w-yuka-js-1st-attempt/34052/3 "2022-09-20T14:33:16Z")

</div>

That’s super cool! 😃

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [September 23, 2022, 8:19am UTC](https://forum.babylonjs.com/t/3d-navigation-w-yuka-js-1st-attempt/34052/4 "2022-09-23T08:19:05Z")

</div>

Hi!  
Unfortunatelly the PG didn’t load for me ☹

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [September 23, 2022, 12:57pm UTC](https://forum.babylonjs.com/t/3d-navigation-w-yuka-js-1st-attempt/34052/5 "2022-09-23T12:57:51Z")

</div>

Oh weird, it was loading for me before 😮 Maybe a server problem?  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/0/1093e3fb276b2d4bf64e094e273ec47008a8c080.png)

---

<div class="post-metadata">

**Author:** ![arcman7](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/arcman7/32/20249_2.png) [@arcman7](https://forum.babylonjs.com/u/arcman7)\
**Post date:** [September 23, 2022, 5:37pm UTC](https://forum.babylonjs.com/t/3d-navigation-w-yuka-js-1st-attempt/34052/6 "2022-09-23T17:37:19Z")

</div>

@roland @carolhmj that’s my bad 😕 Ive been switching the urls around for different buckets. I really need to start hosting everything for useful playgrounds over to a [github.io](http://github.io) endpoint.

This pg should work:

> **[Babylon.js Playground](https://playground.babylonjs.com/#I5XTGK%2318)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Please let me know if it doesn’t

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [September 30, 2022, 7:38am UTC](https://forum.babylonjs.com/t/3d-navigation-w-yuka-js-1st-attempt/34052/7 "2022-09-30T07:38:41Z")

</div>

Hi! Well done @arcman7!

I like the idea a lot!

> [@arcman7](#):
>
> Currently the best navigation is achieved by first selecting a point on the surface of the tree trunk _near_ the branch you want to travel to, allow the cone to travel to that position first and then click somewhere on the branch. Otherwise the path generator is prone to generating unrealistic paths.

Yes, this is the case, sometimes the ship/vehicle just starts to twerk 😃 But if I select the end of the branch it navigates quite smoothly. I am looking forward for the next version!

🖖

r.

---

<div class="post-metadata">

**Author:** ![arcman7](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/arcman7/32/20249_2.png) [@arcman7](https://forum.babylonjs.com/u/arcman7)\
**Post date:** [September 30, 2022, 3:44pm UTC](https://forum.babylonjs.com/t/3d-navigation-w-yuka-js-1st-attempt/34052/8 "2022-09-30T15:44:17Z")

</div>

Live long & prosper! 🖖
