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
    目录

    20. gui调试3-下拉菜单、单选框

    # gui.js库(下拉菜单、单选框)

    前面大家学过通过.add()方法可以添加一个拖动条用来改变对象的某个属性,本节课给大家介绍.add()方法创建新的UI交互界面,比如下拉菜单、单选框。

    # .add()方法参数3和4数据类型:数字

    格式:add(控制对象,对象具体属性,其他参数)

    其他参数,可以一个或多个,数据类型也可以不同,gui会自动根据参数形式,自动生成对应的交互界面。

    参数3和参数4,分别是一个数字,交互界面是一个鼠标可以拖动的拖动条,可以在一个区间改变属性的值

    // 参数3、参数4数据类型:数字(拖动条)
    gui.add(obj, 'x', 0, 180).onChange(function (value) {
        mesh.position.x = value;
    });
    

    # .add()方法参数3数据类型:数组

    参数3是一个数组,生成交互界面是下拉菜单

    const obj = {
        scale: 0,
    };
    // 参数3数据类型:数组(下拉菜单)
    gui.add(obj, 'scale', [-100, 0, 100]).name('y坐标').onChange(function (value) {
        mesh.position.y = value;
    });
    

    # .add()方法参数3数据类型:对象

    参数3是一个对象,生成交互界面是下拉菜单

    const obj = {
        scale: 0,
    };
    // 参数3数据类型:对象(下拉菜单)
    gui.add(obj, 'scale', {
        left: -100,
        center: 0,
        right: 100
        // 左: -100,//可以用中文
        // 中: 0,
        // 右: 100
    }).name('位置选择').onChange(function (value) {
        mesh.position.x = value;
    });
    

    # .add()方法对应属性的数据类型:布尔值

    如果.add()改变属性的对应的数据类型如果是布尔值,那么交互界面就是一个单选框。

    const obj = {
        bool: false,
    };
    // 改变的obj属性数据类型是布尔值,交互界面是单选框
    gui.add(obj, 'bool').name('是否旋转');
    
    gui.add(obj, 'bool').onChange(function (value) {
        // 点击单选框,控制台打印obj.bool变化
        console.log('obj.bool',value);
    });
    

    # .add()方法改变布尔值案例

    控制一个对象是否旋转。

    gui.add(obj, 'bool').name('旋转动画');
    
    // 渲染循环
    function render() {
        // 当gui界面设置obj.bool为true,mesh执行旋转动画
        if (obj.bool) mesh.rotateY(0.01);
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    }
    render();
    
    19. gui调试界面2-颜色命名等
    21. gui.js库(分组)

    ← 19. gui调试界面2-颜色命名等 21. gui.js库(分组)→

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