使用样例

样例一

        const gui = new GUI();
        // gui.domElement.style.right = '100px';
        // gui.domElement.style.left = '100px';
        // gui.domElement.style.width = '500px';

        const changeFontFolder = gui.addFolder('更改字体样式');
        changeFontFolder.close()
        changeFontFolder.add(params, 'changeFont').name('切换字体');
        changeFontFolder.add(params, 'changeWeight').name('更换粗体');
        changeFontFolder.add(params, 'changeBevel').name('切换斜边样式');

        const cameraPositionFolder = gui.addFolder('改变相机位移');
        cameraPositionFolder.close()
        cameraPositionFolder.add(camera.position, 'x', -1500, 1500).name('相机x轴的位移')
        cameraPositionFolder.add(camera.position, 'y', -1500, 1500).name('相机y轴的位移')
        cameraPositionFolder.add(camera.position, 'z', -1500, 1500).name('相机z轴的位移')

        const lightPositionFolder = gui.addFolder('改变光源位移');
        lightPositionFolder.close()
        lightPositionFolder.add(pointLight.position, 'x', -1500, 1500).name('改变光源x轴的位移')
        lightPositionFolder.add(pointLight.position, 'y', -1500, 1500).name('改变光源y轴的位移')
        lightPositionFolder.add(pointLight.position, 'z', -1500, 1500).name('改变光源z轴的位移')

        gui.add(pointLight, 'intensity', 0, 10.0).name('改变光强')
        // 光照颜色更改方式一
        let obj = {color: '#ff0000'}
        gui.addColor(obj, 'color').name('改变光颜色').onChange((val) => {
            pointLight.color.set(val)
        })

        const lightHslFolder = gui.addFolder('改变光颜色(HSL)');
        lightHslFolder.close()

        // 光照颜色更改方式二
        lightHslFolder.add(HSL_Properties, 't', 0, 1).name('改变光颜色色相').onChange((val) => {
            HSL_Properties.t = val
            pointLight.color.setHSL(val, HSL_Properties.e, HSL_Properties.n);
        })
        lightHslFolder.add(HSL_Properties, 'e', 0, 1).name('改变光颜色饱和度').onChange((val) => {
            HSL_Properties.e = val
            pointLight.color.setHSL(HSL_Properties.t, val, HSL_Properties.n);
        })
        lightHslFolder.add(HSL_Properties, 'n', 0, 1).name('改变光颜色强度').onChange((val) => {
            HSL_Properties.n = val
            pointLight.color.setHSL(HSL_Properties.t, HSL_Properties.e, val);
        })

        gui.add(rotate, 'bool').name('旋转动画');

        gui.open();

效果：