Three.js で dat.GUI API の使用を開始しましたが、複数のファイルから GUI をカスタマイズするための最良の方法は何かと考えていました。プロジェクトの構造に基づいて、異なるファイルから同じ GUI インスタンスに新しいコントローラーを追加したいと思います。たとえば、カメラに関連するコントローラーを 1 つのファイルに追加し、ライトに関連するコントローラーを別のファイルに追加しますが、すべて同じにします。 GUI。
最初のファイルから GUI インスタンスをエクスポートし、2 番目のファイルにインポートしようとしましたが、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 を使用することだと思いますが、オンラインで明確な実装が見つからないため、このスレッドは将来の学習者に役立つ可能性があります。