从不同文件自定义 dat.gui

Question

我已经开始使用 dat.GUI API 和 Three.js，我想知道从多个文件自定义 GUI 的最佳方法是什么。我想根据我的项目结构将新的控制器添加到来自不同文件的同一个 GUI 实例，例如在一个文件中添加与相机相关的控制器，在另一个文件中添加与灯光相关的控制器，但都在同一个 GUI 中。

我尝试从第一个文件导出 GUI 实例并在第二个文件中导入它，但是 gui 变量据说是 undefined.

// file with camera settings
import * as dat from 'three/examples/js/libs/dat.gui.min.js';
export const gui = new dat.GUI();
let guiController = { moveModel: true };
gui.add(guiController, 'moveModel');

// file with light settings
import { gui } from <file with camera settings>;
const dir = new SpotLight(0xdeaa88, 1);
gui.add(dir, 'intensity', 0, 2, 0.01);

那我怎样才能有效地从多个文件自定义同一个 GUI 呢？我相信我的问题的解决方案是通过 JSON 或使用 localStorage，但我还没有在网上找到任何明确的实现，所以这个线程可能会帮助未来的学习者。

Answer 1

“单例模式”跳入脑海。您的示例就快完成了，我会将其移动到自己的文件中并导入到相机和灯光设置文件中。

// gui.js: file with gui singleton
import * as dat from 'three/examples/js/libs/dat.gui.min.js';
const gui = new dat.GUI();
export default gui;

// file with camera settings
import gui from './gui'
let guiController = { moveModel: true };
gui.add(guiController, 'moveModel');

// file with light settings
import gui from './gui';
const dir = new SpotLight(0xdeaa88, 1);
gui.add(dir, 'intensity', 0, 2, 0.01);

I tried exporting the GUI instance from the first file and importing it in the second file but the gui variable is said to be undefined.

这可能取决于您的本地设置，如果您仍然运行喜欢这个，请告诉我。

从不同文件自定义 dat.gui

Customize dat.gui from different files

javascript

three.js

dat.gui

es6-modules