Настройка dat.gui из разных файлов

Я начал использовать API dat.GUI с Three.js, и мне было интересно, как лучше всего настроить графический интерфейс из нескольких файлов. Я хотел бы добавить новые контроллеры в один и тот же экземпляр графического интерфейса из разных файлов на основе структуры моего проекта, например. добавьте контроллеры, связанные с камерой, в один файл, добавьте контроллеры, связанные со светом, в другой файл, но все в один и тот же графический интерфейс.

Я попытался экспортировать экземпляр GUI из первого файла и импортировать его во второй файл, но переменная gui оказалась неопределенной.

// 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);

Как я могу эффективно настроить один и тот же графический интерфейс из нескольких файлов? Я считаю, что решение моей проблемы находится где-то в передаче JSON или использовании localStorage, но я не нашел четких реализаций в Интернете, поэтому эта тема может помочь будущим учащимся.


javascript es6-modules three.js dat.gui
person afkqs    schedule 25.07.2020    source источник
comment
but the gui variable is said to be undefined. Можете ли вы пролить свет на это? Можете ли вы рассказать, какие шаги сборки (если они есть) вы используете, возможно, как это размещается?   -  person stealththeninja    schedule 25.07.2020
comment
Я использую этот шаблон. Я создаю и экспортирую графический интерфейс в файл entry и импортирую его в файл Light. Я вижу, что экземпляр графического интерфейса правильно экспортируется, когда я запускаю import * as gui from '../entry.js', поскольку графический интерфейс присутствует в импортированном объекте, но по какой-то причине мне не удается его использовать. Я считаю, что это связано с неверными представлениями об импорте/экспорте от моего имени. Ваше решение singleton pattern работает отлично!   -  person afkqs    schedule 25.07.2020

Ответы (1)


arrow_upward
1
arrow_downward

Одноэлементный шаблон приходит на ум. Ваш пример почти готов, я бы переместил его в отдельный файл и импортировал в файлы настроек камеры и света.

// 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);

Я попытался экспортировать экземпляр GUI из первого файла и импортировать его во второй файл, но переменная gui не определена.

Это может зависеть от вашей локальной настройки, дайте мне знать, если вы все еще сталкиваетесь с этим.

person stealththeninja    schedule 25.07.2020