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

Victor_M_Barba · May 18, 2020, 3:21am

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?

mjurczyk · May 18, 2020, 7:22am

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.

Victor_M_Barba · May 19, 2020, 3:05am

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!

prisoner849 · May 19, 2020, 6:56am

Feel free to search the forum

control.open(); reference: dat.gui/API.md at 071edeb334c246ac5eb406010c773dfbb8f6dcce · dataarts/dat.gui · GitHub

mjurczyk · May 19, 2020, 7:19am

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:

github.com

mrdoob/three.js/blob/79edf22a345079dc6cf5d8c6ad38ee22e9edab3c/examples/webgl_materials_matcap.html#L20


	<body>
		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl materials matcap<br />
			Drag-and-drop JPG, PNG, or EXR MatCap image files<br/>
		</div>

		<script type="module">

			import * as THREE from '../build/three.module.js';

			import { GUI } from './jsm/libs/dat.gui.module.js';
			import { OrbitControls } from './jsm/controls/OrbitControls.js';
			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
			import { EXRLoader } from './jsm/loaders/EXRLoader.js';

			var mesh, renderer, scene, camera;

			var API = {
				color: 0xffffff,
				exposure: 1.0
			};

github.com

mrdoob/three.js/blob/79edf22a345079dc6cf5d8c6ad38ee22e9edab3c/examples/webgl_materials_matcap.html#L91


						matcap: matcap,
						normalMap: normalmap

					} );

					scene.add( mesh );

				} );

				// gui
				var gui = new GUI();

				gui.addColor( API, 'color' )
					.listen()
					.onChange( function () {

						mesh.material.color.set( API.color ); render();

					} );

				gui.add( API, 'exposure', 0, 2 )

Victor_M_Barba · May 20, 2020, 10:57pm

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…

Victor_M_Barba · May 21, 2020, 1:19am

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”…

marquizzo · May 21, 2020, 1:48am

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!

Victor_M_Barba · May 21, 2020, 4:33am

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!

Topic		Replies	Views
Change color of a mesh loaded with PLYLoader Questions textures , loaders , geometry	3	1838	November 15, 2018
Styling Dat.GUI (Layer Example) Questions css	5	6421	October 30, 2018
GUI color change Questions materials	1	597	May 13, 2021
Select objects with mouse and change color with dat.gui [SOLVED] Questions textures , geometry	7	5405	November 5, 2018
3 gui.add() fns to make radio buttons: strange action Questions	2	1545	June 10, 2021

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

Related Topics