mirror of
https://github.com/overte-org/overte.git
synced 2025-04-25 19:36:44 +02:00
1606 lines
86 KiB
HTML
1606 lines
86 KiB
HTML
<html>
|
|
<head>
|
|
<link rel="stylesheet" type="text/css" href="style.css">
|
|
<link rel="stylesheet" type="text/css" href="css/colpick.css">
|
|
<script src="jquery-2.1.4.min.js"></script>
|
|
<script src="colpick.js"></script>
|
|
<script>
|
|
var PI = 3.14159265358979;
|
|
var DEGREES_TO_RADIANS = PI / 180.0;
|
|
var RADIANS_TO_DEGREES = 180.0 / PI;
|
|
|
|
function enableChildren(el, selector) {
|
|
els = el.querySelectorAll(selector);
|
|
for (var i = 0; i < els.length; i++) {
|
|
els[i].removeAttribute('disabled');
|
|
}
|
|
}
|
|
function disableChildren(el, selector) {
|
|
els = el.querySelectorAll(selector);
|
|
for (var i = 0; i < els.length; i++) {
|
|
els[i].setAttribute('disabled', 'disabled');
|
|
}
|
|
}
|
|
|
|
function showElements(els, show) {
|
|
for (var i = 0; i < els.length; i++) {
|
|
els[i].style.display = (show) ? 'block' : 'none';
|
|
}
|
|
}
|
|
|
|
function createEmitCheckedPropertyUpdateFunction(propertyName) {
|
|
return function() {
|
|
EventBridge.emitWebEvent(
|
|
'{ "type":"update", "properties":{"' + propertyName + '":' + this.checked + '}}'
|
|
);
|
|
};
|
|
}
|
|
function createEmitGroupCheckedPropertyUpdateFunction(group, propertyName) {
|
|
return function() {
|
|
var properties = {};
|
|
properties[group] = {};
|
|
properties[group][propertyName] = this.checked;
|
|
EventBridge.emitWebEvent(
|
|
JSON.stringify({
|
|
type: "update",
|
|
properties: properties
|
|
})
|
|
);
|
|
};
|
|
}
|
|
|
|
function createEmitNumberPropertyUpdateFunction(propertyName) {
|
|
return function() {
|
|
EventBridge.emitWebEvent(
|
|
'{ "type":"update", "properties":{"' + propertyName + '":' + this.value + '}}'
|
|
);
|
|
};
|
|
}
|
|
function createEmitGroupNumberPropertyUpdateFunction(group, propertyName) {
|
|
return function() {
|
|
var properties = {};
|
|
properties[group] = {};
|
|
properties[group][propertyName] = this.value;
|
|
EventBridge.emitWebEvent(
|
|
JSON.stringify({
|
|
type: "update",
|
|
properties: properties,
|
|
})
|
|
);
|
|
};
|
|
}
|
|
|
|
|
|
function createEmitTextPropertyUpdateFunction(propertyName) {
|
|
return function() {
|
|
var properties = {};
|
|
properties[propertyName] = this.value;
|
|
EventBridge.emitWebEvent(
|
|
JSON.stringify({
|
|
type: "update",
|
|
properties: properties,
|
|
})
|
|
);
|
|
};
|
|
}
|
|
|
|
function createEmitGroupTextPropertyUpdateFunction(group,propertyName) {
|
|
return function() {
|
|
var properties = {};
|
|
properties[group] = {};
|
|
properties[group][propertyName] = this.value;
|
|
EventBridge.emitWebEvent(
|
|
JSON.stringify({
|
|
type: "update",
|
|
properties: properties,
|
|
})
|
|
);
|
|
};
|
|
}
|
|
|
|
function createEmitVec3PropertyUpdateFunction(property, elX, elY, elZ) {
|
|
return function() {
|
|
var data = {
|
|
type: "update",
|
|
properties: {
|
|
}
|
|
};
|
|
data.properties[property] = {
|
|
x: elX.value,
|
|
y: elY.value,
|
|
z: elZ.value,
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(data));
|
|
}
|
|
};
|
|
|
|
function createEmitGroupVec3PropertyUpdateFunction(group, property, elX, elY, elZ) {
|
|
return function() {
|
|
var data = {
|
|
type: "update",
|
|
properties: {
|
|
}
|
|
};
|
|
data.properties[group] = { };
|
|
data.properties[group][property] = {
|
|
x: elX.value,
|
|
y: elY.value,
|
|
z: elZ.value,
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(data));
|
|
}
|
|
};
|
|
|
|
function createEmitVec3PropertyUpdateFunctionWithMultiplier(property, elX, elY, elZ, multiplier) {
|
|
return function() {
|
|
var data = {
|
|
type: "update",
|
|
properties: {
|
|
}
|
|
};
|
|
data.properties[property] = {
|
|
x: elX.value * multiplier,
|
|
y: elY.value * multiplier,
|
|
z: elZ.value * multiplier,
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(data));
|
|
}
|
|
};
|
|
|
|
function createEmitColorPropertyUpdateFunction(property, elRed, elGreen, elBlue) {
|
|
return function() {
|
|
emitColorPropertyUpdate(property, elRed.value, elGreen.value, elBlue.value);
|
|
}
|
|
};
|
|
|
|
function emitColorPropertyUpdate(property, red, green, blue, group) {
|
|
var data = {
|
|
type: "update",
|
|
properties: {
|
|
}
|
|
};
|
|
if (group) {
|
|
data.properties[group] = { };
|
|
data.properties[group][property] = {
|
|
red: red,
|
|
green: green,
|
|
blue: blue,
|
|
};
|
|
} else {
|
|
data.properties[property] = {
|
|
red: red,
|
|
green: green,
|
|
blue: blue,
|
|
};
|
|
}
|
|
EventBridge.emitWebEvent(JSON.stringify(data));
|
|
};
|
|
|
|
|
|
function createEmitGroupColorPropertyUpdateFunction(group, property, elRed, elGreen, elBlue) {
|
|
return function() {
|
|
var data = {
|
|
type: "update",
|
|
properties: {
|
|
}
|
|
};
|
|
data.properties[group] = { };
|
|
|
|
data.properties[group][property] = {
|
|
red: elRed.value,
|
|
green: elGreen.value,
|
|
blue: elBlue.value,
|
|
};
|
|
EventBridge.emitWebEvent(JSON.stringify(data));
|
|
}
|
|
};
|
|
|
|
function loaded() {
|
|
var allSections = [];
|
|
var elID = document.getElementById("property-id");
|
|
var elType = document.getElementById("property-type");
|
|
var elName = document.getElementById("property-name");
|
|
var elLocked = document.getElementById("property-locked");
|
|
var elVisible = document.getElementById("property-visible");
|
|
var elPositionX = document.getElementById("property-pos-x");
|
|
var elPositionY = document.getElementById("property-pos-y");
|
|
var elPositionZ = document.getElementById("property-pos-z");
|
|
var elMoveSelectionToGrid = document.getElementById("move-selection-to-grid");
|
|
var elMoveAllToGrid = document.getElementById("move-all-to-grid");
|
|
|
|
var elDimensionsX = document.getElementById("property-dim-x");
|
|
var elDimensionsY = document.getElementById("property-dim-y");
|
|
var elDimensionsZ = document.getElementById("property-dim-z");
|
|
var elResetToNaturalDimensions = document.getElementById("reset-to-natural-dimensions");
|
|
var elRescaleDimensionsPct = document.getElementById("dimension-rescale-pct");
|
|
var elRescaleDimensionsButton = document.getElementById("dimension-rescale-button");
|
|
|
|
var elRegistrationX = document.getElementById("property-reg-x");
|
|
var elRegistrationY = document.getElementById("property-reg-y");
|
|
var elRegistrationZ = document.getElementById("property-reg-z");
|
|
|
|
var elRotationX = document.getElementById("property-rot-x");
|
|
var elRotationY = document.getElementById("property-rot-y");
|
|
var elRotationZ = document.getElementById("property-rot-z");
|
|
|
|
var elLinearVelocityX = document.getElementById("property-lvel-x");
|
|
var elLinearVelocityY = document.getElementById("property-lvel-y");
|
|
var elLinearVelocityZ = document.getElementById("property-lvel-z");
|
|
var elLinearDamping = document.getElementById("property-ldamping");
|
|
|
|
var elAngularVelocityX = document.getElementById("property-avel-x");
|
|
var elAngularVelocityY = document.getElementById("property-avel-y");
|
|
var elAngularVelocityZ = document.getElementById("property-avel-z");
|
|
var elAngularDamping = document.getElementById("property-adamping");
|
|
|
|
var elRestitution = document.getElementById("property-restitution");
|
|
var elFriction = document.getElementById("property-friction");
|
|
|
|
var elGravityX = document.getElementById("property-grav-x");
|
|
var elGravityY = document.getElementById("property-grav-y");
|
|
var elGravityZ = document.getElementById("property-grav-z");
|
|
|
|
var elAccelerationX = document.getElementById("property-lacc-x");
|
|
var elAccelerationY = document.getElementById("property-lacc-y");
|
|
var elAccelerationZ = document.getElementById("property-lacc-z");
|
|
|
|
var elDensity = document.getElementById("property-density");
|
|
var elIgnoreForCollisions = document.getElementById("property-ignore-for-collisions");
|
|
var elCollisionsWillMove = document.getElementById("property-collisions-will-move");
|
|
var elCollisionSoundURL = document.getElementById("property-collision-sound-url");
|
|
var elLifetime = document.getElementById("property-lifetime");
|
|
var elScriptURL = document.getElementById("property-script-url");
|
|
var elScriptTimestamp = document.getElementById("property-script-timestamp");
|
|
var elReloadScriptButton = document.getElementById("reload-script-button");
|
|
var elUserData = document.getElementById("property-user-data");
|
|
|
|
var elColorSection = document.getElementById("color-section");
|
|
var elColor = document.getElementById("property-color");
|
|
var elColorRed = document.getElementById("property-color-red");
|
|
var elColorGreen = document.getElementById("property-color-green");
|
|
var elColorBlue = document.getElementById("property-color-blue");
|
|
|
|
var elLightSections = document.querySelectorAll(".light-section");
|
|
allSections.push(elLightSections);
|
|
var elLightSpotLight = document.getElementById("property-light-spot-light");
|
|
var elLightColor = document.getElementById("property-light-color");
|
|
var elLightColorRed = document.getElementById("property-light-color-red");
|
|
var elLightColorGreen = document.getElementById("property-light-color-green");
|
|
var elLightColorBlue = document.getElementById("property-light-color-blue");
|
|
|
|
var elLightIntensity = document.getElementById("property-light-intensity");
|
|
var elLightExponent = document.getElementById("property-light-exponent");
|
|
var elLightCutoff = document.getElementById("property-light-cutoff");
|
|
|
|
var elModelSections = document.querySelectorAll(".model-section");
|
|
allSections.push(elModelSections);
|
|
var elModelURL = document.getElementById("property-model-url");
|
|
var elShapeType = document.getElementById("property-shape-type");
|
|
var elCompoundShapeURL = document.getElementById("property-compound-shape-url");
|
|
var elModelAnimationURL = document.getElementById("property-model-animation-url");
|
|
var elModelAnimationPlaying = document.getElementById("property-model-animation-playing");
|
|
var elModelAnimationFPS = document.getElementById("property-model-animation-fps");
|
|
var elModelAnimationFrame = document.getElementById("property-model-animation-frame");
|
|
var elModelAnimationSettings = document.getElementById("property-model-animation-settings");
|
|
var elModelTextures = document.getElementById("property-model-textures");
|
|
var elModelOriginalTextures = document.getElementById("property-model-original-textures");
|
|
|
|
var elWebSections = document.querySelectorAll(".web-section");
|
|
allSections.push(elWebSections);
|
|
var elWebSourceURL = document.getElementById("property-web-source-url");
|
|
|
|
var elParticleSections = document.querySelectorAll(".particle-section");
|
|
allSections.push(elParticleSections);
|
|
var elParticleMaxParticles = document.getElementById("property-particle-maxparticles");
|
|
var elParticleLifeSpan = document.getElementById("property-particle-lifespan");
|
|
var elParticleEmitRate = document.getElementById("property-particle-emit-rate");
|
|
var elParticleEmitDirectionX = document.getElementById("property-particle-emit-direction-x");
|
|
var elParticleEmitDirectionY = document.getElementById("property-particle-emit-direction-y");
|
|
var elParticleEmitDirectionZ = document.getElementById("property-particle-emit-direction-z");
|
|
var elParticleEmitStrength = document.getElementById("property-particle-emit-strength");
|
|
var elParticleLocalGravity = document.getElementById("property-particle-localgravity");
|
|
var elParticleRadius = document.getElementById("property-particle-radius");
|
|
|
|
var elTextSections = document.querySelectorAll(".text-section");
|
|
allSections.push(elTextSections);
|
|
var elTextText = document.getElementById("property-text-text");
|
|
var elTextLineHeight = document.getElementById("property-text-line-height");
|
|
var elTextTextColor = document.getElementById("property-text-text-color");
|
|
var elTextTextColorRed = document.getElementById("property-text-text-color-red");
|
|
var elTextTextColorGreen = document.getElementById("property-text-text-color-green");
|
|
var elTextTextColorBlue = document.getElementById("property-text-text-color-blue");
|
|
var elTextBackgroundColor = document.getElementById("property-text-background-color");
|
|
var elTextBackgroundColorRed = document.getElementById("property-text-background-color-red");
|
|
var elTextBackgroundColorGreen = document.getElementById("property-text-background-color-green");
|
|
var elTextBackgroundColorBlue = document.getElementById("property-text-background-color-blue");
|
|
|
|
var elZoneSections = document.querySelectorAll(".zone-section");
|
|
allSections.push(elZoneSections);
|
|
var elZoneStageSunModelEnabled = document.getElementById("property-zone-stage-sun-model-enabled");
|
|
var elZoneKeyLightColor = document.getElementById("property-zone-key-light-color");
|
|
var elZoneKeyLightColorRed = document.getElementById("property-zone-key-light-color-red");
|
|
var elZoneKeyLightColorGreen = document.getElementById("property-zone-key-light-color-green");
|
|
var elZoneKeyLightColorBlue = document.getElementById("property-zone-key-light-color-blue");
|
|
var elZoneKeyLightIntensity = document.getElementById("property-zone-key-intensity");
|
|
var elZoneKeyLightAmbientIntensity = document.getElementById("property-zone-key-ambient-intensity");
|
|
var elZoneKeyLightDirectionX = document.getElementById("property-zone-key-light-direction-x");
|
|
var elZoneKeyLightDirectionY = document.getElementById("property-zone-key-light-direction-y");
|
|
var elZoneKeyLightDirectionZ = document.getElementById("property-zone-key-light-direction-z");
|
|
|
|
var elZoneStageLatitude = document.getElementById("property-zone-stage-latitude");
|
|
var elZoneStageLongitude = document.getElementById("property-zone-stage-longitude");
|
|
var elZoneStageAltitude = document.getElementById("property-zone-stage-altitude");
|
|
var elZoneStageAutomaticHourDay = document.getElementById("property-zone-stage-automatic-hour-day");
|
|
var elZoneStageDay = document.getElementById("property-zone-stage-day");
|
|
var elZoneStageHour = document.getElementById("property-zone-stage-hour");
|
|
|
|
var elZoneBackgroundMode = document.getElementById("property-zone-background-mode");
|
|
|
|
var elZoneSkyboxColor = document.getElementById("property-zone-skybox-color");
|
|
var elZoneSkyboxColorRed = document.getElementById("property-zone-skybox-color-red");
|
|
var elZoneSkyboxColorGreen = document.getElementById("property-zone-skybox-color-green");
|
|
var elZoneSkyboxColorBlue = document.getElementById("property-zone-skybox-color-blue");
|
|
var elZoneSkyboxURL = document.getElementById("property-zone-skybox-url");
|
|
|
|
var elZoneAtmosphereCenterX = document.getElementById("property-zone-atmosphere-center-x");
|
|
var elZoneAtmosphereCenterY = document.getElementById("property-zone-atmosphere-center-y");
|
|
var elZoneAtmosphereCenterZ = document.getElementById("property-zone-atmosphere-center-z");
|
|
var elCenterAtmosphereToZone = document.getElementById("center-atmosphere-in-zone");
|
|
|
|
var elZoneAtmosphereInnerRadius = document.getElementById("property-zone-atmosphere-inner-radius");
|
|
var elZoneAtmosphereOuterRadius = document.getElementById("property-zone-atmosphere-outer-radius");
|
|
var elZoneAtmosphereMieScattering = document.getElementById("property-zone-atmosphere-mie-scattering");
|
|
var elZoneAtmosphereRayleighScattering = document.getElementById("property-zone-atmosphere-rayleigh-scattering");
|
|
var elZoneAtmosphereScatteringWavelengthsX = document.getElementById("property-zone-atmosphere-scattering-wavelengths-x");
|
|
var elZoneAtmosphereScatteringWavelengthsY = document.getElementById("property-zone-atmosphere-scattering-wavelengths-y");
|
|
var elZoneAtmosphereScatteringWavelengthsZ = document.getElementById("property-zone-atmosphere-scattering-wavelengths-z");
|
|
var elZoneAtmosphereHasStars = document.getElementById("property-zone-atmosphere-has-stars");
|
|
|
|
var elPolyVoxSections = document.querySelectorAll(".poly-vox-section");
|
|
allSections.push(elPolyVoxSections);
|
|
var elVoxelVolumeSizeX = document.getElementById("property-voxel-volume-size-x");
|
|
var elVoxelVolumeSizeY = document.getElementById("property-voxel-volume-size-y");
|
|
var elVoxelVolumeSizeZ = document.getElementById("property-voxel-volume-size-z");
|
|
var elVoxelSurfaceStyle = document.getElementById("property-voxel-surface-style");
|
|
var elXTextureURL = document.getElementById("property-x-texture-url");
|
|
var elYTextureURL = document.getElementById("property-y-texture-url");
|
|
var elZTextureURL = document.getElementById("property-z-texture-url");
|
|
|
|
var elHyperlinkHref = document.getElementById("property-hyperlink-href");
|
|
var elHyperlinkDescription = document.getElementById("property-hyperlink-description");
|
|
|
|
|
|
|
|
if (window.EventBridge !== undefined) {
|
|
EventBridge.scriptEventReceived.connect(function(data) {
|
|
data = JSON.parse(data);
|
|
if (data.type == "update") {
|
|
if (data.selections.length == 0) {
|
|
elType.innerHTML = "<i>No Selection</i>";
|
|
elID.innerHTML = "";
|
|
disableChildren(document.getElementById("properties-list"), 'input');
|
|
} else if (data.selections.length > 1) {
|
|
var selections = data.selections;
|
|
|
|
var ids = [];
|
|
var types = {};
|
|
|
|
for (var i = 0; i < selections.length; i++) {
|
|
ids.push(selections[i].id);
|
|
var type = selections[i].properties.type;
|
|
if (types[type] === undefined) {
|
|
types[type] = 0;
|
|
}
|
|
types[type]++;
|
|
}
|
|
elID.innerHTML = ids.join("<br>");
|
|
|
|
var typeStrs = [];
|
|
for (type in types) {
|
|
typeStrs.push(type + " (" + types[type] + ")");
|
|
}
|
|
elType.innerHTML = typeStrs.join(", ");
|
|
|
|
disableChildren(document.getElementById("properties-list"), 'input');
|
|
} else {
|
|
var activeElement = document.activeElement;
|
|
|
|
try {
|
|
var selected = (activeElement
|
|
&& activeElement.selectionStart == 0
|
|
&& activeElement.selectionEnd == activeElement.value.length);
|
|
} catch (e) {
|
|
var selected = false;
|
|
}
|
|
|
|
var properties = data.selections[0].properties;
|
|
|
|
elID.innerHTML = properties.id;
|
|
|
|
elType.innerHTML = properties.type;
|
|
|
|
elLocked.checked = properties.locked;
|
|
|
|
if (properties.locked) {
|
|
disableChildren(document.getElementById("properties-list"), 'input');
|
|
elLocked.removeAttribute('disabled');
|
|
} else {
|
|
enableChildren(document.getElementById("properties-list"), 'input');
|
|
}
|
|
|
|
elName.value = properties.name;
|
|
|
|
elVisible.checked = properties.visible;
|
|
|
|
elPositionX.value = properties.position.x.toFixed(2);
|
|
elPositionY.value = properties.position.y.toFixed(2);
|
|
elPositionZ.value = properties.position.z.toFixed(2);
|
|
|
|
elDimensionsX.value = properties.dimensions.x.toFixed(2);
|
|
elDimensionsY.value = properties.dimensions.y.toFixed(2);
|
|
elDimensionsZ.value = properties.dimensions.z.toFixed(2);
|
|
|
|
elRegistrationX.value = properties.registrationPoint.x.toFixed(2);
|
|
elRegistrationY.value = properties.registrationPoint.y.toFixed(2);
|
|
elRegistrationZ.value = properties.registrationPoint.z.toFixed(2);
|
|
|
|
elRotationX.value = properties.rotation.x.toFixed(2);
|
|
elRotationY.value = properties.rotation.y.toFixed(2);
|
|
elRotationZ.value = properties.rotation.z.toFixed(2);
|
|
|
|
elLinearVelocityX.value = properties.velocity.x.toFixed(2);
|
|
elLinearVelocityY.value = properties.velocity.y.toFixed(2);
|
|
elLinearVelocityZ.value = properties.velocity.z.toFixed(2);
|
|
elLinearDamping.value = properties.damping.toFixed(2);
|
|
|
|
elAngularVelocityX.value = (properties.angularVelocity.x * RADIANS_TO_DEGREES).toFixed(2);
|
|
elAngularVelocityY.value = (properties.angularVelocity.y * RADIANS_TO_DEGREES).toFixed(2);
|
|
elAngularVelocityZ.value = (properties.angularVelocity.z * RADIANS_TO_DEGREES).toFixed(2);
|
|
elAngularDamping.value = properties.angularDamping.toFixed(2);
|
|
|
|
elRestitution.value = properties.restitution.toFixed(2);
|
|
elFriction.value = properties.friction.toFixed(2);
|
|
|
|
elGravityX.value = properties.gravity.x.toFixed(2);
|
|
elGravityY.value = properties.gravity.y.toFixed(2);
|
|
elGravityZ.value = properties.gravity.z.toFixed(2);
|
|
|
|
elAccelerationX.value = properties.acceleration.x.toFixed(2);
|
|
elAccelerationY.value = properties.acceleration.y.toFixed(2);
|
|
elAccelerationZ.value = properties.acceleration.z.toFixed(2);
|
|
|
|
elDensity.value = properties.density.toFixed(2);
|
|
elIgnoreForCollisions.checked = properties.ignoreForCollisions;
|
|
elCollisionsWillMove.checked = properties.collisionsWillMove;
|
|
elCollisionSoundURL.value = properties.collisionSoundURL;
|
|
elLifetime.value = properties.lifetime;
|
|
elScriptURL.value = properties.script;
|
|
elScriptTimestamp.value = properties.scriptTimestamp;
|
|
elUserData.value = properties.userData;
|
|
|
|
elHyperlinkHref.value = properties.href;
|
|
elHyperlinkDescription.value = properties.description;
|
|
|
|
for (var i = 0; i < allSections.length; i++) {
|
|
for (var j = 0; j < allSections[i].length; j++) {
|
|
allSections[i][j].style.display = 'none';
|
|
}
|
|
}
|
|
|
|
if (properties.type == "Box" || properties.type == "Sphere" || properties.type == "ParticleEffect") {
|
|
elColorSection.style.display = 'block';
|
|
elColorRed.value = properties.color.red;
|
|
elColorGreen.value = properties.color.green;
|
|
elColorBlue.value = properties.color.blue;
|
|
elColor.style.backgroundColor = "rgb(" + properties.color.red + "," + properties.color.green + "," + properties.color.blue + ")";
|
|
} else {
|
|
elColorSection.style.display = 'none';
|
|
}
|
|
|
|
if (properties.type == "Model" || properties.type == "ParticleEffect") {
|
|
for (var i = 0; i < elModelSections.length; i++) {
|
|
elModelSections[i].style.display = 'block';
|
|
}
|
|
|
|
elModelURL.value = properties.modelURL;
|
|
elShapeType.value = properties.shapeType;
|
|
elCompoundShapeURL.value = properties.compoundShapeURL;
|
|
elModelAnimationURL.value = properties.animationURL;
|
|
elModelAnimationPlaying.checked = properties.animationIsPlaying;
|
|
elModelAnimationFPS.value = properties.animationFPS;
|
|
elModelAnimationFrame.value = properties.animationFrameIndex;
|
|
elModelAnimationSettings.value = properties.animationSettings;
|
|
elModelTextures.value = properties.textures;
|
|
elModelOriginalTextures.value = properties.originalTextures;
|
|
} else if (properties.type == "Web") {
|
|
for (var i = 0; i < elWebSections.length; i++) {
|
|
elWebSections[i].style.display = 'block';
|
|
}
|
|
|
|
elWebSourceURL.value = properties.sourceUrl;
|
|
} else if (properties.type == "Text") {
|
|
for (var i = 0; i < elTextSections.length; i++) {
|
|
elTextSections[i].style.display = 'block';
|
|
}
|
|
|
|
elTextText.value = properties.text;
|
|
elTextLineHeight.value = properties.lineHeight.toFixed(4);
|
|
elTextTextColor.style.backgroundColor = "rgb(" + properties.textColor.red + "," + properties.textColor.green + "," + properties.textColor.blue + ")";
|
|
elTextTextColorRed.value = properties.textColor.red;
|
|
elTextTextColorGreen.value = properties.textColor.green;
|
|
elTextTextColorBlue.value = properties.textColor.blue;
|
|
elTextBackgroundColorRed.value = properties.backgroundColor.red;
|
|
elTextBackgroundColorGreen.value = properties.backgroundColor.green;
|
|
elTextBackgroundColorBlue.value = properties.backgroundColor.blue;
|
|
} else if (properties.type == "Light") {
|
|
for (var i = 0; i < elLightSections.length; i++) {
|
|
elLightSections[i].style.display = 'block';
|
|
}
|
|
|
|
elLightSpotLight.checked = properties.isSpotlight;
|
|
|
|
elLightColor.style.backgroundColor = "rgb(" + properties.color.red + "," + properties.color.green + "," + properties.color.blue + ")";
|
|
elLightColorRed.value = properties.color.red;
|
|
elLightColorGreen.value = properties.color.green;
|
|
elLightColorBlue.value = properties.color.blue;
|
|
|
|
elLightIntensity.value = properties.intensity;
|
|
elLightExponent.value = properties.exponent;
|
|
elLightCutoff.value = properties.cutoff;
|
|
} else if (properties.type == "Zone") {
|
|
for (var i = 0; i < elZoneSections.length; i++) {
|
|
elZoneSections[i].style.display = 'block';
|
|
}
|
|
|
|
elZoneStageSunModelEnabled.checked = properties.stage.sunModelEnabled;
|
|
elZoneKeyLightColor.style.backgroundColor = "rgb(" + properties.keyLightColor.red + "," + properties.keyLightColor.green + "," + properties.keyLightColor.blue + ")";
|
|
elZoneKeyLightColorRed.value = properties.keyLightColor.red;
|
|
elZoneKeyLightColorGreen.value = properties.keyLightColor.green;
|
|
elZoneKeyLightColorBlue.value = properties.keyLightColor.blue;
|
|
elZoneKeyLightIntensity.value = properties.keyLightIntensity.toFixed(2);
|
|
elZoneKeyLightAmbientIntensity.value = properties.keyLightAmbientIntensity.toFixed(2);
|
|
elZoneKeyLightDirectionX.value = properties.keyLightDirection.x.toFixed(2);
|
|
elZoneKeyLightDirectionY.value = properties.keyLightDirection.y.toFixed(2);
|
|
elZoneKeyLightDirectionZ.value = properties.keyLightDirection.z.toFixed(2);
|
|
|
|
elZoneStageLatitude.value = properties.stage.latitude.toFixed(2);
|
|
elZoneStageLongitude.value = properties.stage.longitude.toFixed(2);
|
|
elZoneStageAltitude.value = properties.stage.altitude.toFixed(2);
|
|
elZoneStageAutomaticHourDay.checked = properties.stage.automaticHourDay;
|
|
elZoneStageDay.value = properties.stage.day;
|
|
elZoneStageHour.value = properties.stage.hour;
|
|
elShapeType.value = properties.shapeType;
|
|
elCompoundShapeURL.value = properties.compoundShapeURL;
|
|
|
|
elZoneBackgroundMode.value = properties.backgroundMode;
|
|
|
|
elZoneSkyboxColor.style.backgroundColor = "rgb(" + properties.skybox.color.red + "," + properties.skybox.color.green + "," + properties.skybox.color.blue + ")";
|
|
elZoneSkyboxColorRed.value = properties.skybox.color.red;
|
|
elZoneSkyboxColorGreen.value = properties.skybox.color.green;
|
|
elZoneSkyboxColorBlue.value = properties.skybox.color.blue;
|
|
elZoneSkyboxURL.value = properties.skybox.url;
|
|
|
|
elZoneAtmosphereCenterX.value = properties.atmosphere.center.x;
|
|
elZoneAtmosphereCenterY.value = properties.atmosphere.center.y;
|
|
elZoneAtmosphereCenterZ.value = properties.atmosphere.center.z;
|
|
elZoneAtmosphereInnerRadius.value = properties.atmosphere.innerRadius;
|
|
elZoneAtmosphereOuterRadius.value = properties.atmosphere.outerRadius;
|
|
elZoneAtmosphereMieScattering.value = properties.atmosphere.mieScattering;
|
|
elZoneAtmosphereRayleighScattering.value = properties.atmosphere.rayleighScattering;
|
|
elZoneAtmosphereScatteringWavelengthsX.value = properties.atmosphere.scatteringWavelengths.x;
|
|
elZoneAtmosphereScatteringWavelengthsY.value = properties.atmosphere.scatteringWavelengths.y;
|
|
elZoneAtmosphereScatteringWavelengthsZ.value = properties.atmosphere.scatteringWavelengths.z;
|
|
elZoneAtmosphereHasStars.checked = properties.atmosphere.hasStars;
|
|
|
|
showElements(document.getElementsByClassName('skybox-section'), elZoneBackgroundMode.value == 'skybox');
|
|
showElements(document.getElementsByClassName('atmosphere-section'), elZoneBackgroundMode.value == 'atmosphere');
|
|
} else if (properties.type == "ParticleEffect") {
|
|
for (var i = 0; i < elParticleSections.length; i++) {
|
|
elParticleSections[i].style.display = 'block';
|
|
}
|
|
|
|
elParticleMaxParticles.value = properties.maxParticles;
|
|
elParticleLifeSpan.value = properties.lifespan.toFixed(2);
|
|
elParticleEmitRate.value = properties.emitRate.toFixed(1);
|
|
elParticleEmitDirectionX.value = properties.emitDirection.x.toFixed(2);
|
|
elParticleEmitDirectionY.value = properties.emitDirection.y.toFixed(2);
|
|
elParticleEmitDirectionZ.value = properties.emitDirection.z.toFixed(2);
|
|
elParticleEmitStrength.value = properties.emitStrength.toFixed(2);
|
|
elParticleLocalGravity.value = properties.localGravity.toFixed(2);
|
|
elParticleRadius.value = properties.particleRadius.toFixed(3);
|
|
} else if (properties.type == "PolyVox") {
|
|
for (var i = 0; i < elPolyVoxSections.length; i++) {
|
|
elPolyVoxSections[i].style.display = 'block';
|
|
}
|
|
|
|
elVoxelVolumeSizeX.value = properties.voxelVolumeSize.x.toFixed(2);
|
|
elVoxelVolumeSizeY.value = properties.voxelVolumeSize.y.toFixed(2);
|
|
elVoxelVolumeSizeZ.value = properties.voxelVolumeSize.z.toFixed(2);
|
|
elVoxelSurfaceStyle.value = properties.voxelSurfaceStyle;
|
|
elXTextureURL.value = properties.xTextureURL;
|
|
elYTextureURL.value = properties.yTextureURL;
|
|
elZTextureURL.value = properties.zTextureURL;
|
|
}
|
|
|
|
if (selected) {
|
|
activeElement.focus();
|
|
activeElement.select();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
elLocked.addEventListener('change', createEmitCheckedPropertyUpdateFunction('locked'));
|
|
elName.addEventListener('change', createEmitTextPropertyUpdateFunction('name'));
|
|
elHyperlinkHref.addEventListener('change', createEmitTextPropertyUpdateFunction('href'));
|
|
elHyperlinkDescription.addEventListener('change', createEmitTextPropertyUpdateFunction('description'));
|
|
elVisible.addEventListener('change', createEmitCheckedPropertyUpdateFunction('visible'));
|
|
|
|
var positionChangeFunction = createEmitVec3PropertyUpdateFunction(
|
|
'position', elPositionX, elPositionY, elPositionZ);
|
|
elPositionX.addEventListener('change', positionChangeFunction);
|
|
elPositionY.addEventListener('change', positionChangeFunction);
|
|
elPositionZ.addEventListener('change', positionChangeFunction);
|
|
|
|
var dimensionsChangeFunction = createEmitVec3PropertyUpdateFunction(
|
|
'dimensions', elDimensionsX, elDimensionsY, elDimensionsZ);
|
|
elDimensionsX.addEventListener('change', dimensionsChangeFunction);
|
|
elDimensionsY.addEventListener('change', dimensionsChangeFunction);
|
|
elDimensionsZ.addEventListener('change', dimensionsChangeFunction);
|
|
|
|
var registrationChangeFunction = createEmitVec3PropertyUpdateFunction(
|
|
'registrationPoint', elRegistrationX, elRegistrationY, elRegistrationZ);
|
|
elRegistrationX.addEventListener('change', registrationChangeFunction);
|
|
elRegistrationY.addEventListener('change', registrationChangeFunction);
|
|
elRegistrationZ.addEventListener('change', registrationChangeFunction);
|
|
|
|
var rotationChangeFunction = createEmitVec3PropertyUpdateFunction(
|
|
'rotation', elRotationX, elRotationY, elRotationZ);
|
|
elRotationX.addEventListener('change', rotationChangeFunction);
|
|
elRotationY.addEventListener('change', rotationChangeFunction);
|
|
elRotationZ.addEventListener('change', rotationChangeFunction);
|
|
|
|
var velocityChangeFunction = createEmitVec3PropertyUpdateFunction(
|
|
'velocity', elLinearVelocityX, elLinearVelocityY, elLinearVelocityZ);
|
|
elLinearVelocityX.addEventListener('change', velocityChangeFunction);
|
|
elLinearVelocityY.addEventListener('change', velocityChangeFunction);
|
|
elLinearVelocityZ.addEventListener('change', velocityChangeFunction);
|
|
elLinearDamping.addEventListener('change', createEmitNumberPropertyUpdateFunction('damping'));
|
|
|
|
var angularVelocityChangeFunction = createEmitVec3PropertyUpdateFunctionWithMultiplier(
|
|
'angularVelocity', elAngularVelocityX, elAngularVelocityY, elAngularVelocityZ, DEGREES_TO_RADIANS);
|
|
elAngularVelocityX.addEventListener('change', angularVelocityChangeFunction);
|
|
elAngularVelocityY.addEventListener('change', angularVelocityChangeFunction);
|
|
elAngularVelocityZ.addEventListener('change', angularVelocityChangeFunction);
|
|
elAngularDamping.addEventListener('change', createEmitNumberPropertyUpdateFunction('angularDamping'));
|
|
|
|
elRestitution.addEventListener('change', createEmitNumberPropertyUpdateFunction('restitution'));
|
|
elFriction.addEventListener('change', createEmitNumberPropertyUpdateFunction('friction'));
|
|
|
|
var gravityChangeFunction = createEmitVec3PropertyUpdateFunction(
|
|
'gravity', elGravityX, elGravityY, elGravityZ);
|
|
elGravityX.addEventListener('change', gravityChangeFunction);
|
|
elGravityY.addEventListener('change', gravityChangeFunction);
|
|
elGravityZ.addEventListener('change', gravityChangeFunction);
|
|
|
|
var accelerationChangeFunction = createEmitVec3PropertyUpdateFunction(
|
|
'acceleration', elAccelerationX, elAccelerationY, elAccelerationZ);
|
|
elAccelerationX.addEventListener('change', accelerationChangeFunction);
|
|
elAccelerationY.addEventListener('change', accelerationChangeFunction);
|
|
elAccelerationZ.addEventListener('change', accelerationChangeFunction);
|
|
|
|
elDensity.addEventListener('change', createEmitNumberPropertyUpdateFunction('density'));
|
|
elIgnoreForCollisions.addEventListener('change', createEmitCheckedPropertyUpdateFunction('ignoreForCollisions'));
|
|
elCollisionsWillMove.addEventListener('change', createEmitCheckedPropertyUpdateFunction('collisionsWillMove'));
|
|
elCollisionSoundURL.addEventListener('change', createEmitTextPropertyUpdateFunction('collisionSoundURL'));
|
|
|
|
elLifetime.addEventListener('change', createEmitNumberPropertyUpdateFunction('lifetime'));
|
|
elScriptURL.addEventListener('change', createEmitTextPropertyUpdateFunction('script'));
|
|
elScriptTimestamp.addEventListener('change', createEmitNumberPropertyUpdateFunction('scriptTimestamp'));
|
|
elUserData.addEventListener('change', createEmitTextPropertyUpdateFunction('userData'));
|
|
|
|
var colorChangeFunction = createEmitColorPropertyUpdateFunction(
|
|
'color', elColorRed, elColorGreen, elColorBlue);
|
|
elColorRed.addEventListener('change', colorChangeFunction);
|
|
elColorGreen.addEventListener('change', colorChangeFunction);
|
|
elColorBlue.addEventListener('change', colorChangeFunction);
|
|
$('#property-color').colpick({
|
|
colorScheme:'dark',
|
|
layout:'hex',
|
|
color:'000000',
|
|
onSubmit: function(hsb, hex, rgb, el) {
|
|
$(el).css('background-color', '#'+hex);
|
|
$(el).colpickHide();
|
|
emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b);
|
|
}
|
|
})
|
|
|
|
elLightSpotLight.addEventListener('change', createEmitCheckedPropertyUpdateFunction('isSpotlight'));
|
|
|
|
var lightColorChangeFunction = createEmitColorPropertyUpdateFunction(
|
|
'color', elLightColorRed, elLightColorGreen, elLightColorBlue);
|
|
elLightColorRed.addEventListener('change', lightColorChangeFunction);
|
|
elLightColorGreen.addEventListener('change', lightColorChangeFunction);
|
|
elLightColorBlue.addEventListener('change', lightColorChangeFunction);
|
|
$('#property-light-color').colpick({
|
|
colorScheme:'dark',
|
|
layout:'hex',
|
|
color:'000000',
|
|
onSubmit: function(hsb, hex, rgb, el) {
|
|
$(el).css('background-color', '#'+hex);
|
|
$(el).colpickHide();
|
|
emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b);
|
|
}
|
|
})
|
|
|
|
elLightIntensity.addEventListener('change', createEmitNumberPropertyUpdateFunction('intensity'));
|
|
elLightExponent.addEventListener('change', createEmitNumberPropertyUpdateFunction('exponent'));
|
|
elLightCutoff.addEventListener('change', createEmitNumberPropertyUpdateFunction('cutoff'));
|
|
|
|
elWebSourceURL.addEventListener('change', createEmitTextPropertyUpdateFunction('sourceUrl'));
|
|
|
|
elParticleMaxParticles.addEventListener('change', createEmitNumberPropertyUpdateFunction('maxParticles'));
|
|
elParticleLifeSpan.addEventListener('change', createEmitNumberPropertyUpdateFunction('lifespan'));
|
|
elParticleEmitRate.addEventListener('change', createEmitNumberPropertyUpdateFunction('emitRate'));
|
|
var particleEmitDirectionChangeFunction = createEmitVec3PropertyUpdateFunctionWithMultiplier(
|
|
'emitDirection', elParticleEmitDirectionX, elParticleEmitDirectionY, elParticleEmitDirectionZ, DEGREES_TO_RADIANS);
|
|
elParticleEmitDirectionX.addEventListener('change', particleEmitDirectionChangeFunction);
|
|
elParticleEmitDirectionY.addEventListener('change', particleEmitDirectionChangeFunction);
|
|
elParticleEmitDirectionZ.addEventListener('change', particleEmitDirectionChangeFunction);
|
|
elParticleEmitStrength.addEventListener('change', createEmitNumberPropertyUpdateFunction('emitStrength'));
|
|
elParticleLocalGravity.addEventListener('change', createEmitNumberPropertyUpdateFunction('localGravity'));
|
|
elParticleRadius.addEventListener('change', createEmitNumberPropertyUpdateFunction('particleRadius'));
|
|
|
|
elModelURL.addEventListener('change', createEmitTextPropertyUpdateFunction('modelURL'));
|
|
elShapeType.addEventListener('change', createEmitTextPropertyUpdateFunction('shapeType'));
|
|
elCompoundShapeURL.addEventListener('change', createEmitTextPropertyUpdateFunction('compoundShapeURL'));
|
|
elModelAnimationURL.addEventListener('change', createEmitTextPropertyUpdateFunction('animationURL'));
|
|
elModelAnimationPlaying.addEventListener('change', createEmitCheckedPropertyUpdateFunction('animationIsPlaying'));
|
|
elModelAnimationFPS.addEventListener('change', createEmitNumberPropertyUpdateFunction('animationFPS'));
|
|
elModelAnimationFrame.addEventListener('change', createEmitNumberPropertyUpdateFunction('animationFrameIndex'));
|
|
elModelAnimationSettings.addEventListener('change', createEmitTextPropertyUpdateFunction('animationSettings'));
|
|
elModelTextures.addEventListener('change', createEmitTextPropertyUpdateFunction('textures'));
|
|
|
|
elTextText.addEventListener('change', createEmitTextPropertyUpdateFunction('text'));
|
|
elTextLineHeight.addEventListener('change', createEmitNumberPropertyUpdateFunction('lineHeight'));
|
|
|
|
var textTextColorChangeFunction = createEmitColorPropertyUpdateFunction(
|
|
'textColor', elTextTextColorRed, elTextTextColorGreen, elTextTextColorBlue);
|
|
elTextTextColorRed.addEventListener('change', textTextColorChangeFunction);
|
|
elTextTextColorGreen.addEventListener('change', textTextColorChangeFunction);
|
|
elTextTextColorBlue.addEventListener('change', textTextColorChangeFunction);
|
|
$('#property-text-text-color').colpick({
|
|
colorScheme:'dark',
|
|
layout:'hex',
|
|
color:'000000',
|
|
onSubmit: function(hsb, hex, rgb, el) {
|
|
$(el).css('background-color', '#'+hex);
|
|
$(el).colpickHide();
|
|
emitColorPropertyUpdate('textColor', rgb.r, rgb.g, rgb.b);
|
|
}
|
|
});
|
|
|
|
var textBackgroundColorChangeFunction = createEmitColorPropertyUpdateFunction(
|
|
'backgroundColor', elTextBackgroundColorRed, elTextBackgroundColorGreen, elTextBackgroundColorBlue);
|
|
elTextBackgroundColorRed.addEventListener('change', textBackgroundColorChangeFunction);
|
|
elTextBackgroundColorGreen.addEventListener('change', textBackgroundColorChangeFunction);
|
|
elTextBackgroundColorBlue.addEventListener('change', textBackgroundColorChangeFunction);
|
|
$('#property-text-background-color').colpick({
|
|
colorScheme:'dark',
|
|
layout:'hex',
|
|
color:'000000',
|
|
onSubmit: function(hsb, hex, rgb, el) {
|
|
$(el).css('background-color', '#'+hex);
|
|
$(el).colpickHide();
|
|
emitColorPropertyUpdate('backgroundColor', rgb.r, rgb.g, rgb.b);
|
|
}
|
|
});
|
|
|
|
elZoneStageSunModelEnabled.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('stage','sunModelEnabled'));
|
|
$('#property-zone-key-light-color').colpick({
|
|
colorScheme:'dark',
|
|
layout:'hex',
|
|
color:'000000',
|
|
onSubmit: function(hsb, hex, rgb, el) {
|
|
$(el).css('background-color', '#'+hex);
|
|
$(el).colpickHide();
|
|
emitColorPropertyUpdate('keyLightColor', rgb.r, rgb.g, rgb.b);
|
|
}
|
|
});
|
|
var zoneKeyLightColorChangeFunction = createEmitColorPropertyUpdateFunction(
|
|
'keyLightColor', elZoneKeyLightColorRed, elZoneKeyLightColorGreen, elZoneKeyLightColorBlue);
|
|
elZoneKeyLightColorRed.addEventListener('change', zoneKeyLightColorChangeFunction);
|
|
elZoneKeyLightColorGreen.addEventListener('change', zoneKeyLightColorChangeFunction);
|
|
elZoneKeyLightColorBlue.addEventListener('change', zoneKeyLightColorChangeFunction);
|
|
elZoneKeyLightIntensity.addEventListener('change', createEmitNumberPropertyUpdateFunction('keyLightIntensity'));
|
|
elZoneKeyLightAmbientIntensity.addEventListener('change', createEmitNumberPropertyUpdateFunction('keyLightAmbientIntensity'));
|
|
var zoneKeyLightDirectionChangeFunction = createEmitVec3PropertyUpdateFunction(
|
|
'keyLightDirection', elZoneKeyLightDirectionX, elZoneKeyLightDirectionY, elZoneKeyLightDirectionZ);
|
|
elZoneKeyLightDirectionX.addEventListener('change', zoneKeyLightDirectionChangeFunction);
|
|
elZoneKeyLightDirectionY.addEventListener('change', zoneKeyLightDirectionChangeFunction);
|
|
elZoneKeyLightDirectionZ.addEventListener('change', zoneKeyLightDirectionChangeFunction);
|
|
|
|
elZoneStageLatitude.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('stage','latitude'));
|
|
elZoneStageLongitude.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('stage','longitude'));
|
|
elZoneStageAltitude.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('stage','altitude'));
|
|
elZoneStageAutomaticHourDay.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('stage','automaticHourDay'));
|
|
elZoneStageDay.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('stage','day'));
|
|
elZoneStageHour.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('stage','hour'));
|
|
|
|
|
|
elZoneBackgroundMode.addEventListener('change', createEmitTextPropertyUpdateFunction('backgroundMode'));
|
|
var zoneSkyboxColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('skybox','color',
|
|
elZoneSkyboxColorRed, elZoneSkyboxColorGreen, elZoneSkyboxColorBlue);
|
|
elZoneSkyboxColorRed.addEventListener('change', zoneSkyboxColorChangeFunction);
|
|
elZoneSkyboxColorGreen.addEventListener('change', zoneSkyboxColorChangeFunction);
|
|
elZoneSkyboxColorBlue.addEventListener('change', zoneSkyboxColorChangeFunction);
|
|
$('#property-zone-skybox-color').colpick({
|
|
colorScheme:'dark',
|
|
layout:'hex',
|
|
color:'000000',
|
|
onSubmit: function(hsb, hex, rgb, el) {
|
|
$(el).css('background-color', '#'+hex);
|
|
$(el).colpickHide();
|
|
emitColorPropertyUpdate('color', rgb.r, rgb.g, rgb.b, 'skybox');
|
|
}
|
|
});
|
|
|
|
elZoneSkyboxURL.addEventListener('change', createEmitGroupTextPropertyUpdateFunction('skybox','url'));
|
|
|
|
var zoneAtmosphereCenterChangeFunction = createEmitGroupVec3PropertyUpdateFunction(
|
|
'atmosphere','center', elZoneAtmosphereCenterX, elZoneAtmosphereCenterY, elZoneAtmosphereCenterZ);
|
|
elZoneAtmosphereCenterX.addEventListener('change', zoneAtmosphereCenterChangeFunction);
|
|
elZoneAtmosphereCenterY.addEventListener('change', zoneAtmosphereCenterChangeFunction);
|
|
elZoneAtmosphereCenterZ.addEventListener('change', zoneAtmosphereCenterChangeFunction);
|
|
|
|
|
|
elZoneAtmosphereInnerRadius.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('atmosphere','innerRadius'));
|
|
elZoneAtmosphereOuterRadius.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('atmosphere','outerRadius'));
|
|
elZoneAtmosphereMieScattering.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('atmosphere','mieScattering'));
|
|
elZoneAtmosphereRayleighScattering.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('atmosphere','rayleighScattering'));
|
|
var zoneAtmosphereScatterWavelengthsChangeFunction = createEmitGroupVec3PropertyUpdateFunction(
|
|
'atmosphere','scatteringWavelengths', elZoneAtmosphereScatteringWavelengthsX,
|
|
elZoneAtmosphereScatteringWavelengthsY, elZoneAtmosphereScatteringWavelengthsZ);
|
|
elZoneAtmosphereScatteringWavelengthsX.addEventListener('change', zoneAtmosphereScatterWavelengthsChangeFunction);
|
|
elZoneAtmosphereScatteringWavelengthsY.addEventListener('change', zoneAtmosphereScatterWavelengthsChangeFunction);
|
|
elZoneAtmosphereScatteringWavelengthsZ.addEventListener('change', zoneAtmosphereScatterWavelengthsChangeFunction);
|
|
elZoneAtmosphereHasStars.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('atmosphere','hasStars'));
|
|
|
|
var voxelVolumeSizeChangeFunction = createEmitVec3PropertyUpdateFunction(
|
|
'voxelVolumeSize', elVoxelVolumeSizeX, elVoxelVolumeSizeY, elVoxelVolumeSizeZ);
|
|
elVoxelVolumeSizeX.addEventListener('change', voxelVolumeSizeChangeFunction);
|
|
elVoxelVolumeSizeY.addEventListener('change', voxelVolumeSizeChangeFunction);
|
|
elVoxelVolumeSizeZ.addEventListener('change', voxelVolumeSizeChangeFunction);
|
|
elVoxelSurfaceStyle.addEventListener('change', createEmitTextPropertyUpdateFunction('voxelSurfaceStyle'));
|
|
elXTextureURL.addEventListener('change', createEmitTextPropertyUpdateFunction('xTextureURL'));
|
|
elYTextureURL.addEventListener('change', createEmitTextPropertyUpdateFunction('yTextureURL'));
|
|
elZTextureURL.addEventListener('change', createEmitTextPropertyUpdateFunction('zTextureURL'));
|
|
|
|
elMoveSelectionToGrid.addEventListener("click", function() {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "action",
|
|
action: "moveSelectionToGrid",
|
|
}));
|
|
});
|
|
elMoveAllToGrid.addEventListener("click", function() {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "action",
|
|
action: "moveAllToGrid",
|
|
}));
|
|
});
|
|
elResetToNaturalDimensions.addEventListener("click", function() {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "action",
|
|
action: "resetToNaturalDimensions",
|
|
}));
|
|
});
|
|
elRescaleDimensionsButton.addEventListener("click", function() {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "action",
|
|
action: "rescaleDimensions",
|
|
percentage: parseInt(elRescaleDimensionsPct.value),
|
|
}));
|
|
});
|
|
elReloadScriptButton.addEventListener("click", function() {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "action",
|
|
action: "reloadScript"
|
|
}));
|
|
});
|
|
elCenterAtmosphereToZone.addEventListener("click", function() {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "action",
|
|
action: "centerAtmosphereToZone",
|
|
}));
|
|
});
|
|
|
|
window.onblur = function() {
|
|
// Fake a change event
|
|
var ev = document.createEvent("HTMLEvents");
|
|
ev.initEvent("change", true, true);
|
|
document.activeElement.dispatchEvent(ev);
|
|
}
|
|
|
|
// For input and textarea elements, select all of the text on focus
|
|
// WebKit-based browsers, such as is used with QWebView, have a quirk
|
|
// where the mouseup event comes after the focus event, causing the
|
|
// text to be deselected immediately after selecting all of the text.
|
|
// To make this work we block the first mouseup event after the elements
|
|
// received focus. If we block all mouseup events the user will not
|
|
// be able to click within the selected text.
|
|
// We also check to see if the value has changed to make sure we aren't
|
|
// blocking a mouse-up event when clicking on an input spinner.
|
|
var els = document.querySelectorAll("input, textarea");
|
|
for (var i = 0; i < els.length; i++) {
|
|
var clicked = false;
|
|
var originalText;
|
|
els[i].onfocus = function() {
|
|
originalText = this.value;
|
|
this.select();
|
|
clicked = false;
|
|
};
|
|
els[i].onmouseup = function(e) {
|
|
if (!clicked && originalText == this.value) {
|
|
e.preventDefault();
|
|
}
|
|
clicked = true;
|
|
};
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
|
|
<body class="properties" onload='loaded();'>
|
|
<div id="properties-list">
|
|
<div id="type" class="property">
|
|
<div class="label">
|
|
<label>Type: </label><span id="property-type"></span>
|
|
</div>
|
|
</div>
|
|
<div id="id" class="property">
|
|
<span class="label" style="float: left; margin-right: 6px">
|
|
<label>ID: <label>
|
|
</span>
|
|
<div class="value">
|
|
<span id="property-id" class="selectable"></span>
|
|
</div>
|
|
</div>
|
|
<div class="property">
|
|
<span class="label" style="float: left; margin-right: 6px">Name</span>
|
|
<div class="value" style="overflow: hidden;">
|
|
<input type="text" id="property-name"></input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<span class="label">Locked</span>
|
|
<span class="value">
|
|
<input type='checkbox' id="property-locked">
|
|
</span>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<span class="label">Visible</span>
|
|
<span class="value">
|
|
<input type='checkbox' id="property-visible">
|
|
</span>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">User Data</div>
|
|
<div class="value">
|
|
<textarea id="property-user-data"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="section-header">
|
|
<label>Hyperlink</label>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Href</div>
|
|
<div class="value">
|
|
<input id="property-hyperlink-href" class="url"></input>
|
|
</div>
|
|
</div>
|
|
<div class="property">
|
|
<div class="label">Description</div>
|
|
<div class="value">
|
|
<input id="property-hyperlink-description" class="url"></input>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="section-header">
|
|
<label>Spacial Properites</label>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Position</div>
|
|
<div class="value">
|
|
<div class="input-area">X <br><input class="coord" type='number' id="property-pos-x"></input></div>
|
|
<div class="input-area">Y <br><input class="coord" type='number' id="property-pos-y"></input></div>
|
|
<div class="input-area">Z <br><input class="coord" type='number' id="property-pos-z"></input></div>
|
|
<div>
|
|
<input type="button" id="move-selection-to-grid" value="Selection to Grid">
|
|
<input type="button" id="move-all-to-grid" value="All to Grid">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Registration</div>
|
|
<div class="value">
|
|
<div class="input-area">X <input class="coord" type='number' id="property-reg-x"></input></div>
|
|
<div class="input-area">Y <input class="coord" type='number' id="property-reg-y"></input></div>
|
|
<div class="input-area">Z <input class="coord" type='number' id="property-reg-z"></input></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Dimensions</div>
|
|
<div class="value">
|
|
<div class="input-area">X <input class="coord" type='number' id="property-dim-x"></input></div>
|
|
<div class="input-area">Y <input class="coord" type='number' id="property-dim-y"></input></div>
|
|
<div class="input-area">Z <input class="coord" type='number' id="property-dim-z"></input></div>
|
|
<div>
|
|
<input type="button" id="reset-to-natural-dimensions" value="Reset to Natural Dimensions">
|
|
</div>
|
|
<div class="input-area">
|
|
<input class="" type='number' id="dimension-rescale-pct" value=100></input>%
|
|
</div>
|
|
<span>
|
|
<input type="button" id="dimension-rescale-button" value="Rescale"></input>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="poly-vox-section property">
|
|
<div class="label">Voxel Volume Size</div>
|
|
<div class="value">
|
|
<div class="input-area">X <br> <input class="coord" type='number' id="property-voxel-volume-size-x"></input></div>
|
|
<div class="input-area">Y <br><input class="coord" type='number' id="property-voxel-volume-size-y"></input></div>
|
|
<div class="input-area">Z <br><input class="coord" type='number' id="property-voxel-volume-size-z"></input></div>
|
|
</div>
|
|
|
|
<div class="label">Surface Extractor</div>
|
|
<div class="value">
|
|
<select name="SelectVoxelSurfaceStyle" id="property-voxel-surface-style">
|
|
<option value='0'>marching cubes</option>
|
|
<option value='1'>cubic</option>
|
|
<option value='2'>edged cubic</option>
|
|
<option value='3'>edged marching cubes</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="label">X-axis Texture URL</div>
|
|
<div class="value">
|
|
<input type="text" id="property-x-texture-url" class="url"></input>
|
|
</div>
|
|
|
|
<div class="label">Y-axis Texture URL</div>
|
|
<div class="value">
|
|
<input type="text" id="property-y-texture-url" class="url"></input>
|
|
</div>
|
|
|
|
<div class="label">Z-axis Texture URL</div>
|
|
<div class="value">
|
|
<input type="text" id="property-z-texture-url" class="url"></input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Rotation</div>
|
|
<div class="value">
|
|
<div class="input-area">Pitch <input class="coord" type='number' id="property-rot-x"></input></div>
|
|
<div class="input-area">Yaw <input class="coord" type='number' id="property-rot-y"></input></div>
|
|
<div class="input-area">Roll <input class="coord" type='number' id="property-rot-z"></input></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="section-header">
|
|
<label>Physical Properites</label>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Linear Velocity</div>
|
|
<div class="value">
|
|
<div class="input-area">X <input class="coord" type='number' id="property-lvel-x"></input></div>
|
|
<div class="input-area">Y <input class="coord" type='number' id="property-lvel-y"></input></div>
|
|
<div class="input-area">Z <input class="coord" type='number' id="property-lvel-z"></input></div>
|
|
</div>
|
|
</div>
|
|
<div class="property">
|
|
<div class="label">Linear Damping</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-ldamping"></input>
|
|
</div>
|
|
</div>
|
|
<div class="property">
|
|
<div class="label">Angular Velocity</div>
|
|
<div class="value">
|
|
<div class="input-area">Pitch <input class="coord" type='number' id="property-avel-x"></input></div>
|
|
<div class="input-area">Yaw <input class="coord" type='number' id="property-avel-y"></input></div>
|
|
<div class="input-area">Roll <input class="coord" type='number' id="property-avel-z"></input></div>
|
|
</div>
|
|
</div>
|
|
<div class="property">
|
|
<div class="label">Angular Damping</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-adamping"></input>
|
|
</div>
|
|
</div>
|
|
<div class="property">
|
|
<div class="label">Restitution</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-restitution"></input>
|
|
</div>
|
|
</div>
|
|
<div class="property">
|
|
<div class="label">Friction</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-friction"></input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Gravity</div>
|
|
<div class="value">
|
|
<div class="input-area">X <input class="coord" type='number' id="property-grav-x"></input></div>
|
|
<div class="input-area">Y <input class="coord" type='number' id="property-grav-y"></input></div>
|
|
<div class="input-area">Z <input class="coord" type='number' id="property-grav-z"></input></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Acceleration</div>
|
|
<div class="value">
|
|
<div class="input-area">X <input class="coord" type='number' id="property-lacc-x"></input></div>
|
|
<div class="input-area">Y <input class="coord" type='number' id="property-lacc-y"></input></div>
|
|
<div class="input-area">Z <input class="coord" type='number' id="property-lacc-z"></input></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Density</div>
|
|
<div>
|
|
<input type='number' id="property-density"></input>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="color-section" class="property">
|
|
<div class="label">Color</div>
|
|
<div class="value">
|
|
<div id="property-color" class='color-picker'></div>
|
|
<div class="input-area">R <input class="coord" type='number' id="property-color-red"></input></div>
|
|
<div class="input-area">G <input class="coord" type='number' id="property-color-green"></input></div>
|
|
<div class="input-area">B <input class="coord" type='number' id="property-color-blue"></input></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="section-header">
|
|
<label>Behavior</label>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<span class="label">Ignore For Collisions</span>
|
|
<span class="value">
|
|
<input type='checkbox' id="property-ignore-for-collisions"></input>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<span class="label">Collisions Will Move</span>
|
|
<span class="value">
|
|
<input type='checkbox' id="property-collisions-will-move"></input>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Collision Sound URL</div>
|
|
<div class="value">
|
|
<input id="property-collision-sound-url" class="url"></input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Lifetime</div>
|
|
<div class="value">
|
|
<input type='number' id="property-lifetime"></input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Script URL
|
|
<input type="hidden" id="property-script-timestamp" class="value"></input>
|
|
<input type="button" id="reload-script-button" value="Reload"></input>
|
|
</div>
|
|
<div class="value">
|
|
<input id="property-script-url" class="url"></input>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="section-header model-section zone-section">
|
|
<label>Model</label>
|
|
</div>
|
|
|
|
<div class="model-section property">
|
|
<div class="label">Model URL</div>
|
|
<div class="value">
|
|
<input type="text" id="property-model-url" class="url"></input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="model-section zone-section property">
|
|
<div class="label">Shape Type</div>
|
|
<div class="value">
|
|
<select name="SelectShapeType" id="property-shape-type" name="SelectShapeType">
|
|
<option value='none'>none</option>
|
|
<option value='box'>box</option>
|
|
<option value='sphere'>sphere</option>
|
|
<option value='compound'>compound</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="model-section zone-section property">
|
|
<div class="label">Compound Shape URL</div>
|
|
<div class="value">
|
|
<input type="text" id="property-compound-shape-url" class="url"></input>
|
|
</div>
|
|
</div>
|
|
<div class="model-section property">
|
|
<div class="label">Animation URL</div>
|
|
<div class="value">
|
|
<input type="text" id="property-model-animation-url" class="url"></input>
|
|
</div>
|
|
</div>
|
|
<div class="model-section property">
|
|
<span class="label">Animation Playing</span>
|
|
<span class="value">
|
|
<input type='checkbox' id="property-model-animation-playing">
|
|
</span>
|
|
</div>
|
|
<div class="model-section property">
|
|
<div class="label">Animation FPS</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-model-animation-fps"></input>
|
|
</div>
|
|
</div>
|
|
<div class="model-section property">
|
|
<div class="label">Animation Frame</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-model-animation-frame"></input>
|
|
</div>
|
|
</div>
|
|
<div class="model-section property">
|
|
<div class="label">Animation Settings</div>
|
|
<div class="value">
|
|
<textarea id="property-model-animation-settings"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="model-section property">
|
|
<div class="label">Textures</div>
|
|
<div class="value">
|
|
<textarea id="property-model-textures" value='asdfasdf'></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="model-section property">
|
|
<div class="label">Original Textures</div>
|
|
<div class="value">
|
|
<textarea id="property-model-original-textures" readonly value='asdfasdf'></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="section-header web-section">
|
|
<label>Web</label>
|
|
</div>
|
|
|
|
<div class="web-section property">
|
|
<div class="label">Source URL</div>
|
|
<div class="value">
|
|
<input type="text" id="property-web-source-url" class="url"></input>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="section-header particle-section">
|
|
<label>Particle</label>
|
|
</div>
|
|
|
|
<div class="particle-section property">
|
|
<div class="label">Max Particles</div>
|
|
<div class="value">
|
|
<input type='number' id="property-particle-maxparticles" min="0" max="2048" step="1"></input>
|
|
</div>
|
|
</div>
|
|
<div class="particle-section property">
|
|
<div class="label">Particle Life Span</div>
|
|
<div class="value">
|
|
<input type='number' id="property-particle-lifespan" min="0" step="0.1"></input>
|
|
</div>
|
|
</div>
|
|
<div class="particle-section property">
|
|
<div class="label">Particle Emission Rate</div>
|
|
<div class="value">
|
|
<input type='number' id="property-particle-emit-rate" min="0" step="0.5"></input>
|
|
</div>
|
|
</div>
|
|
<div class="particle-section property">
|
|
<div class="label">Particle Emission Direction</div>
|
|
<div class="value">
|
|
<div class="input-area">X <input class="coord" type='number' id="property-particle-emit-direction-x"></input></div>
|
|
<div class="input-area">Y <input class="coord" type='number' id="property-particle-emit-direction-y"></input></div>
|
|
<div class="input-area">Z <input class="coord" type='number' id="property-particle-emit-direction-z"></input></div>
|
|
</div>
|
|
</div>
|
|
<div class="particle-section property">
|
|
<div class="label">Particle Emission Strength</div>
|
|
<div class="value">
|
|
<input type='number' id="property-particle-emit-strength" min="0" step="0.1"></input>
|
|
</div>
|
|
</div>
|
|
<div class="particle-section property">
|
|
<div class="label">Particle Local Gravity</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-particle-localgravity" step="0.05"></input>
|
|
</div>
|
|
</div>
|
|
<div class="particle-section property">
|
|
<div class="label">Particle Radius</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-particle-radius" min="0" step="0.005"></input>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="section-header text-section">
|
|
<label>Text</label>
|
|
</div>
|
|
|
|
<div class="text-section property">
|
|
<div class="label">Text Content</div>
|
|
<div class="value">
|
|
<input type="text" id="property-text-text"></input>
|
|
</div>
|
|
</div>
|
|
<div class="text-section property">
|
|
<div class="label">Line Height</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-text-line-height" min="0" step="0.005"></input>
|
|
</div>
|
|
</div>
|
|
<div class="text-section property">
|
|
<div class="label">Text Color</div>
|
|
<div class="value">
|
|
<div class='color-picker' id="property-text-text-color"></div>
|
|
<div class="input-area">R <input class="coord" type='number' id="property-text-text-color-red"></input></div>
|
|
<div class="input-area">G <input class="coord" type='number' id="property-text-text-color-green"></input></div>
|
|
<div class="input-area">B <input class="coord" type='number' id="property-text-text-color-blue"></input></div>
|
|
</div>
|
|
</div>
|
|
<div class="text-section property">
|
|
<div class="label">Background Color</div>
|
|
<div class="value">
|
|
<div class='color-picker' id="property-text-background-color"></div>
|
|
<div class="input-area">R <input class="coord" type='number' id="property-text-background-color-red"></input></div>
|
|
<div class="input-area">G <input class="coord" type='number' id="property-text-background-color-green"></input></div>
|
|
<div class="input-area">B <input class="coord" type='number' id="property-text-background-color-blue"></input></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="section-header light-section">
|
|
<label>Light</label>
|
|
</div>
|
|
|
|
<div class="light-section property">
|
|
<span class="label">Spot Light</span>
|
|
<span class="value">
|
|
<input type='checkbox' id="property-light-spot-light">
|
|
</span>
|
|
</div>
|
|
<div class="light-section property">
|
|
<div class="label">Color</div>
|
|
<div class="value">
|
|
<div class='color-picker' id="property-light-color"></div>
|
|
<div class="input-area">R <input class="coord" type='number' id="property-light-color-red"></input></div>
|
|
<div class="input-area">G <input class="coord" type='number' id="property-light-color-green"></input></div>
|
|
<div class="input-area">B <input class="coord" type='number' id="property-light-color-blue"></input></div>
|
|
</div>
|
|
</div>
|
|
<div class="light-section property">
|
|
<div class="label">Intensity</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-light-intensity"></input>
|
|
</div>
|
|
</div>
|
|
<div class="light-section property">
|
|
<div class="label">Spot Light Exponent</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-light-exponent"></input>
|
|
</div>
|
|
</div>
|
|
<div class="light-section property">
|
|
<div class="label">Spot Light Cutoff (degrees)</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-light-cutoff"></input>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="section-header zone-section">
|
|
<label>Zone</label>
|
|
</div>
|
|
|
|
<div class="zone-section property">
|
|
<span class="label">Stage Sun Model Enabled</span>
|
|
<span class="value">
|
|
<input type='checkbox' id="property-zone-stage-sun-model-enabled">
|
|
</span>
|
|
</div>
|
|
|
|
<div class="zone-section property">
|
|
<div class="label">Key Light Color</div>
|
|
<div class="value">
|
|
<div class='color-picker' id="property-zone-key-light-color"></div>
|
|
<div class="input-area">R <input class="coord" type='number' id="property-zone-key-light-color-red" min="0" max="255" step="1"></input></div>
|
|
<div class="input-area">G <input class="coord" type='number' id="property-zone-key-light-color-green" min="0" max="255" step="1"></input></div>
|
|
<div class="input-area">B <input class="coord" type='number' id="property-zone-key-light-color-blue" min="0" max="255" step="1"></input></div>
|
|
</div>
|
|
</div>
|
|
<div class="zone-section property">
|
|
<div class="label">Key Light Intensity</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-zone-key-intensity" min="0" max="10" step="0.1"></input>
|
|
</div>
|
|
</div>
|
|
<div class="zone-section property">
|
|
<div class="label">Key Light Ambient Intensity</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-zone-key-ambient-intensity" min="0" max="10" step="0.1"></input>
|
|
</div>
|
|
</div>
|
|
<div class="zone-section property">
|
|
<div class="label">Key Light Direction</div>
|
|
<div class="value">
|
|
<div class="input-area">Pitch <input class="coord" type='number' id="property-zone-key-light-direction-x"></input></div>
|
|
<div class="input-area">Yaw <input class="coord" type='number' id="property-zone-key-light-direction-y"></input></div>
|
|
<div class="input-area">Roll <input class="coord" type='number' id="property-zone-key-light-direction-z"></input></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="zone-section property">
|
|
<div class="label">Stage Latitude</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-zone-stage-latitude" min="-90" max="90" step="1"></input>
|
|
</div>
|
|
</div>
|
|
<div class="zone-section property">
|
|
<div class="label">Stage Longitude</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-zone-stage-longitude" min="-180" max="180" step="1"></input>
|
|
</div>
|
|
</div>
|
|
<div class="zone-section property">
|
|
<div class="label">Stage Altitude</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-zone-stage-altitude" step="1"></input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="zone-section property">
|
|
<span class="label">Automatically calculate stage hour and day from location and clock.</span>
|
|
<span class="value">
|
|
<input type='checkbox' id="property-zone-stage-automatic-hour-day">
|
|
</span>
|
|
</div>
|
|
|
|
<div class="zone-section property">
|
|
<div class="label">Stage Day</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-zone-stage-day" min="0" max="365" step="1"></input>
|
|
</div>
|
|
</div>
|
|
<div class="zone-section property">
|
|
<div class="label">Stage Hour</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-zone-stage-hour" min="0" max="24" step="0.5"></input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="zone-section property">
|
|
<div class="label">Background Mode</div>
|
|
<div class="value">
|
|
<select name="SelectBackgroundMode" id="property-zone-background-mode" name="SelectBackgroundMode">
|
|
<option value='inherit'>Nothing</option>
|
|
<option value='skybox'>Skybox</option>
|
|
<option value='atmosphere'>Atmosphere</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="sub-section-header zone-section skybox-section">
|
|
<label>Skybox</label>
|
|
</div>
|
|
|
|
<div class="zone-section skybox-section property">
|
|
<div class="label">Skybox Color</div>
|
|
<div class="value">
|
|
<div class='color-picker' id="property-zone-skybox-color"></div>
|
|
<div class="input-area">R <input class="coord" type='number' id="property-zone-skybox-color-red"></input></div>
|
|
<div class="input-area">G <input class="coord" type='number' id="property-zone-skybox-color-green"></input></div>
|
|
<div class="input-area">B <input class="coord" type='number' id="property-zone-skybox-color-blue"></input></div>
|
|
</div>
|
|
</div>
|
|
<div class="zone-section skybox-section property">
|
|
<div class="label">Skybox URL</div>
|
|
<div class="value">
|
|
<input type="text" id="property-zone-skybox-url" class="url"></input>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="sub-section-header zone-section atmosphere-section">
|
|
<label>Atmosphere</label>
|
|
</div>
|
|
|
|
<div class="zone-section atmosphere-section property">
|
|
<div class="label">Atmosphere Center</div>
|
|
<div class="value">
|
|
<div class="input-area">X <br><input class="coord" type='number' id="property-zone-atmosphere-center-x"></input></div>
|
|
<div class="input-area">Y <br><input class="coord" type='number' id="property-zone-atmosphere-center-y"></input></div>
|
|
<div class="input-area">Z <br><input class="coord" type='number' id="property-zone-atmosphere-center-z"></input></div>
|
|
<div>
|
|
<input type="button" id="center-atmosphere-in-zone" value="Center to Zone">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="zone-section atmosphere-section property">
|
|
<div class="label">Atmosphere Inner Radius</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-zone-atmosphere-inner-radius" step="1"></input>
|
|
</div>
|
|
</div>
|
|
<div class="zone-section atmosphere-section property">
|
|
<div class="label">Atmosphere Outer Radius</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-zone-atmosphere-outer-radius" step="1"></input>
|
|
</div>
|
|
</div>
|
|
<div class="zone-section atmosphere-section property">
|
|
<div class="label">Atmosphere Mie Scattering</div>
|
|
<div class="value">
|
|
<input class="coord no-spin" type='number' id="property-zone-atmosphere-mie-scattering" min="0" max="0.5" step="any"></input>
|
|
</div>
|
|
</div>
|
|
<div class="zone-section atmosphere-section property">
|
|
<div class="label">Atmosphere Rayleigh Scattering</div>
|
|
<div class="value">
|
|
<input class="coord no-spin" type='number' id="property-zone-atmosphere-rayleigh-scattering" min="0" max="0.5" step="any"></input>
|
|
</div>
|
|
</div>
|
|
<div class="zone-section atmosphere-section property">
|
|
<div class="label">Atmosphere Scattering Wavelenghts</div>
|
|
<div class="value">
|
|
<div class="input-area">X <br><input class="coord no-spin" type='number' id="property-zone-atmosphere-scattering-wavelengths-x" min="0" max="1" step="any"></input></div>
|
|
<div class="input-area">Y <br><input class="coord no-spin" type='number' id="property-zone-atmosphere-scattering-wavelengths-y" min="0" max="1" step="any"></input></div>
|
|
<div class="input-area">Z <br><input class="coord no-spin" type='number' id="property-zone-atmosphere-scattering-wavelengths-z" min="0" max="1" step="any"></input></div>
|
|
</div>
|
|
</div>
|
|
<div class="zone-section atmosphere-section property" style="display:none">
|
|
<span class="label">Atmosphere Has Stars</span>
|
|
<span class="value">
|
|
<input type='checkbox' id="property-zone-atmosphere-has-stars">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|