dat.GUI()构造函数在Three.js项目中无法正常工作

这个问题是因为dat.gui的模块导出方式和你当前的导入写法不匹配导致的，新版本的dat.gui采用了ES模块规范，在CommonJS环境下需要调整导入方式：

方法1：修正CommonJS导入（require） #

dat.gui在CommonJS环境中的核心类是挂在default导出下的，你需要手动获取这个默认导出：

// 方式A：获取default导出后使用dat.GUI
const dat = require("dat.gui").default;
const gui = new dat.GUI();

// 方式B：直接解构GUI类，更简洁
const { GUI } = require("dat.gui");
const gui = new GUI();

方法2：使用ES模块导入（推荐） #

你的项目用了Parcel，它默认支持ES模块，更推荐用import语法，写法更直观：

import { GUI } from 'dat.gui';
const gui = new GUI();

原因说明 #

从dat.gui v0.7.0版本开始，官方切换到了ES模块作为主要模块格式，CommonJS版本的导出会把整个库包装在default属性里。直接require("dat.gui")拿到的是一个包含default的对象，而不是GUI类本身，自然会触发“不是构造函数”的错误。

内容的提问来源于stack exchange，提问作者user818700