mirror of
https://github.com/HifiExperiments/overte.git
synced 2025-05-07 15:08:35 +02:00
e9f529bf12
There is an issue when startAutomatically was set to true and animationPlaying was set to false. This would cause clients to play the animation when they connected to the entity server, even though the server was not.
1682 lines
88 KiB
HTML
1682 lines
88 KiB
HTML
<html>
|
|
<head>
|
|
<title>Properties</title>
|
|
<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;
|
|
|
|
debugPrint = function(message) {
|
|
EventBridge.emitWebEvent(
|
|
JSON.stringify({
|
|
type:"print",
|
|
message: message
|
|
})
|
|
);
|
|
};
|
|
|
|
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 elParentID = document.getElementById("property-parent-id");
|
|
var elParentJointIndex = document.getElementById("property-parent-joint-index");
|
|
|
|
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 elModelAnimationFirstFrame = document.getElementById("property-model-animation-first-frame");
|
|
var elModelAnimationLastFrame = document.getElementById("property-model-animation-last-frame");
|
|
var elModelAnimationLoop = document.getElementById("property-model-animation-loop");
|
|
var elModelAnimationHold = document.getElementById("property-model-animation-hold");
|
|
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 elParticleIsEmitting = document.getElementById("property-particle-is-emitting");
|
|
var elParticleMaxParticles = document.getElementById("property-particle-maxparticles");
|
|
var elParticleLifeSpan = document.getElementById("property-particle-lifespan");
|
|
var elParticleEmitRate = document.getElementById("property-particle-emit-rate");
|
|
var elParticleRadius = document.getElementById("property-particle-radius");
|
|
var elParticleTextures = document.getElementById("property-particle-textures");
|
|
|
|
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 elZoneKeyLightAmbientURL = document.getElementById("property-zone-key-ambient-url");
|
|
|
|
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");
|
|
|
|
var elPreviewCameraButton = document.getElementById("preview-camera-button");
|
|
|
|
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);
|
|
|
|
elParentID.value = properties.parentID;
|
|
elParentJointIndex.value = properties.parentJointIndex;
|
|
|
|
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") {
|
|
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.animation.url;
|
|
elModelAnimationPlaying.checked = properties.animation.running;
|
|
elModelAnimationFPS.value = properties.animation.fps;
|
|
elModelAnimationFrame.value = properties.animation.currentFrame;
|
|
elModelAnimationFirstFrame.value = properties.animation.firstFrame;
|
|
elModelAnimationLastFrame.value = properties.animation.lastFrame;
|
|
elModelAnimationLoop.checked = properties.animation.loop;
|
|
elModelAnimationHold.checked = properties.animation.hold;
|
|
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.keyLight.color.red + "," + properties.keyLight.color.green + "," + properties.keyLight.color.blue + ")";
|
|
elZoneKeyLightColorRed.value = properties.keyLight.color.red;
|
|
elZoneKeyLightColorGreen.value = properties.keyLight.color.green;
|
|
elZoneKeyLightColorBlue.value = properties.keyLight.color.blue;
|
|
elZoneKeyLightIntensity.value = properties.keyLight.intensity.toFixed(2);
|
|
elZoneKeyLightAmbientIntensity.value = properties.keyLight.ambientIntensity.toFixed(2);
|
|
elZoneKeyLightDirectionX.value = properties.keyLight.direction.x.toFixed(2);
|
|
elZoneKeyLightDirectionY.value = properties.keyLight.direction.y.toFixed(2);
|
|
elZoneKeyLightDirectionZ.value = properties.keyLight.direction.z.toFixed(2);
|
|
elZoneKeyLightAmbientURL.value = properties.keyLight.ambientURL;
|
|
|
|
|
|
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';
|
|
}
|
|
|
|
elParticleIsEmitting.checked = properties.isEmitting;
|
|
elParticleMaxParticles.value = properties.maxParticles;
|
|
elParticleLifeSpan.value = properties.lifespan.toFixed(2);
|
|
elParticleEmitRate.value = properties.emitRate.toFixed(1);
|
|
elParticleRadius.value = properties.particleRadius.toFixed(3);
|
|
elParticleTextures.value = properties.textures;
|
|
|
|
} 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);
|
|
|
|
elParentID.addEventListener('change', createEmitTextPropertyUpdateFunction('parentID'));
|
|
elParentJointIndex.addEventListener('change', createEmitNumberPropertyUpdateFunction('parentJointIndex'));
|
|
|
|
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'));
|
|
|
|
elParticleIsEmitting.addEventListener('change', createEmitCheckedPropertyUpdateFunction('isEmitting'));
|
|
elParticleMaxParticles.addEventListener('change', createEmitNumberPropertyUpdateFunction('maxParticles'));
|
|
elParticleLifeSpan.addEventListener('change', createEmitNumberPropertyUpdateFunction('lifespan'));
|
|
elParticleEmitRate.addEventListener('change', createEmitNumberPropertyUpdateFunction('emitRate'));
|
|
elParticleRadius.addEventListener('change', createEmitNumberPropertyUpdateFunction('particleRadius'));
|
|
elParticleTextures.addEventListener('change', createEmitTextPropertyUpdateFunction('textures'));
|
|
|
|
elModelURL.addEventListener('change', createEmitTextPropertyUpdateFunction('modelURL'));
|
|
elShapeType.addEventListener('change', createEmitTextPropertyUpdateFunction('shapeType'));
|
|
elCompoundShapeURL.addEventListener('change', createEmitTextPropertyUpdateFunction('compoundShapeURL'));
|
|
|
|
elModelAnimationURL.addEventListener('change', createEmitGroupTextPropertyUpdateFunction('animation', 'url'));
|
|
elModelAnimationPlaying.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('animation','running'));
|
|
elModelAnimationFPS.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('animation','fps'));
|
|
elModelAnimationFrame.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('animation', 'currentFrame'));
|
|
elModelAnimationFirstFrame.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('animation', 'firstFrame'));
|
|
elModelAnimationLastFrame.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('animation', 'lastFrame'));
|
|
elModelAnimationLoop.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('animation', 'loop'));
|
|
elModelAnimationHold.addEventListener('change', createEmitGroupCheckedPropertyUpdateFunction('animation', 'hold'));
|
|
|
|
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('color', rgb.r, rgb.g, rgb.b, 'keyLight');
|
|
}
|
|
});
|
|
var zoneKeyLightColorChangeFunction = createEmitGroupColorPropertyUpdateFunction('keyLight','color', elZoneKeyLightColorRed, elZoneKeyLightColorGreen, elZoneKeyLightColorBlue);
|
|
elZoneKeyLightColorRed.addEventListener('change', zoneKeyLightColorChangeFunction);
|
|
elZoneKeyLightColorGreen.addEventListener('change', zoneKeyLightColorChangeFunction);
|
|
elZoneKeyLightColorBlue.addEventListener('change', zoneKeyLightColorChangeFunction);
|
|
elZoneKeyLightIntensity.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('keyLight','intensity'));
|
|
elZoneKeyLightAmbientIntensity.addEventListener('change', createEmitGroupNumberPropertyUpdateFunction('keyLight','ambientIntensity'));
|
|
var zoneKeyLightDirectionChangeFunction = createEmitGroupVec3PropertyUpdateFunction('keyLight','direction', elZoneKeyLightDirectionX, elZoneKeyLightDirectionY, elZoneKeyLightDirectionZ);
|
|
elZoneKeyLightDirectionX.addEventListener('change', zoneKeyLightDirectionChangeFunction);
|
|
elZoneKeyLightDirectionY.addEventListener('change', zoneKeyLightDirectionChangeFunction);
|
|
elZoneKeyLightDirectionZ.addEventListener('change', zoneKeyLightDirectionChangeFunction);
|
|
elZoneKeyLightAmbientURL.addEventListener('change', createEmitGroupTextPropertyUpdateFunction('keyLight','ambientURL'));
|
|
|
|
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",
|
|
}));
|
|
});
|
|
elPreviewCameraButton.addEventListener("click", function() {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "action",
|
|
action: "previewCamera"
|
|
}));
|
|
});
|
|
|
|
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">
|
|
</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">
|
|
</div>
|
|
</div>
|
|
<div class="property">
|
|
<div class="label">Description</div>
|
|
<div class="value">
|
|
<input id="property-hyperlink-description" class="url">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="section-header">
|
|
<label>Spacial Properties</label>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Position</div>
|
|
<div class="value">
|
|
<div class="input-area ">X<input class="coord" type='number' id="property-pos-x"><div class="prop-x"></div></div>
|
|
<div class="input-area ">Y<input class="coord" type='number' id="property-pos-y"><div class="prop-y"></div></div>
|
|
<div class="input-area ">Z<input class="coord" type='number' id="property-pos-z"><div class="prop-z"></div></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">
|
|
<input type="button" id="preview-camera-button" value="Preview Camera">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<span class="label" style="float: left; margin-right: 6px">ParentID</span>
|
|
<div class="value" style="overflow: hidden;">
|
|
<input type="text" id="property-parent-id">
|
|
</div>
|
|
</div>
|
|
<div class="property">
|
|
<span class="label" style="float: left; margin-right: 6px">ParentJointIndex</span>
|
|
<div class="value" style="overflow: hidden;">
|
|
<input type="text" id="property-parent-joint-index">
|
|
</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"><div class="prop-x"></div></div>
|
|
<div class="input-area">Y <input class="coord" type='number' id="property-reg-y"><div class="prop-y"></div></div>
|
|
<div class="input-area">Z <input class="coord" type='number' id="property-reg-z"><div class="prop-z"></div></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"><div class="prop-x"></div></div>
|
|
<div class="input-area">Y <input class="coord" type='number' id="property-dim-y"><div class="prop-y"></div></div>
|
|
<div class="input-area">Z <input class="coord" type='number' id="property-dim-z"><div class="prop-z"></div></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>%
|
|
</div>
|
|
<span>
|
|
<input type="button" id="dimension-rescale-button" value="Rescale">
|
|
</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"></div>
|
|
<div class="input-area">Y <br><input class="coord" type='number' id="property-voxel-volume-size-y"></div>
|
|
<div class="input-area">Z <br><input class="coord" type='number' id="property-voxel-volume-size-z"></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">
|
|
</div>
|
|
|
|
<div class="label">Y-axis Texture URL</div>
|
|
<div class="value">
|
|
<input type="text" id="property-y-texture-url" class="url">
|
|
</div>
|
|
|
|
<div class="label">Z-axis Texture URL</div>
|
|
<div class="value">
|
|
<input type="text" id="property-z-texture-url" class="url">
|
|
</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"></div>
|
|
<div class="input-area">Yaw <input class="coord" type='number' id="property-rot-y"></div>
|
|
<div class="input-area">Roll <input class="coord" type='number' id="property-rot-z"></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"><div class="prop-x"></div></div>
|
|
<div class="input-area">Y <input class="coord" type='number' id="property-lvel-y"><div class="prop-y"></div></div>
|
|
<div class="input-area">Z <input class="coord" type='number' id="property-lvel-z"><div class="prop-z"></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="property">
|
|
<div class="label">Linear Damping</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-ldamping">
|
|
</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"></div>
|
|
<div class="input-area">Yaw <input class="coord" type='number' id="property-avel-y"></div>
|
|
<div class="input-area">Roll <input class="coord" type='number' id="property-avel-z"></div>
|
|
</div>
|
|
</div>
|
|
<div class="property">
|
|
<div class="label">Angular Damping</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-adamping">
|
|
</div>
|
|
</div>
|
|
<div class="property">
|
|
<div class="label">Restitution</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-restitution">
|
|
</div>
|
|
</div>
|
|
<div class="property">
|
|
<div class="label">Friction</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-friction">
|
|
</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"><div class="prop-x"></div></div>
|
|
<div class="input-area">Y <input class="coord" type='number' id="property-grav-y"><div class="prop-y"></div></div>
|
|
<div class="input-area">Z <input class="coord" type='number' id="property-grav-z"><div class="prop-z"></div></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"><div class="prop-x"></div></div>
|
|
<div class="input-area">Y <input class="coord" type='number' id="property-lacc-y"><div class="prop-y"></div></div>
|
|
<div class="input-area">Z <input class="coord" type='number' id="property-lacc-z"><div class="prop-z"></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Density</div>
|
|
<div>
|
|
<input type='number' id="property-density">
|
|
</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"></div>
|
|
<div class="input-area">G <input class="coord" type='number' id="property-color-green"></div>
|
|
<div class="input-area">B <input class="coord" type='number' id="property-color-blue"></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">
|
|
</span>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<span class="label">Collisions Will Move</span>
|
|
<span class="value">
|
|
<input type='checkbox' id="property-collisions-will-move">
|
|
</span>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Collision Sound URL</div>
|
|
<div class="value">
|
|
<input id="property-collision-sound-url" class="url">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Lifetime</div>
|
|
<div class="value">
|
|
<input type='number' id="property-lifetime">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="property">
|
|
<div class="label">Script URL
|
|
<input type="hidden" id="property-script-timestamp" class="value">
|
|
<input type="button" id="reload-script-button" value="Reload">
|
|
</div>
|
|
<div class="value">
|
|
<input id="property-script-url" class="url">
|
|
</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">
|
|
</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">
|
|
<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">
|
|
</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">
|
|
</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">
|
|
</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">
|
|
</div>
|
|
</div>
|
|
<div class="model-section property">
|
|
<div class="label">Animation First Frame</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-model-animation-first-frame">
|
|
</div>
|
|
</div>
|
|
<div class="model-section property">
|
|
<div class="label">Animation Last Frame</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-model-animation-last-frame">
|
|
</div>
|
|
</div>
|
|
<div class="model-section property">
|
|
<span class="label">Animation Loop</span>
|
|
<span class="value">
|
|
<input type='checkbox' id="property-model-animation-loop">
|
|
</span>
|
|
</div>
|
|
<div class="model-section property">
|
|
<span class="label">Animation Hold</span>
|
|
<span class="value">
|
|
<input type='checkbox' id="property-model-animation-hold">
|
|
</span>
|
|
</div>
|
|
<div class="model-section property">
|
|
<div class="label">Textures</div>
|
|
<div class="value">
|
|
<textarea id="property-model-textures" value=''></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=''></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">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="section-header particle-section">
|
|
<label>Particle</label>
|
|
</div>
|
|
|
|
<div class="particle-section property">
|
|
<span class="label">Is Emitting</span>
|
|
<span class="value">
|
|
<input type='checkbox' id="property-particle-is-emitting">
|
|
</span>
|
|
</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">
|
|
</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">
|
|
</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">
|
|
</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">
|
|
</div>
|
|
</div>
|
|
<div class="particle-section property">
|
|
<div class="label">Textures</div>
|
|
<div class="value">
|
|
<textarea id="property-particle-textures" value=''></textarea>
|
|
</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">
|
|
</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">
|
|
</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"></div>
|
|
<div class="input-area">G <input class="coord" type='number' id="property-text-text-color-green"></div>
|
|
<div class="input-area">B <input class="coord" type='number' id="property-text-text-color-blue"></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"></div>
|
|
<div class="input-area">G <input class="coord" type='number' id="property-text-background-color-green"></div>
|
|
<div class="input-area">B <input class="coord" type='number' id="property-text-background-color-blue"></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"></div>
|
|
<div class="input-area">G <input class="coord" type='number' id="property-light-color-green"></div>
|
|
<div class="input-area">B <input class="coord" type='number' id="property-light-color-blue"></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">
|
|
</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">
|
|
</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">
|
|
</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="sub-section-header zone-section keyLight-section">
|
|
<label>KeyLight</label>
|
|
</div>
|
|
|
|
<div class="zone-section keyLight-section property">
|
|
<div class="label">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"></div>
|
|
<div class="input-area">G <input class="coord" type='number' id="property-zone-key-light-color-green" min="0" max="255" step="1"></div>
|
|
<div class="input-area">B <input class="coord" type='number' id="property-zone-key-light-color-blue" min="0" max="255" step="1"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="zone-section keyLight-section property">
|
|
<div class="label">Light Intensity</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-zone-key-intensity" min="0" max="10" step="0.1">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="zone-section keyLight-section property">
|
|
<div class="label">Light Direction</div>
|
|
<div class="value">
|
|
<div class="input-area">Pitch <input class="coord" type='number' id="property-zone-key-light-direction-x"></div>
|
|
<div class="input-area">Yaw <input class="coord" type='number' id="property-zone-key-light-direction-y"></div>
|
|
<div class="input-area">Roll <input class="coord" type='number' id="property-zone-key-light-direction-z"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="zone-section keyLight-section property">
|
|
<div class="label">Ambient Intensity</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-zone-key-ambient-intensity" min="0" max="10" step="0.1">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="zone-section keyLight-section property">
|
|
<div class="label">Ambient URL</div>
|
|
<div class="value">
|
|
<input type="text" id="property-zone-key-ambient-url" class="url">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sub-section-header zone-section stage-section">
|
|
<label>Stage</label>
|
|
</div>
|
|
|
|
<div class="zone-section stage-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">
|
|
</div>
|
|
</div>
|
|
<div class="zone-section stage-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">
|
|
</div>
|
|
</div>
|
|
<div class="zone-section stage-section property">
|
|
<div class="label">Stage Altitude</div>
|
|
<div class="value">
|
|
<input class="coord" type='number' id="property-zone-stage-altitude" step="1">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="zone-section stage-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 stage-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">
|
|
</div>
|
|
</div>
|
|
<div class="zone-section stage-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">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sub-section-header zone-section background-section">
|
|
<label>Background</label>
|
|
</div>
|
|
|
|
<div class="zone-section background-section property">
|
|
<div class="label">Background Mode</div>
|
|
<div class="value">
|
|
<select name="SelectBackgroundMode" id="property-zone-background-mode">
|
|
<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"></div>
|
|
<div class="input-area">G <input class="coord" type='number' id="property-zone-skybox-color-green"></div>
|
|
<div class="input-area">B <input class="coord" type='number' id="property-zone-skybox-color-blue"></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">
|
|
</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"></div>
|
|
<div class="input-area">Y <br><input class="coord" type='number' id="property-zone-atmosphere-center-y"></div>
|
|
<div class="input-area">Z <br><input class="coord" type='number' id="property-zone-atmosphere-center-z"></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">
|
|
</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">
|
|
</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">
|
|
</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">
|
|
</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"></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"></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"></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>
|