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

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
hers is the code: https://www.songnes.com/gift/page2controls.txt

control(open);

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

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.

1 Like

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!

Feel free to search the forum

control.open(); reference: https://github.com/dataarts/dat.gui/blob/071edeb334c246ac5eb406010c773dfbb8f6dcce/API.md#guiopen

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

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:


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

this is the page that is not working: 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…

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

they moved! : went here: 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”…

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!

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

1 Like

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!