在NEXT.js 中使用dat.gui

next在服务器中运行因此无法使用window对象 而 import { GUI } from "dat.gui"; 需要widnow
因此需要在客户端做一个初始化工作

可以在useEffect中init

/*
 * @Author: hongbin
 * @Date: 2022-08-05 08:36:57
 * @LastEditors: hongbin
 * @LastEditTime: 2022-09-12 08:50:24
 * @Description:gui调试
 */
import { GUI } from "dat.gui";
import { Object3D } from "three";

/**
 * 初始化GUI调试工具
 */
export const initGUI = () => {
    const { GUI } = require("dat.gui");
    const gui = new GUI({ name: "GUI console" });
    window.gui = gui;
    //window.gui.hide();
};

const vectorkeys: ["x", "y", "z"] = ["x", "y", "z"];

export const guiTestPosition = (mesh: Object3D, range: number = 20, name?: string, other?: (fidld: GUI) => void) => {
    const { name: meshName, type, uuid, position } = mesh;
    // 新建一个文件夹
    const fidld = window.gui.addFolder(name || meshName || type + uuid.substring(0, 5));
    setTimeout(() => {
        for (const key of vectorkeys) {
            fidld.add(position, key, position[key] - range, position[key] + range).onChange(window.render);
        }
        other && other(fidld);
    });
    return fidld;
};

export const guiTestScale = (mesh: Object3D, range: number = 20, name?: string) => {
    const { name: meshName, type, uuid, scale } = mesh;
    // 新建一个文件夹
    const fidld = window.gui.addFolder((name || meshName || type + uuid.substring(0, 5)) + "scale");
    setTimeout(() => {
        for (const key of vectorkeys) {
            fidld.add(scale, key, scale[key] - range, scale[key] + range).onChange(window.render);
        }
    });
    return fidld;
};

export const guiTestRotate = (mesh: Object3D, range: number = 3.14, name?: string) => {
    const { name: meshName, type, uuid, rotation } = mesh;
    // 新建一个文件夹
    const fidld = window.gui.addFolder(
        (name || meshName + uuid.substring(0, 3) || type + uuid.substring(0, 3)) + "rotate"
    );
    setTimeout(() => {
        for (const key of vectorkeys) {
            fidld.add(rotation, key, rotation[key] - range, rotation[key] + range).onChange(window.render);
        }
    });
    return fidld;
};

export const guiTestColor = (color: string) => {
    const params = { color };
    return window.gui.addColor(params, "color");
};

export const guiOptions = (options: any[], defaultValue: any, name: string) => {
    return window.gui.add({ [name]: defaultValue }, name).options(options);
};

向window对象添加类型定义
d.ts

import { GUI } from "dat.gui";

declare global {
    interface Window {
        gui: GUI; 
    }
}

export {};