40 lines
852 B
JavaScript
40 lines
852 B
JavaScript
|
import { GUI } from 'GUI';
|
||
|
|
|
||
|
|
export class ThreeGUIElement extends HTMLElement{
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
this.GUI = new GUI();
|
||
|
|
this.GUI.onChange(this.onGUIValueChange.bind(this));
|
||
|
|
}
|
||
|
|
|
||
|
|
onGUIValueChange(evt) {
|
||
|
|
this.dispatchEvent(new CustomEvent('value-change', {
|
||
|
|
detail: {
|
||
|
|
property: evt.property,
|
||
|
|
value: evt.value
|
||
|
|
}
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
|
||
|
|
reset() {
|
||
|
|
while(this.GUI.children.length > 0) {
|
||
|
|
this.GUI.children[0].destroy();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
setElements(elements) {
|
||
|
|
var self = this;
|
||
|
|
this.elements = {};
|
||
|
|
|
||
|
|
var gui = this.GUI;
|
||
|
|
this.reset();
|
||
|
|
elements.forEach(function(parameter) {
|
||
|
|
console.log(parameter)
|
||
|
|
self.elements[parameter.alias] = parameter.value;
|
||
|
|
gui.add(self.elements, parameter.alias, parameter.value);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
customElements.define('three-gui', ThreeGUIElement);
|