Ubujira
/
skinview3d
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

examples: use static layers_table 

so its contents are preserved after refresh
This commit is contained in:
Haowei Wen 2020-09-12 17:32:50 +08:00
parent ae48acfff7
commit 5931532f9b
No known key found for this signature in database
GPG Key ID: 5BC167F73EA558E4
1 changed files with 37 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
examples/index.html
View File

@ -150,7 +150,37 @@
<div class="control-section"> <div class="control-section">
<h1>Skin Layers</h1> <h1>Skin Layers</h1>
<table id="layers_table"> <table id="layers_table">
<!-- table contents are generated using javascript --> <thead>
<tr>
<th></th>
<th>head</th>
<th>body</th>
<th>right arm</th>
<th>left arm</th>
<th>right leg</th>
<th>left leg</th>
</tr>
</thead>
<tbody>
<tr>
<th>inner</th>
<td><input type="checkbox" data-layer="innerLayer" data-part="head" checked></td>
<td><input type="checkbox" data-layer="innerLayer" data-part="body" checked></td>
<td><input type="checkbox" data-layer="innerLayer" data-part="rightArm" checked></td>
<td><input type="checkbox" data-layer="innerLayer" data-part="leftArm" checked></td>
<td><input type="checkbox" data-layer="innerLayer" data-part="rightLeg" checked></td>
<td><input type="checkbox" data-layer="innerLayer" data-part="leftLeg" checked></td>
</tr>
<tr>
<th>outer</th>
<td><input type="checkbox" data-layer="outerLayer" data-part="head" checked></td>
<td><input type="checkbox" data-layer="outerLayer" data-part="body" checked></td>
<td><input type="checkbox" data-layer="outerLayer" data-part="rightArm" checked></td>
<td><input type="checkbox" data-layer="outerLayer" data-part="leftArm" checked></td>
<td><input type="checkbox" data-layer="outerLayer" data-part="rightLeg" checked></td>
<td><input type="checkbox" data-layer="outerLayer" data-part="leftLeg" checked></td>
</tr>
</tbody>
</table> </table>
</div> </div>
@ -219,18 +249,8 @@
<script src="../bundles/skinview3d.bundle.js"></script> <script src="../bundles/skinview3d.bundle.js"></script>
<script> <script>
const skinParts = { const skinParts = ["head", "body", "rightArm", "leftArm", "rightLeg", "leftLeg"];
head: "head", const skinLayers = ["innerLayer", "outerLayer"];
body: "body",
rightArm: "right arm",
leftArm: "left arm",
rightLeg: "right leg",
leftLeg: "left leg"
};
const skinLayers = {
innerLayer: "inner",
outerLayer: "outer"
};
const availableAnimations = { const availableAnimations = {
walk: skinview3d.WalkingAnimation, walk: skinview3d.WalkingAnimation,
run: skinview3d.RunningAnimation run: skinview3d.RunningAnimation
@ -273,39 +293,6 @@
} }
} }
function initializeLayersTable() {
const table = document.getElementById("layers_table");
const thead = document.createElement("thead");
table.appendChild(thead);
const rowHead = document.createElement("tr");
rowHead.appendChild(document.createElement("th"));
thead.appendChild(rowHead);
for (const [part, partName] of Object.entries(skinParts)) {
const cellHead = document.createElement("th");
cellHead.innerText = partName;
rowHead.appendChild(cellHead);
}
const tbody = document.createElement("tbody");
table.appendChild(tbody);
for (const [layer, layerName] of Object.entries(skinLayers)) {
const row = document.createElement("tr");
tbody.appendChild(row);
const cellLayer = document.createElement("th");
cellLayer.innerText = layerName;
row.appendChild(cellLayer);
for (const part of Object.keys(skinParts)) {
const cell = document.createElement("td");
row.appendChild(cell);
const checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.dataset.layer = layer;
checkbox.dataset.part = part;
checkbox.checked = true;
cell.appendChild(checkbox);
}
}
}
function initializeControls() { function initializeControls() {
document.getElementById("canvas_width").addEventListener("change", e => skinViewer.width = e.target.value); document.getElementById("canvas_width").addEventListener("change", e => skinViewer.width = e.target.value);
document.getElementById("canvas_height").addEventListener("change", e => skinViewer.height = e.target.value); document.getElementById("canvas_height").addEventListener("change", e => skinViewer.height = e.target.value);
@ -345,8 +332,8 @@
document.getElementById("control_rotate").addEventListener("change", e => oribitControl.enableRotate = e.target.checked); document.getElementById("control_rotate").addEventListener("change", e => oribitControl.enableRotate = e.target.checked);
document.getElementById("control_zoom").addEventListener("change", e => oribitControl.enableZoom = e.target.checked); document.getElementById("control_zoom").addEventListener("change", e => oribitControl.enableZoom = e.target.checked);
document.getElementById("control_pan").addEventListener("change", e => oribitControl.enablePan = e.target.checked); document.getElementById("control_pan").addEventListener("change", e => oribitControl.enablePan = e.target.checked);
for (const part of Object.keys(skinParts)) { for (const part of skinParts) {
for (const layer of Object.keys(skinLayers)) { for (const layer of skinLayers) {
document.querySelector(`#layers_table input[type="checkbox"][data-part="${part}"][data-layer="${layer}"]`) document.querySelector(`#layers_table input[type="checkbox"][data-part="${part}"][data-layer="${layer}"]`)
.addEventListener("change", e => skinViewer.playerObject.skin[part][layer].visible = e.target.checked); .addEventListener("change", e => skinViewer.playerObject.skin[part][layer].visible = e.target.checked);
} }
@ -407,8 +394,8 @@
oribitControl.enableRotate = document.getElementById("control_rotate").checked; oribitControl.enableRotate = document.getElementById("control_rotate").checked;
oribitControl.enableZoom = document.getElementById("control_zoom").checked; oribitControl.enableZoom = document.getElementById("control_zoom").checked;
oribitControl.enablePan = document.getElementById("control_pan").checked; oribitControl.enablePan = document.getElementById("control_pan").checked;
for (const part of Object.keys(skinParts)) { for (const part of skinParts) {
for (const layer of Object.keys(skinLayers)) { for (const layer of skinLayers) {
skinViewer.playerObject.skin[part][layer].visible = skinViewer.playerObject.skin[part][layer].visible =
document.querySelector(`#layers_table input[type="checkbox"][data-part="${part}"][data-layer="${layer}"]`).checked; document.querySelector(`#layers_table input[type="checkbox"][data-part="${part}"][data-layer="${layer}"]`).checked;
} }
@ -417,7 +404,6 @@
reloadCape(); reloadCape();
} }
initializeLayersTable();
initializeControls(); initializeControls();
initializeViewer(); initializeViewer();
</script> </script>