Ubujira
/
skinview3d
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
skinview3d/examples/index.html

433 lines
14 KiB
HTML
Raw Normal View History

Revert "Merge pull request #59 from bs-community/add-storybook" This reverts commit c65b2cd25ce356447da08733e27017f5aeeac502, reversing changes made to 990deb16dbce9dc0fefbc278d2ddb3d2c058a4d3.
2020-08-17 14:35:05 +02:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>skinview3d</title>
<style>
body {
use new demo page from: ffe04d879e696e201528640f31738e6c99774da2
2020-08-17 14:54:28 +02:00
font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
deploy to gh-pages
2020-08-17 16:17:21 +02:00
width: max-content;
use new demo page from: ffe04d879e696e201528640f31738e6c99774da2
2020-08-17 14:54:28 +02:00
}
h1 {
font-size: 1.25em;
}
h2 {
font-size: 1em;
}
h1,
h2 {
margin-bottom: 0;
}
input[type="number"] {
width: 60px;
}
.control {
display: inline-block;
margin-right: 10px;
}
.control-section {
margin-left: 10px;
}
.control-section>h1,
.control-section>h2 {
margin-left: -10px;
}
table {
border-collapse: collapse;
}
table td,
table th {
border: 1px black dashed;
text-align: left;
width: 50px;
}
thead th {
border-top: unset;
}
tbody tr:last-child td,
tbody tr:last-child th {
border-bottom: unset;
}
table th:first-child,
table td:first-child {
border-left: unset;
}
table th:last-child,
table td:last-child {
border-right: unset;
}
table td input[type="checkbox"] {
vertical-align: middle;
Revert "Merge pull request #59 from bs-community/add-storybook" This reverts commit c65b2cd25ce356447da08733e27017f5aeeac502, reversing changes made to 990deb16dbce9dc0fefbc278d2ddb3d2c058a4d3.
2020-08-17 14:35:05 +02:00
margin: 0;
use new demo page from: ffe04d879e696e201528640f31738e6c99774da2
2020-08-17 14:54:28 +02:00
width: 100%;
Revert "Merge pull request #59 from bs-community/add-storybook" This reverts commit c65b2cd25ce356447da08733e27017f5aeeac502, reversing changes made to 990deb16dbce9dc0fefbc278d2ddb3d2c058a4d3.
2020-08-17 14:35:05 +02:00
}
deploy to gh-pages
2020-08-17 16:17:21 +02:00
footer {
margin-top: 10px;
padding-top: 10px;
border-top: 1px grey solid;
}
Revert "Merge pull request #59 from bs-community/add-storybook" This reverts commit c65b2cd25ce356447da08733e27017f5aeeac502, reversing changes made to 990deb16dbce9dc0fefbc278d2ddb3d2c058a4d3.
2020-08-17 14:35:05 +02:00
</style>
</head>
<body>
<div id="skin_container"></div>
deploy to gh-pages
2020-08-17 16:17:21 +02:00
<div class="controls">
use new demo page from: ffe04d879e696e201528640f31738e6c99774da2
2020-08-17 14:54:28 +02:00
<button id="reset_all" type="button" class="control">Reset All</button>
<div class="control-section">
<h1>Canvas Size</h1>
<div class="control">
<label for="canvas_width">Width:</label>
<input id="canvas_width" type="number" value="300">
</div>
<div class="control">
<label for="canvas_height">Height:</label>
<input id="canvas_height" type="number" value="300">
</div>
</div>
Revert "Merge pull request #59 from bs-community/add-storybook" This reverts commit c65b2cd25ce356447da08733e27017f5aeeac502, reversing changes made to 990deb16dbce9dc0fefbc278d2ddb3d2c058a4d3.
2020-08-17 14:35:05 +02:00
use new demo page from: ffe04d879e696e201528640f31738e6c99774da2
2020-08-17 14:54:28 +02:00
<div class="control-section">
<h1>Animation</h1>
<div class="control">
<label for="global_animation_speed">Global Speed:</label>
<input id="global_animation_speed" type="number" value="1" step="0.1">
</div>
<button id="animation_pause_resume" type="button" class="control">Pause / Resume</button>
<div>
<h2>Rotate</h2>
<div class="control">
<input id="rotate_animation" type="checkbox">
<label for="rotate_animation">Enable</label>
</div>
<div class="control">
<label for="rotate_animation_speed">Speed:</label>
<input id="rotate_animation_speed" type="number" value="1" step="0.1">
</div>
</div>
<div>
<h2>Walk / Run</h2>
<div class="control">
<input type="radio" id="primary_animation_none" name="primary_animation" value="" checked>
<label for="primary_animation_none">None</label>
<input type="radio" id="primary_animation_walk" name="primary_animation" value="walk">
<label for="primary_animation_walk">Walk</label>
<input type="radio" id="primary_animation_run" name="primary_animation" value="run">
<label for="primary_animation_run">Run</label>
</div>
<div class="control">
<label for="primary_animation_speed">Speed:</label>
<input id="primary_animation_speed" type="number" value="1" step="0.1">
</div>
</div>
</div>
<div class="control-section">
<h1>Mouse Control</h1>
<div class="control">
<input type="checkbox" id="control_rotate" checked>
<label for="control_rotate">Enable Rotate</label>
<input type="checkbox" id="control_zoom" checked>
<label for="control_zoom">Enable Zoom</label>
<input type="checkbox" id="control_pan">
<label for="control_pan">Enable Pan</label>
</div>
</div>
<div class="control-section">
<h1>Skin Layers</h1>
<table id="layers_table" class="control">
<!-- table contents are generated using javascript -->
</table>
</div>
<div class="control-section">
<h1>Textures</h1>
<div>
<div class="control">
<label for="skin_url">Skin URL:</label>
<input id="skin_url" type="text" value="img/1_8_texturemap_redux.png" placeholder="none"
list="default_skins">
<datalist id="default_skins">
<option value="img/1_8_texturemap_redux.png">
<option value="img/Hacksore.png">
<option value="img/haka.png">
<option value="img/hatsune_miku.png">
<option value="img/ironman_hd.png">
<option value="img/sethbling.png">
</datalist>
<input id="skin_url_upload" type="file" accept="image/*" style="display: none;">
<button type="button" class="control"
onclick="document.getElementById('skin_url_upload').click();">Browse...</button>
</div>
<div class="control">
<label for="skin_model">Model:</label>
<select id="skin_model" value="auto-detect">
<option value="auto-detect">Auto detect</option>
<option value="default">Default</option>
<option value="slim">Slim</option>
</select>
</div>
</div>
<div>
<div class="control">
<label for="cape_url">Cape URL:</label>
<input id="cape_url" type="text" value="" placeholder="none" list="default_capes">
<datalist id="default_capes">
<option value="">
<option value="img/cape.png">
<option value="img/mojang_cape.png">
<option value="img/hd_cape.png">
</datalist>
<input id="cape_url_upload" type="file" accept="image/*" style="display: none;">
<button type="button" class="control"
onclick="document.getElementById('cape_url_upload').click();">Browse...</button>
</div>
</div>
</div>
</div>
deploy to gh-pages
2020-08-17 16:17:21 +02:00
<footer>
<div>
GitHub: <a href="https://github.com/bs-community/skinview3d">bs-community/skinview3d</a>
</div>
<!--%%deploy_only%%
<div>
Built from
commit <a href="https://github.com/bs-community/skinview3d/commit/{{build_commit}}">{{build_commit}}</a>
at <time datetime="{{build_time}}">{{build_time}}</time>
</div>
-->
</footer>
use new demo page from: ffe04d879e696e201528640f31738e6c99774da2
2020-08-17 14:54:28 +02:00
<script src="../bundles/skinview3d.bundle.js"></script>
Revert "Merge pull request #59 from bs-community/add-storybook" This reverts commit c65b2cd25ce356447da08733e27017f5aeeac502, reversing changes made to 990deb16dbce9dc0fefbc278d2ddb3d2c058a4d3.
2020-08-17 14:35:05 +02:00
<script>
use new demo page from: ffe04d879e696e201528640f31738e6c99774da2
2020-08-17 14:54:28 +02:00
const skinParts = ["head", "body", "rightArm", "leftArm", "rightLeg", "leftLeg"];
const skinLayers = ["innerLayer", "outerLayer"];
const availableAnimations = {
walk: skinview3d.WalkingAnimation,
run: skinview3d.RunningAnimation
};
Revert "Merge pull request #59 from bs-community/add-storybook" This reverts commit c65b2cd25ce356447da08733e27017f5aeeac502, reversing changes made to 990deb16dbce9dc0fefbc278d2ddb3d2c058a4d3.
2020-08-17 14:35:05 +02:00
use new demo page from: ffe04d879e696e201528640f31738e6c99774da2
2020-08-17 14:54:28 +02:00
let skinViewer;
let oribitControl;
let rotateAnimation;
let primaryAnimation;
Revert "Merge pull request #59 from bs-community/add-storybook" This reverts commit c65b2cd25ce356447da08733e27017f5aeeac502, reversing changes made to 990deb16dbce9dc0fefbc278d2ddb3d2c058a4d3.
2020-08-17 14:35:05 +02:00
use new demo page from: ffe04d879e696e201528640f31738e6c99774da2
2020-08-17 14:54:28 +02:00
function reloadSkin() {
const input = document.getElementById("skin_url");
const url = input.value;
if (url === "") {
skinViewer.loadSkin(null);
input.setCustomValidity("");
} else {
skinViewer.loadSkin(url, document.getElementById("skin_model").value)
.then(() => input.setCustomValidity(""))
.catch(e => {
input.setCustomValidity("Image can't be loaded.");
console.error(e);
});
}
}
function reloadCape() {
const input = document.getElementById("cape_url");
const url = input.value;
if (url === "") {
skinViewer.loadCape(null);
input.setCustomValidity("");
} else {
skinViewer.loadCape(url)
.then(() => input.setCustomValidity(""))
.catch(e => {
input.setCustomValidity("Image can't be loaded.");
console.error(e);
});
}
}
Revert "Merge pull request #59 from bs-community/add-storybook" This reverts commit c65b2cd25ce356447da08733e27017f5aeeac502, reversing changes made to 990deb16dbce9dc0fefbc278d2ddb3d2c058a4d3.
2020-08-17 14:35:05 +02:00
use new demo page from: ffe04d879e696e201528640f31738e6c99774da2
2020-08-17 14:54:28 +02:00
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 of skinParts) {
const cellHead = document.createElement("th");
cellHead.innerText = part;
rowHead.appendChild(cellHead);
}
const tbody = document.createElement("tbody");
table.appendChild(tbody);
for (const layer of skinLayers) {
const row = document.createElement("tr");
tbody.appendChild(row);
const cellLayer = document.createElement("th");
cellLayer.innerText = layer;
row.appendChild(cellLayer);
for (const part of 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() {
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("global_animation_speed").addEventListener("change", e => skinViewer.animations.speed = e.target.value);
document.getElementById("animation_pause_resume").addEventListener("click", () => skinViewer.animations.paused = !skinViewer.animations.paused);
document.getElementById("rotate_animation").addEventListener("change", e => {
if (e.target.checked && rotateAnimation === null) {
rotateAnimation = skinViewer.animations.add(skinview3d.RotatingAnimation);
rotateAnimation.speed = document.getElementById("rotate_animation_speed").value;
} else if (!e.target.checked && rotateAnimation !== null) {
rotateAnimation.resetAndRemove();
rotateAnimation = null;
}
});
document.getElementById("rotate_animation_speed").addEventListener("change", e => {
if (rotateAnimation !== null) {
rotateAnimation.speed = e.target.value;
}
});
for (const el of document.querySelectorAll('input[type="radio"][name="primary_animation"]')) {
el.addEventListener("change", e => {
if (primaryAnimation !== null) {
primaryAnimation.resetAndRemove();
primaryAnimation = null;
}
if (e.target.value !== "") {
primaryAnimation = skinViewer.animations.add(availableAnimations[e.target.value]);
primaryAnimation.speed = document.getElementById("primary_animation_speed").value;
}
});
}
document.getElementById("primary_animation_speed").addEventListener("change", e => {
if (primaryAnimation !== null) {
primaryAnimation.speed = e.target.value;
}
});
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_pan").addEventListener("change", e => oribitControl.enablePan = e.target.checked);
for (const part of skinParts) {
for (const layer of skinLayers) {
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);
}
}
const skinReader = new FileReader();
skinReader.addEventListener("load", e => {
document.getElementById("skin_url").value = skinReader.result;
reloadSkin();
});
document.getElementById("skin_url_upload").addEventListener("change", e => {
const file = e.target.files[0];
if (file !== undefined) {
skinReader.readAsDataURL(file);
}
});
const capeReader = new FileReader();
capeReader.addEventListener("load", e => {
document.getElementById("cape_url").value = capeReader.result;
reloadCape();
});
document.getElementById("cape_url_upload").addEventListener("change", e => {
const file = e.target.files[0];
if (file !== undefined) {
capeReader.readAsDataURL(file);
}
});
document.getElementById("skin_url").addEventListener("change", () => reloadSkin());
document.getElementById("skin_model").addEventListener("change", () => reloadSkin());
document.getElementById("cape_url").addEventListener("change", () => reloadCape());
document.getElementById("reset_all").addEventListener("click", () => {
skinViewer.dispose();
initializeViewer();
});
}
function initializeViewer() {
support FXAA, close #71
2020-08-23 19:16:37 +02:00
skinViewer = new skinview3d.FXAASkinViewer(document.getElementById("skin_container"), {
examples: use lightblue background
2020-08-23 17:29:40 +02:00
alpha: false
});
skinViewer.renderer.setClearColor(0x5a76f3);
use new demo page from: ffe04d879e696e201528640f31738e6c99774da2
2020-08-17 14:54:28 +02:00
oribitControl = skinview3d.createOrbitControls(skinViewer);
rotateAnimation = null;
primaryAnimation = null;
skinViewer.width = document.getElementById("canvas_width").value;
skinViewer.height = document.getElementById("canvas_height").value;
skinViewer.animations.speed = document.getElementById("global_animation_speed").value;
if (document.getElementById("rotate_animation").checked) {
rotateAnimation = skinViewer.animations.add(skinview3d.RotatingAnimation);
rotateAnimation.speed = document.getElementById("rotate_animation_speed").value;
}
const primaryAnimationName = document.querySelector('input[type="radio"][name="primary_animation"]:checked').value;
if (primaryAnimationName !== "") {
primaryAnimation = skinViewer.animations.add(availableAnimations[primaryAnimationName]);
primaryAnimation.speed = document.getElementById("primary_animation_speed").value;
}
oribitControl.enableRotate = document.getElementById("control_rotate").checked;
oribitControl.enableZoom = document.getElementById("control_zoom").checked;
oribitControl.enablePan = document.getElementById("control_pan").checked;
for (const part of skinParts) {
for (const layer of skinLayers) {
skinViewer.playerObject.skin[part][layer].visible =
document.querySelector(`#layers_table input[type="checkbox"][data-part="${part}"][data-layer="${layer}"]`).checked;
}
}
reloadSkin();
reloadCape();
}
initializeLayersTable();
initializeControls();
initializeViewer();
</script>
Revert "Merge pull request #59 from bs-community/add-storybook" This reverts commit c65b2cd25ce356447da08733e27017f5aeeac502, reversing changes made to 990deb16dbce9dc0fefbc278d2ddb3d2c058a4d3.
2020-08-17 14:35:05 +02:00
</body>
example: add fps panel
2020-08-23 20:26:33 +02:00
<script type="module" src="https://unpkg.com/stats.js@0.17.0/src/Stats.js" integrity="sha384-W71K+d2HbqXqQWSj3Vj4RDsIVvIV7lR8O6RArKAiqB39ntwLci0W08qOn4Z1n8sM" crossorigin="anonymous" async></script>
<script type="module" async>
import Stats from "https://unpkg.com/stats.js@0.17.0/src/Stats.js";
const stats = new Stats();
stats.dom.style.left = "";
stats.dom.style.right = "0";
document.body.appendChild(stats.dom);
function loop() {
stats.update();
requestAnimationFrame(loop)
}
requestAnimationFrame(loop);
</script>
Revert "Merge pull request #59 from bs-community/add-storybook" This reverts commit c65b2cd25ce356447da08733e27017f5aeeac502, reversing changes made to 990deb16dbce9dc0fefbc278d2ddb3d2c058a4d3.
2020-08-17 14:35:05 +02:00
</html>