# How to add controllers to change the color of the cube? (page2controlers)

**URL:** <https://discourse.threejs.org/t/how-to-add-controllers-to-change-the-color-of-the-cube-page2controlers/15300>\
**Category:** Questions\
**Tags:** datgui\
**Created:** [May 18, 2020, 3:21am UTC](https://discourse.threejs.org/t/how-to-add-controllers-to-change-the-color-of-the-cube-page2controlers/15300 "2020-05-18T03:21:02Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Victor\_M\_Barba](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/victor_m_barba/32/10693_2.png) [@Victor\_M\_Barba](https://discourse.threejs.org/u/Victor_M_Barba)\
**Post date:** [May 18, 2020, 3:21am UTC](https://discourse.threejs.org/t/how-to-add-controllers-to-change-the-color-of-the-cube-page2controlers/15300/1 "2020-05-18T03:21:02Z")

</div>

Hello:

I see that is possible to add a control to change a color of a cube.  
I see that in the top right hand corner.  
It’s a little drop down menu that you can change: color, position, rotation etc.

I’m trying to learn how to add this feature to my scene.

I have this page where I want to add it: [https://www.songnes.com/gift/page2controls.html](https://www.songnes.com/gift/page2controls.html)  
hers is the code: [https://www.songnes.com/gift/page2controls.txt](https://www.songnes.com/gift/page2controls.txt)

```
control(open);

```

or something I just don’t know how to do it. Can you please help?

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [May 18, 2020, 7:22am UTC](https://discourse.threejs.org/t/how-to-add-controllers-to-change-the-color-of-the-cube-page2controlers/15300/2 "2020-05-18T07:22:22Z")

</div>

[http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage](http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage)

Do you mean this UI? It shows step by step how to add it to your project.  
What options you’d allow to change depends on you - you can connect Dat.GUI controls to any param of your object.

---

<div class="post-metadata">

**Author:** ![Victor\_M\_Barba](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/victor_m_barba/32/10693_2.png) [@Victor\_M\_Barba](https://discourse.threejs.org/u/Victor_M_Barba)\
**Post date:** [May 19, 2020, 3:05am UTC](https://discourse.threejs.org/t/how-to-add-controllers-to-change-the-color-of-the-cube-page2controlers/15300/3 "2020-05-19T03:05:59Z")

</div>

Thank you mjurczyk.  
I have seen that page, probably 57 times or more…  
it must be very famous…  
I do not understand what they are saying… it is too advanced for me, yet.  
I wish there would be a lower level, to:

FIRST: Understand how to actually put the gui.dat in my scene and make it work.  
SECOND: once that is working and I can change a color, (for example)  
then change maybe position or rotation

like that, I am a very beginner, that page it’s too much for now, I honestly don’t understand it

can you help me with the very beginner stuff? Thanks!

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 19, 2020, 6:56am UTC](https://discourse.threejs.org/t/how-to-add-controllers-to-change-the-color-of-the-cube-page2controlers/15300/4 "2020-05-19T06:56:00Z")

</div>

Feel free to search the forum

> [@Change color of a mesh loaded with PLYLoader](https://discourse.threejs.org/t/change-color-of-a-mesh-loaded-with-plyloader/4949):
>
> Hi, I can’t change the color of the loaded mesh with PLYLoader. I can change color of other objects with dat.gui but not the mesh. You can view the CodePen below. Could you please help me out? See the Pen [Change color with dat.gui](https://codepen.io/brabbit640/pen/bQNPOB/) by brabbit640 ([@brabbit640](https://codepen.io/brabbit640)) on [CodePen](https://codepen.io). Thank you very much

> [@Victor\_M\_Barba](#):
>
> `control(open);`

`control.open();` reference: [dat.gui/API.md at 071edeb334c246ac5eb406010c773dfbb8f6dcce · dataarts/dat.gui · GitHub](https://github.com/dataarts/dat.gui/blob/071edeb334c246ac5eb406010c773dfbb8f6dcce/API.md#guiopen)

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [May 19, 2020, 7:19am UTC](https://discourse.threejs.org/t/how-to-add-controllers-to-change-the-color-of-the-cube-page2controlers/15300/5 "2020-05-19T07:19:07Z")

</div>

`FIRST: Understand how to actually put the gui.dat in my scene and make it work.`

See here how to add dat.gui to your project: [https://github.com/dataarts/dat.gui#packaged-builds](https://github.com/dataarts/dat.gui#packaged-builds)

`SECOND: once that is working and I can change a color, (for example) then change maybe position or rotation`

How to add gui to scene is explained step by step in the link I send you before. Take a moment to read it,  
it is not that complex. You can also see a ThreeJS code example here:

> <https://github.com/mrdoob/three.js/blob/79edf22a345079dc6cf5d8c6ad38ee22e9edab3c/examples/webgl_materials_matcap.html#L20>

  

> <https://github.com/mrdoob/three.js/blob/79edf22a345079dc6cf5d8c6ad38ee22e9edab3c/examples/webgl_materials_matcap.html#L91>

---

<div class="post-metadata">

**Author:** ![Victor\_M\_Barba](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/victor_m_barba/32/10693_2.png) [@Victor\_M\_Barba](https://discourse.threejs.org/u/Victor_M_Barba)\
**Post date:** [May 20, 2020, 10:57pm UTC](https://discourse.threejs.org/t/how-to-add-controllers-to-change-the-color-of-the-cube-page2controlers/15300/6 "2020-05-20T22:57:06Z")

</div>

I never though it was going to be so difficult, to add a simple controler gui.dat

One day I will learn… I hope someone can just give me a simple code that works.

I put the code you gave me here… but is not working!  
I have no idea where to put the code,  
what goes first, what goes after…  
the “import” { GUI } I don’t know where it goes, and if is loading…  
I honestly don’t understand what to do with your example.  
I appreciate you, sharing this… but honestly I am at a lower level

this is my code: [https://www.songnes.com/gift/page2controls.txt](https://www.songnes.com/gift/page2controls.txt)

this is the page that is not working: [https://www.songnes.com/gift/page2controls.html](https://www.songnes.com/gift/page2controls.html)

Thank you for all your patience and help…  
I will continue searching, to be able to do this… but it is really difficult…

---

<div class="post-metadata">

**Author:** ![Victor\_M\_Barba](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/victor_m_barba/32/10693_2.png) [@Victor\_M\_Barba](https://discourse.threejs.org/u/Victor_M_Barba)\
**Post date:** [May 21, 2020, 1:19am UTC](https://discourse.threejs.org/t/how-to-add-controllers-to-change-the-color-of-the-cube-page2controlers/15300/7 "2020-05-21T01:19:09Z")

</div>

I keep searching on this topic…  
I got an ERROR: the dat is not defined  
went here: [https://code.google.com/archive/redirect/a/code.google.com/p/dat-gui?movedTo=https:%2F%2Fgithub.com%2Fdataarts%2Fdat.gui](https://code.google.com/archive/redirect/a/code.google.com/p/dat-gui?movedTo=https:%2F%2Fgithub.com%2Fdataarts%2Fdat.gui)

they moved! : went here: [https://github.com/dataarts/dat.gui](https://github.com/dataarts/dat.gui)

All I see is a bunch of files:

build  
src/dat  
tests  
.babelrc  
.gitignore  
API.md

and so on…

I have NO idea what to do… can someone help please…  
it looks like all the pages are for people “who already knows”…

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [May 21, 2020, 1:48am UTC](https://discourse.threejs.org/t/how-to-add-controllers-to-change-the-color-of-the-cube-page2controlers/15300/8 "2020-05-21T01:48:07Z")

</div>

> [@Victor\_M\_Barba](#):
>
> it looks like all the pages are for people “who already knows”…

Exactly what I’ve been trying to tell you! You really **really** should spend some time taking an intro to JavaScript course instead of asking for help every 10 minutes with every step of the way. Things like `for` loops, `https`, mouse clicking, DOM elements, all those questions are very elemental, and it’s doing you a disservice as a developer to have other people do your problem-solving for you.

Here, I even found two free beginner’s courses you could take!

- [Intro to JavaScript | JavaScript Programming | Udacity](https://www.udacity.com/course/intro-to-javascript--ud803#)
- [https://www.youtube.com/watch?v=\_y9oxzTGERs](https://www.youtube.com/watch?v=_y9oxzTGERs)

Take the time to learn the essentials! I guarantee you won’t regret it!

---

<div class="post-metadata">

**Author:** ![Victor\_M\_Barba](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/victor_m_barba/32/10693_2.png) [@Victor\_M\_Barba](https://discourse.threejs.org/u/Victor_M_Barba)\
**Post date:** [May 21, 2020, 4:33am UTC](https://discourse.threejs.org/t/how-to-add-controllers-to-change-the-color-of-the-cube-page2controlers/15300/9 "2020-05-21T04:33:28Z")

</div>

Thank you Marquizzo: I will study those.  
I never wanted to bother anyone…  
I have learned a lot, asking questions…

of course, there is a lot more to learn… I will “stop” asking questions for a while  
and I’m going to study those curses you send…

sorry for asking too much!