Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

I cannot use dat.gui with function and parameters like number together in threejs

I’m using threejs and dat.gui to test my mesh, but i need to use gui that accept number, but when I try to use it, I have the following error : gui.add(...).min is not a function

my code is :

 const params = {
   action: (value) => {
     console.log(value);
   },
 };

 gui
   .add(params , "action")
   .min(0)
   .max(5)
   .step(1)

This is not an issue about importing dat.gui since I use if with another function like

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

gui.add(mesh, "visible");

That is working

I need to use gui.add with min max and step function in order to change the value manually for my mesh

>Solution :

When you use min max with gui for custom function, you need to initiate a default value and use the .onChange event callback !

 const params = {
   baseValue: 0,
 };

 gui
   .add(params, "baseValue")
   .min(0)
   .max(5)
   .step(1)
   .onChange((value) => {
     console.log(value);
   });
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading