Three.js中文网 Three.js中文网
首页
Three.js电子书
WebGL电子书 (opens new window)
免费视频 (opens new window)
3D案例 (opens new window)
系统课程 (opens new window)
案例课程 (opens new window)
threejs中文文档 (opens new window)
首页
Three.js电子书
WebGL电子书 (opens new window)
免费视频 (opens new window)
3D案例 (opens new window)
系统课程 (opens new window)
案例课程 (opens new window)
threejs中文文档 (opens new window)
Web3D系统课程视频
  • 0.学前说明

  • 1.Three.js快速入门

    • 1. threejs文件包下载和目录简介
    • 2. 学习环境-编辑器和静态服务器
    • 3. 开发和学习环境,引入threejs
    • 4. 第一个3D案例—创建3D场景
    • 5. 第一个3D案例—透视投影相机
    • 6. 第一个3D案例—渲染器
    • 7. 三维坐标系-加强三维空间认识
    • 8. 光源对物体表面影响
    • 9. 相机控件OrbitControls
    • 10. 平行光与环境光
    • 11. 动画渲染循环
    • 12. Canvas画布布局和全屏
    • 13. stats查看threejs渲染帧率
    • 14. 阵列立方体和相机适配体验
    • 15. Threejs常见几何体简介
    • 16. 高光网格材质Phong
    • 17. WebGL渲染器设置(锯齿模糊)
    • 18. gui.js库(可视化改变三维场景)
    • 19. gui调试界面2-颜色命名等
    • 20. gui调试3-下拉菜单、单选框
    • 21. gui.js库(分组)
      • 22. examples和文档(辅助开发)
      • 23. threejs语法总结
    • 2.几何体BufferGeometry

    • 3.模型对象、材质

    • 4.层级模型

    • 5.顶点UV坐标、纹理贴图

    • 6.加载外部三维模型(gltf)

    • 7.PBR材质与纹理贴图

    • 8.持续更新中

    • Three.js教程
    • 1.Three.js快速入门
    郭隆邦
    2023-01-20
    目录

    21. gui.js库(分组)

    # gui.js库分组方法.addFolder()

    当GUI交互界面需要控制的属性比较多的时候,为了避免混合,可以适当分组管理,这样更清晰。

    # gui交互界面不分组

    gui交互界面不分组,只有一个默认的总的菜单。

    const gui = new GUI(); //创建GUI对象 
    //创建一个对象,对象属性的值可以被GUI库创建的交互界面改变
    const obj = {
        color: 0x00ffff,// 材质颜色
        specular: 0x111111,// 材质高光颜色
    };
    
    
    // 材质颜色color
    gui.addColor(obj, 'color').onChange(function(value){
        material.color.set(value);
    });
    // 材质高光颜色specular
    gui.addColor(obj, 'specular').onChange(function(value){
        material.specular.set(value);
    });
    
    // 环境光强度
    gui.add(ambient, 'intensity',0,2);
    // 平行光强度
    gui.add(directionalLight, 'intensity',0,2);
    // 平行光位置
    gui.add(directionalLight.position, 'x',-400,400);
    gui.add(directionalLight.position, 'y',-400,400);
    gui.add(directionalLight.position, 'z',-400,400);
    
    

    # .addFolder()分组

    new GUI()实例化一个gui对象,默认创建一个总的菜单,通过gui对象的.addFolder()方法可以创建一个子菜单,当你通过GUI控制的属性比较多的时候,可以使用.addFolder()进行分组。

    .addFolder()返回的子文件夹对象,同样具有gui对象的.add()、.onChange()、.addColor()等等属性。

    const gui = new GUI(); //创建GUI对象 
    const obj = {
        color: 0x00ffff,// 材质颜色
    };
    // 创建材质子菜单
    const matFolder = gui.addFolder('材质');
    matFolder.close();
    // 材质颜色color
    matFolder.addColor(obj, 'color').onChange(function(value){
        material.color.set(value);
    });
    // 材质高光颜色specular
    matFolder.addColor(obj, 'specular').onChange(function(value){
        material.specular.set(value);
    });
    
    // 环境光子菜单
    const ambientFolder = gui.addFolder('环境光');
    // 环境光强度
    ambientFolder.add(ambient, 'intensity',0,2);
    
    // 平行光强度
    dirFolder.add(directionalLight, 'intensity',0,2);
    // 平行光位置
    dirFolder.add(directionalLight.position, 'x',-400,400);
    dirFolder.add(directionalLight.position, 'y',-400,400);
    dirFolder.add(directionalLight.position, 'z',-400,400);
    

    # 关闭.close()和展开.open()交互界面

    gui对象创建的总菜单或gui.addFolder()创建的子菜单都可以用代码控制交互界面关闭或开展状态。

    const gui = new GUI(); //创建GUI对象 
    gui.close();//关闭菜单
    
    // 创建材质子菜单
    const matFolder = gui.addFolder('材质');
    matFolder.close();//关闭菜单
    

    # .addFolder()套娃——子菜单嵌套子菜单

    .addFolder()创建的对象,同样也具有.addFolder()属性,可以继续嵌套子菜单。

    // 平行光子菜单
    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);
    
    
    20. gui调试3-下拉菜单、单选框
    22. examples和文档(辅助开发)

    ← 20. gui调试3-下拉菜单、单选框 22. examples和文档(辅助开发)→

    Theme by Vdoing | Copyright © 2016-2023 郭隆邦 | 引用请注明网站链接
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式