請先完成前置步驟再進行下面操作：【Threejs】從零開始（一）--創建threejs應用-CSDN博客

一.GUI界面概述

GUI（Graphical User Interface）指的是圖形化用戶界面，廣泛用在各種程序的上位機，能夠通過簡單的操作和按鈕就可以調用底層代碼，方便我們使用和展示結果。寫好了底層的代碼后我們就可以制作一個GUI界面來打包和展示。

簡單來說就是功能的一個集合模塊。

二.GUI的簡單使用

1.導入GUI

import {GUI} from 'three/examples/jsm/libs/lil-gui.module.min.js'  // 導入GUI

2.創建GUI

const gui = new GUI();

3.控制立方體位置的控制器

gui.add(cube.position, 'x', 最小值,最大值, 步數).name('立方體X位置');

onFinishChange是當你滑動結束時執行一次函數，可以輸出滑動的結果。

onChange是數值改變時執行一次函數，可以輸出滑動的結果。

//控制立方體位置
gui.add(cube.position, 'x', -5, 5, 1).name('立方體X位置');
gui.add(cube.position, 'y', -5, 5, 1).name('立方體Y位置').onFinishChange((val) => {console.log('立方體Y位置',val)
})
;
gui.add(cube.position, 'z', -5, 5, 1).name('立方體Z位置').onChange((val) => {console.log('立方體Z位置',val)
})
;

4.添加文件夾（歸類）

通過addFolder（）方法可以將同一類型的放到同一個文件下，方便管理。

//創建文件夾
let folder = gui.addFolder('立方體位置');
//控制立方體位置
folder.add(cube.position, 'x', -5, 5, 1).name('立方體X位置');
folder.add(cube.position, 'y', -5, 5, 1).name('立方體Y位置').onFinishChange((val) => {console.log('立方體Y位置',val)
});
folder.add(cube.position, 'z', -5, 5, 1).name('立方體Z位置').onChange((val) => {console.log('立方體Z位置',val)
});

5.調用方法

比如想實現全屏展示和退出全屏。

先創建個數組：

let eventObject = {fullscreen:function(){document.body.requestFullscreen()},exitFullscreen:function(){document.exitFullscreen()},
}

調用：

// 創建gui
const gui = new GUI();
gui.add(eventObject,'fullscreen').name('全屏')
gui.add(eventObject,'exitFullscreen').name('退出全屏')

比如控制立方體顏色：

//控制立方體顏色
let colorParms = {color: 0x00ff00
}
folder.addColor(colorParms, 'color').name('立方體顏色').onChange((val) => {cube.material.color.set(val)
})

控制立方體材質：

//控制立方體材質
folder.add(parentMaterial,'wireframe' ).name('父元素立方體材質');