mirror of
https://thingvellir.net/git/overte
synced 2025-03-27 23:52:03 +01:00
add custom dat.gui build with basic array support, add vec3 support client side (only one-way at the moment) as folder example
This commit is contained in:
parent
6e00070b5e
commit
46dbf45e07
6 changed files with 3875 additions and 6 deletions
3808
examples/particle_explorer/dat.gui.js
Normal file
3808
examples/particle_explorer/dat.gui.js
Normal file
File diff suppressed because one or more lines are too long
|
@ -60,7 +60,13 @@ function loadGUI() {
|
||||||
//for each key...
|
//for each key...
|
||||||
_.each(keys, function(key) {
|
_.each(keys, function(key) {
|
||||||
|
|
||||||
//FOR NOW TO SHOW THAT IT WORKS RESTRICT TO A FEW PROPERTIES. NEED TO ADD SUPPORT FOR VEC3, QUAT, COLORS
|
// if(key==='dimensions'){
|
||||||
|
// createVec3Folder(key)
|
||||||
|
// }
|
||||||
|
// else{
|
||||||
|
// return
|
||||||
|
// }
|
||||||
|
// //FOR NOW TO SHOW THAT IT WORKS RESTRICT TO A FEW PROPERTIES. NEED TO ADD SUPPORT FOR VEC3, QUAT, COLORS
|
||||||
if (key.indexOf('name') !== -1 || key.indexOf('description') !== -1 || key.indexOf('visible') !== -1 || key.indexOf('collisionsWillMove') !== -1) {
|
if (key.indexOf('name') !== -1 || key.indexOf('description') !== -1 || key.indexOf('visible') !== -1 || key.indexOf('collisionsWillMove') !== -1) {
|
||||||
|
|
||||||
|
|
||||||
|
@ -80,9 +86,9 @@ function loadGUI() {
|
||||||
|
|
||||||
console.log('key:::' + key)
|
console.log('key:::' + key)
|
||||||
//add this key as a controller to the gui
|
//add this key as a controller to the gui
|
||||||
|
|
||||||
var controller = gui.add(settings, key).listen();
|
var controller = gui.add(settings, key).listen();
|
||||||
// the call below is potentially expensive but will enable two way binding. needs testing to see how many it supports at once.
|
// the call below is potentially expensive but will enable two way binding. needs testing to see how many it supports at once.
|
||||||
//var controller = gui.add(particleExplorer, key).listen();
|
|
||||||
//keep track of our controller
|
//keep track of our controller
|
||||||
controllers.push(controller);
|
controllers.push(controller);
|
||||||
|
|
||||||
|
@ -98,6 +104,37 @@ function loadGUI() {
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
//after all the keys make folders
|
||||||
|
var folder = gui.addFolder('dimensions');
|
||||||
|
folder.add(settings.dimensions, 'x').min(0).listen().onFinishChange(function(value) {
|
||||||
|
// Fires when a controller loses focus.
|
||||||
|
var obj = {};
|
||||||
|
obj.dimensions = {};
|
||||||
|
obj.dimensions[this.property] = value;
|
||||||
|
obj.dimensions.y = settings.dimensions.y;
|
||||||
|
obj.dimensions.z = settings.dimensions.z;
|
||||||
|
writeVec3ToInterface(obj)
|
||||||
|
});
|
||||||
|
folder.add(settings.dimensions, 'y').min(0).listen().onFinishChange(function(value) {
|
||||||
|
// Fires when a controller loses focus.
|
||||||
|
var obj = {};
|
||||||
|
obj.dimensions = {};
|
||||||
|
obj.dimensions[this.property] = value;
|
||||||
|
obj.dimensions.x = settings.dimensions.x;
|
||||||
|
obj.dimensions.z = settings.dimensions.z;
|
||||||
|
|
||||||
|
writeVec3ToInterface(obj)
|
||||||
|
});
|
||||||
|
folder.add(settings.dimensions, 'z').min(0).listen().onFinishChange(function(value) {
|
||||||
|
// Fires when a controller loses focus.
|
||||||
|
var obj = {};
|
||||||
|
obj.dimensions = {};
|
||||||
|
obj.dimensions[this.property] = value;
|
||||||
|
obj.dimensions.x = settings.dimensions.x;
|
||||||
|
obj.dimensions.y = settings.dimensions.y;
|
||||||
|
writeVec3ToInterface(obj)
|
||||||
|
});
|
||||||
|
folder.open();
|
||||||
};
|
};
|
||||||
|
|
||||||
function writeDataToInterface(property, value) {
|
function writeDataToInterface(property, value) {
|
||||||
|
@ -116,6 +153,22 @@ function writeDataToInterface(property, value) {
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function writeVec3ToInterface(obj) {
|
||||||
|
print('VEC3 UPDATE TO INTERFACE FROM SETTINGS')
|
||||||
|
var sendData = {
|
||||||
|
messageType: "settings_update",
|
||||||
|
updatedSettings: obj,
|
||||||
|
}
|
||||||
|
|
||||||
|
var stringifiedData = JSON.stringify(sendData)
|
||||||
|
|
||||||
|
EventBridge.emitWebEvent(
|
||||||
|
stringifiedData
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
window.onload = function() {
|
window.onload = function() {
|
||||||
|
@ -176,7 +229,6 @@ function listenForSettingsUpdates() {
|
||||||
}
|
}
|
||||||
if (data.messageType === 'settings_update') {
|
if (data.messageType === 'settings_update') {
|
||||||
console.log('SETTINGS UPDATE FROM INTERFACE:::' + JSON.stringify(data.updatedSettings))
|
console.log('SETTINGS UPDATE FROM INTERFACE:::' + JSON.stringify(data.updatedSettings))
|
||||||
|
|
||||||
_.each(data.updatedSettings, function(value, key) {
|
_.each(data.updatedSettings, function(value, key) {
|
||||||
console.log('setting,value', setting, value)
|
console.log('setting,value', setting, value)
|
||||||
settings = {}
|
settings = {}
|
||||||
|
|
|
@ -107,7 +107,7 @@ SettingsWindow = function() {
|
||||||
sendInitialSettings(boxProperties);
|
sendInitialSettings(boxProperties);
|
||||||
}
|
}
|
||||||
if (_data.messageType === 'settings_update') {
|
if (_data.messageType === 'settings_update') {
|
||||||
print('SETTINGS UPDATE FROM GUI');
|
print('SETTINGS UPDATE FROM GUI '+JSON.stringify(_data.updatedSettings));
|
||||||
editEntity(_data.updatedSettings);
|
editEntity(_data.updatedSettings);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -115,6 +115,7 @@ SettingsWindow = function() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function sendInitialSettings(properties) {
|
function sendInitialSettings(properties) {
|
||||||
print('SENDING INITIAL INTERFACE SETTINGS');
|
print('SENDING INITIAL INTERFACE SETTINGS');
|
||||||
var settings = {
|
var settings = {
|
||||||
|
@ -126,7 +127,7 @@ function sendInitialSettings(properties) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function sendUpdatedObject(properties) {
|
function sendUpdatedObject(properties) {
|
||||||
print('SENDING UPDATED OBJECT FROM INTERFACE');
|
// print('SENDING UPDATED OBJECT FROM INTERFACE');
|
||||||
var settings = {
|
var settings = {
|
||||||
messageType: 'object_update',
|
messageType: 'object_update',
|
||||||
objectSettings: properties
|
objectSettings: properties
|
||||||
|
|
|
@ -15,7 +15,8 @@
|
||||||
-->
|
-->
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<script type="text/javascript" src="dat.gui.min.js"></script>
|
<script type="text/javascript" src="dat.gui.js"></script>
|
||||||
|
<!-- <script type="text/javascript" src="dat.gui.min.js"></script> -->
|
||||||
<script type="text/javascript" src="underscore-min.js"></script>
|
<script type="text/javascript" src="underscore-min.js"></script>
|
||||||
<script type="text/javascript" src="generic.js"></script>
|
<script type="text/javascript" src="generic.js"></script>
|
||||||
<script>
|
<script>
|
||||||
|
|
|
@ -34,6 +34,12 @@ var groups = [
|
||||||
]
|
]
|
||||||
|
|
||||||
var ParticleExplorer = function() {
|
var ParticleExplorer = function() {
|
||||||
|
this.testVec3 = {
|
||||||
|
x:10,
|
||||||
|
y:10,
|
||||||
|
z:10
|
||||||
|
}
|
||||||
|
this.someArray=[1,2,3,4,5,'asdf','zxcv'];
|
||||||
this.animationIsPlaying = true;
|
this.animationIsPlaying = true;
|
||||||
this.textures = "https://hifi-public.s3.amazonaws.com/alan/Particles/Particle-Sprite-Smoke-1.png";
|
this.textures = "https://hifi-public.s3.amazonaws.com/alan/Particles/Particle-Sprite-Smoke-1.png";
|
||||||
this.lifespan = 5.0;
|
this.lifespan = 5.0;
|
||||||
|
|
|
@ -40,6 +40,7 @@ var PI = 3.141593,
|
||||||
DEG_TO_RAD = PI / 180.0;
|
DEG_TO_RAD = PI / 180.0;
|
||||||
|
|
||||||
StartingParticles = function() {
|
StartingParticles = function() {
|
||||||
|
this.someArray=[1,2,3,'asdf','zxcv'];
|
||||||
this.animationIsPlaying = true;
|
this.animationIsPlaying = true;
|
||||||
this.accelerationSpread = {
|
this.accelerationSpread = {
|
||||||
x: 0.1,
|
x: 0.1,
|
||||||
|
|
Loading…
Reference in a new issue