# Adding navigation buttons

**URL:** <https://discourse.threejs.org/t/adding-navigation-buttons/15914>\
**Category:** Questions\
**Tags:** labels, annotations\
**Created:** [June 5, 2020, 2:40pm UTC](https://discourse.threejs.org/t/adding-navigation-buttons/15914 "2020-06-05T14:40:49Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Richard\_Davis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/richard_davis/32/11429_2.png) [@Richard\_Davis](https://discourse.threejs.org/u/Richard_Davis)\
**Post date:** [June 5, 2020, 2:40pm UTC](https://discourse.threejs.org/t/adding-navigation-buttons/15914/1 "2020-06-05T14:40:49Z")

</div>

Hi,

I have this project where multiple html/css 2D button navigation has to be added to a three.js webgl brain:

[http://imajinnation.432.co.za/Neural-Network/Neural-Network-2/](http://imajinnation.432.co.za/Neural-Network/Neural-Network-2/)

> **[RichardGeorgeDavis/Neural-Network-Nav](https://github.com/RichardGeorgeDavis/Neural-Network-Nav)**
>
> Contribute to RichardGeorgeDavis/Neural-Network-Nav development by creating an account on GitHub.

I’ve tried following this article but as a newbie, I’m totally lost:

[https://manu.ninja/webgl-three-js-annotations/](https://manu.ninja/webgl-three-js-annotations/)

 ![Screenshot 2020-06-05 at 4.41.44 PM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/5/5eda4769d39a734819cf5dd6b5dadd4e60c793a2.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:** [June 5, 2020, 2:48pm UTC](https://discourse.threejs.org/t/adding-navigation-buttons/15914/2 "2020-06-05T14:48:29Z")

</div>

The visualization of the neural network looks really great!

> [@Richard\_Davis](#):
>
> I’m totally lost:

Can you please explain what parts of the tutorial are difficult to comprehend for you?

---

<div class="post-metadata">

**Author:** ![Richard\_Davis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/richard_davis/32/11429_2.png) [@Richard\_Davis](https://discourse.threejs.org/u/Richard_Davis)\
**Post date:** [June 5, 2020, 2:50pm UTC](https://discourse.threejs.org/t/adding-navigation-buttons/15914/3 "2020-06-05T14:50:49Z")

</div>

The implementing - either I get that the canvas has already been declared, it doesn’t load or the navigation doesn’t go to the correct coordinates.

> **[RichardGeorgeDavis/Neural-Network-Nav](https://github.com/RichardGeorgeDavis/Neural-Network-Nav)**
>
> Contribute to RichardGeorgeDavis/Neural-Network-Nav development by creating an account on GitHub.

---

<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:** [June 5, 2020, 3:46pm UTC](https://discourse.threejs.org/t/adding-navigation-buttons/15914/4 "2020-06-05T15:46:55Z")

</div>

[Neural-Network-Nav-master.zip](https://discourse.threejs.org/uploads/short-url/vKZfluE6D5Jyd36Uf6e5nfrhNG1.zip) (919.0 KB)

I’ve updated your code so the pure HTML/CSS approach should work. I’ve added all changes to `app.js`, meaning the query for the annotation element and the `updateScreenPosition()` function.

Not sure you really need the sprite approach. In any event, because you are using `three.js` in version `r71`, it’s not yet possible to use `THREE.CanvasTexture`. However, you can replace it with the following code:

```auto
const texture = new THREE.Texture( canvas );
texture.needsUpdate = true;

```

---

<div class="post-metadata">

**Author:** ![Richard\_Davis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/richard_davis/32/11429_2.png) [@Richard\_Davis](https://discourse.threejs.org/u/Richard_Davis)\
**Post date:** [June 5, 2020, 7:17pm UTC](https://discourse.threejs.org/t/adding-navigation-buttons/15914/5 "2020-06-05T19:17:40Z")

</div>

You Rock!

Thank you so much.