three.js 添加 圖形控制界面 gui

 

 

需要導入這個js：

import { GUI } from '/three.js/jsm/libs/dat.gui.module.js';

 

局部代碼：

            var params = {
                color: 0xffffff,
                transparency: 0.90,
                envMapIntensity: 1,
                lightIntensity: 1,
                exposure: 1,
                visible:true
            };
            var gui = new GUI();

            gui.addColor(params, 'color')
                .onChange(function () {
                    material.color.set(params.color);
                });

            gui.add(params, 'transparency', 0, 1)
                .onChange(function () {
                    material.transparent = true;//允許透明
                    material.opacity = params.transparency;//設置 透明度
                    //material.transparency = params.transparency;
                });

            gui.add(params, 'envMapIntensity', 0, 1)
                .name('envMap intensity')
                .onChange(function () {
                    material.envMapIntensity = params.envMapIntensity;
                });

            gui.add(params, 'lightIntensity', 0, 1)
                .name('light intensity')
                .onChange(function () {
                    material.intensity = params.lightIntensity;
                });

            gui.add(params, 'exposure', 0, 1)
                .onChange(function () {
                    renderer.toneMappingExposure = params.exposure;
                });

            gui.add(params, "visible").onChange(function (e) {
                material.visible = e;//顯示/隱藏
            });

            gui.open();

 

效果：