【备忘笔记】three gui.js定义面板内容

// 实例化一个gui对象
const gui = new GUI();
const obj = {
  color: 0x00ffff,
  scale: 0,
  bool: false,
  specular: 0x111111,// 材质高光颜色
};

gui.add(ambient, 'intensity', 0, 2.0).name('环境');
gui.add(mesh.position, 'x', 0, 180).name('x轴');
gui.add(mesh.position, 'y', 0, 180);
gui.add(mesh.position, 'z', 0, 180);
// .addColor()生成颜色值改变的交互界面
gui.addColor(obj, 'color').onChange(function (value) {
  mesh.material.color.set(value);
});

// 数据类型：数组(下拉菜单)
gui.add(obj, 'scale', [-100, 0, 100]).name('y坐标').onChange(function (value) {
  mesh.position.y = value;
});
//数据类型：对象(下拉菜单) 为下拉菜单定义显示内容，相当于option的laber属性 
gui.add(obj, 'scale', {
  left: -100,
  center: 0,
  right: 100
}).name('位置选择').onChange(function (value) {
  mesh.position.x = value;
});

// 改变的obj属性数据类型是布尔值，交互界面是单选框，可以再 渲染循环中使用
gui.add(obj, 'bool').onChange(function (value) {
  // 点击单选框，控制台打印obj.bool变化
  console.log('obj.bool', value);
});

//折叠菜单 （多层嵌套）
// 平行光子菜单
const dirFolder = gui.addFolder('平行光');
dirFolder.close();//关闭菜单
// 平行光强度
dirFolder.add(directionalLight, 'intensity', 0, 2);
const dirFolder2 = dirFolder.addFolder('位置');//子菜单的子菜单
dirFolder2.close();//关闭菜单
// 平行光位置
dirFolder2.add(directionalLight.position, 'x', -400, 400);
dirFolder2.add(directionalLight.position, 'y', -400, 400);
dirFolder2.add(directionalLight.position, 'z', -400, 400);

显示内容如下：

补充：渲染循环中这么用

// 渲染循环-动画
const clock = new THREE.Clock();
function render () {
  if (obj.bool) mesh.rotateY(0.01);
  // console.log('两帧渲染时间间隔(毫秒)', spt);
  // console.log('帧率FPS', 1000 / spt);
  renderer.render(scene, camera); //执行渲染操作
  // mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
  requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧
}
render();