当前位置：网站首页>dat. GUI

dat. GUI

2022-07-01 23:16:00 【yzhSWJ】

dat.GUI  Is a lightweight GUI Library （GUI  Components ）, Using this library, you can easily create interface components that can change code variables .

Use steps

（1） First on the page of  <head>  Add this library to the tag .

<script type="text/javascript" src="../libs/dat.gui.js"></script>

（2） Define a  JavaScript  object （ The assumption here is called  controls）, The object will be saved through  dat.GUI  The attributes of change .

var controls = new function () {
    this.rotationSpeed = 0.02;
    //......
};

（3） Next you need to put this  JavaScript  Object passed to  dat.gui  object , And set the value range of each attribute .

var gui = new dat.GUI();
gui.add(controls, 'rotationSpeed', 0, 0.5);
//......

（4） Finally, when the user is right  dat.GUI  Control ,controls  The attribute values in will also be modified synchronously . Let's directly reference this attribute value in the program .

demo

//+++++++++++++++++++++++++++++++++++++++++++++++++++++++ initialization gui++++++++++++++++++++++++++++++++++++++++++++
var gui = new dat.GUI();
gui.add(cube.position, "x")
  .min(0)
  .max(5)
  .step(0.01)
  .name(" Move x Axis coordinates ")
  .onChange(value => {
    console.log(' The modified value :', value)
  })
  .onFinishChange(value => {
    console.log(' Stop completely and start ', value)

  })
//+++++++++++++++++ Modify the object color ++++++++++++++
const params = {
  color: '#ffff00',
  fn: () => {
    // Let the object move 
    gsap.to(cube.position, { x: 5, duration: 5, yoyo: true, repeat: -1 })
  }
}
gui.addColor(params, "color")
  .onChange(value => {
    console.log(' The modified value :', value)
    cube.material.color.set(value)
  })
//+++++++++++++++++++++ Whether or not shown   Option box ++++++++++++++++
gui.add(cube, "visible").name(' Whether or not shown ')
//+++++++++++ Set button trigger event ++++++++++++++++++++++++++
gui.add(params, 'fn').name(' Click on the cube movement ')
//+++++++++++++++++ Put the configuration in a folder +++++++++++++++++++++
var folder = gui.addFolder(" Set cube ")// Folder name 
// Put the settings under the folder 
folder.add(cube.material, 'wireframe')// Show wireframe only

原网站

版权声明
本文为[yzhSWJ]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/182/202207012226528100.html

边栏推荐

猜你喜欢

随机推荐