JSFiddle - React, Tailwind, and code Playground

by SQShu

HTML

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>

</body>
</html>

JavaScript

var obj = {

        rotationX: 0.0,
        rotationY: 0.001,
        rotationZ: 0.0,

    };

    var gui = new dat.gui.GUI();

    // gui.remember(obj);


/*

	guiControl = new function() {
  	this.rotationX = 0.1;
    this.rotationY = 0.1;
    this.rotationZ = 0.1;
  }


 var f0 = gui.addFolder('Settings');
 f0.add(guiControl, 'rotationX').min(0.1).max(100).step(0.1);
 f0.add(guiControl, 'rotationY').min(0.1).max(100).step(0.1);
 f0.add(guiControl, 'rotationZ').min(0.1).max(100).step(0.1);




*/
	guiControl = new function() {
  	this.rotationX = 0.1;
    this.rotationY = 0.1;
    this.rotationZ = 0.1;
  }


 var f0 = gui.addFolder('Rotate this ⚽️');
 f0.add(guiControl, 'rotationX').min(0.001).max(1).step(0.001);
 f0.add(guiControl, 'rotationY').min(0.001).max(1).step(0.001);
 f0.add(guiControl, 'rotationZ').min(0.001).max(1).step(0.001);