Overwritten value within lil-gui does not update threejs

Questions
1

Not sure if this is more of a lil-gui question, but in detail I’m having an issue updating a threejs parameter.

I’d like to control some lil-gui values from the “outside”.
For this I created a css range-slider in html next to threejs within the same file.

Using jquery to copy the value from the new range-slider to the lil-gui input field.
Lil-gui does work and changes do reflect visually in threejs.
But when I use my own range-slider all values do reflect only in the input field of lil-gui.

No matter what I try I can’t get threejs to update the value from the overwritten lil-gui input field.

Do I miss some “controls.update()” within the animate() function?

Help is very much welcome - thanks for getting into this.

Update:
Here is a working / non-working example:

2

I would recommend sharing some code showing what you have tried, even if it is not working. We cannot guess what might be wrong without those details.

1 Like
3

Thanks @donmccurdy. I will setup a test scene …

4

Here is a working / non-working example:
https://jsfiddle.net/gree303/7cms3nd9/1/

Is this the propper way of doing it? I have a feeling there is a better way.
Really looking forward to any input.
Thanks.

5

By the way, …
Is there a good way accessing these settings within the lil-gui structure?
Or is it possible to give them some id’s? It doesn’t feel right and I’m sure I will end up having troubles with these “random” names like “input[aria-labelledby=‘lil-gui-name-4’”

Any suggestion is more than needed :slight_smile: thx

6

I would advise against reaching into the HTML DOM of lil-gui itself. That structure might change with any lil-gui release, it is not a stable public API.

What you probably want to do is to listen for changes published by lil-gui itself:

gui.add( myObject, 'myProperty' )
	.name( 'Custom Name' )
	.onChange( value => {
		// update your HTML here
	} );

If you intend for changes made to the base object to also reflect back into lil-gui, be sure to use the listen() method: https://lil-gui.georgealways.com/#Controller#listen

3 Likes
8

thanks @donmccurdy

9

@donmccurdy I’ve tried to implement your solution.
But for some reason I can’t get the .listen() to work.
lil-gui does speak to the slider, but the slider won’t talk back.

Any clue? I’m sure there is one
updated jsfiddle: https://jsfiddle.net/gree303/7cms3nd9/8/
Line: 174

10

I don’t think this code on the slider is doing anything:

onchange="this.setAttribute('value', this.value);"

If the slider’s value has changed, there’s no need to set anything further on the slider itself. You may want to listen for change events from the slider using jQuery’s .on() API, then modify the “params” object that is the data storage for your parameters.

11

This onchange snippet is needed for another number input field. It reflects the slider as number-value.
I removed it for this example. Somehow I forgot to remove this part.

.on() - > thanks!

Update: Using .on(“input”, … will update in realtime, not only on click-release.

12

Update: This method does work for a simple slider.
But I ran into issues using a pure css range slider with multiple handles. Everything works the same. Only the visual view is lacking… It’s strange.
In detail I want to control the emissive parameter of three.js. The parameter within the control does update. But it won’t update the 3d view. Any idea why this isn’t working out?

Is “emissiveintensity” and/or “ligthmapintensity” in someway different to other controls?
…speaking in terms of updating the renderer?
SOLVED - had a typo :slight_smile: