2020-08-17 14:35:05 +02:00
|
|
|
<!DOCTYPE html>
|
2020-09-12 11:51:18 +02:00
|
|
|
<html lang="en">
|
2020-08-17 14:35:05 +02:00
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
2020-08-23 22:32:43 +02:00
|
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
2020-08-23 22:38:54 +02:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
2020-08-17 14:35:05 +02:00
|
|
|
<title>skinview3d</title>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
2020-08-17 14:54:28 +02:00
|
|
|
font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
|
2020-08-23 22:32:43 +02:00
|
|
|
margin: 5px;
|
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"] {
|
2020-08-23 22:32:43 +02:00
|
|
|
max-width: 60px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input[type="text"] {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
max-width: 250px;
|
|
|
|
|
width: calc(100% - 100px);
|
2020-08-17 14:54:28 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.control {
|
2020-08-23 22:32:43 +02:00
|
|
|
display: inline;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.control + .control {
|
|
|
|
|
margin-left: 10px;
|
2020-08-17 14:54:28 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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;
|
2020-08-17 14:35:05 +02:00
|
|
|
margin: 0;
|
2020-08-17 14:54:28 +02:00
|
|
|
width: 100%;
|
2020-08-17 14:35:05 +02:00
|
|
|
}
|
2020-08-17 16:17:21 +02:00
|
|
|
|
|
|
|
|
footer {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
padding-top: 10px;
|
|
|
|
|
border-top: 1px grey solid;
|
|
|
|
|
}
|
2020-08-23 22:32:43 +02:00
|
|
|
|
|
|
|
|
label {
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
2020-09-09 19:39:19 +02:00
|
|
|
|
|
|
|
|
.control-section ul {
|
|
|
|
|
margin-top: 0;
|
|
|
|
|
padding-left: 20px;
|
|
|
|
|
}
|
2020-08-17 14:35:05 +02:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
2020-09-06 12:27:18 +02:00
|
|
|
<canvas id="skin_container"></canvas>
|
2020-08-17 14:35:05 +02:00
|
|
|
|
2020-08-17 16:17:21 +02:00
|
|
|
<div class="controls">
|
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>
|
2020-08-23 22:32:43 +02:00
|
|
|
<label class="control">Width: <input id="canvas_width" type="number" value="300"></label>
|
|
|
|
|
<label class="control">Height: <input id="canvas_height" type="number" value="300"></label>
|
2020-08-17 14:54:28 +02:00
|
|
|
</div>
|
2020-08-17 14:35:05 +02:00
|
|
|
|
2020-08-17 14:54:28 +02:00
|
|
|
<div class="control-section">
|
|
|
|
|
<h1>Animation</h1>
|
2020-08-23 22:32:43 +02:00
|
|
|
<label class="control">Global Speed: <input id="global_animation_speed" type="number" value="1" step="0.1"></label>
|
2020-08-17 14:54:28 +02:00
|
|
|
<button id="animation_pause_resume" type="button" class="control">Pause / Resume</button>
|
|
|
|
|
<div>
|
|
|
|
|
<h2>Rotate</h2>
|
2020-08-23 22:32:43 +02:00
|
|
|
<label class="control"><input id="rotate_animation" type="checkbox"> Enable</label>
|
|
|
|
|
<label class="control">Speed: <input id="rotate_animation_speed" type="number" value="1" step="0.1"></label>
|
2020-08-17 14:54:28 +02:00
|
|
|
</div>
|
|
|
|
|
<div>
|
2020-10-10 11:32:54 +02:00
|
|
|
<h2>Walk / Run / Fly</h2>
|
2020-08-17 14:54:28 +02:00
|
|
|
<div class="control">
|
2020-08-23 22:32:43 +02:00
|
|
|
<label><input type="radio" id="primary_animation_none" name="primary_animation" value="" checked> None</label>
|
|
|
|
|
<label><input type="radio" id="primary_animation_walk" name="primary_animation" value="walk"> Walk</label>
|
|
|
|
|
<label><input type="radio" id="primary_animation_run" name="primary_animation" value="run"> Run</label>
|
2020-10-10 11:32:54 +02:00
|
|
|
<label><input type="radio" id="primary_animation_fly" name="primary_animation" value="fly"> Fly</label>
|
2020-08-17 14:54:28 +02:00
|
|
|
</div>
|
2020-08-23 22:32:43 +02:00
|
|
|
<label class="control">Speed: <input id="primary_animation_speed" type="number" value="1" step="0.1"></label>
|
2020-08-17 14:54:28 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="control-section">
|
|
|
|
|
<h1>Mouse Control</h1>
|
|
|
|
|
<div class="control">
|
2020-08-23 22:32:43 +02:00
|
|
|
<label><input type="checkbox" id="control_rotate" checked> Enable Rotate</label>
|
|
|
|
|
<label><input type="checkbox" id="control_zoom" checked> Enable Zoom</label>
|
|
|
|
|
<label><input type="checkbox" id="control_pan"> Enable Pan</label>
|
2020-08-17 14:54:28 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="control-section">
|
|
|
|
|
<h1>Skin Layers</h1>
|
2020-08-23 22:32:43 +02:00
|
|
|
<table id="layers_table">
|
2020-09-12 11:32:50 +02:00
|
|
|
<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>
|
2020-08-17 14:54:28 +02:00
|
|
|
</table>
|
2020-10-10 04:22:17 +02:00
|
|
|
<div>
|
|
|
|
|
<h2>Back Equipment</h2>
|
|
|
|
|
<div class="control">
|
|
|
|
|
<label><input type="radio" id="back_equipment_cape" name="back_equipment" value="cape" checked> Cape</label>
|
|
|
|
|
<label><input type="radio" id="back_equipment_elytra" name="back_equipment" value="elytra"> Elytra</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2020-08-17 14:54:28 +02:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="control-section">
|
|
|
|
|
<h1>Textures</h1>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="control">
|
2020-08-23 22:32:43 +02:00
|
|
|
<label>Skin URL: <input id="skin_url" type="text" value="img/1_8_texturemap_redux.png" placeholder="none" list="default_skins"></label>
|
2020-08-17 14:54:28 +02:00
|
|
|
<datalist id="default_skins">
|
|
|
|
|
<option value="img/1_8_texturemap_redux.png">
|
2020-08-31 01:58:11 +02:00
|
|
|
<option value="img/hacksore.png">
|
2020-08-17 14:54:28 +02:00
|
|
|
<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>
|
2020-08-23 22:32:43 +02:00
|
|
|
<label class="control">Model:
|
2020-09-12 11:51:18 +02:00
|
|
|
<select id="skin_model">
|
|
|
|
|
<option value="auto-detect" selected>Auto detect</option>
|
2020-08-17 14:54:28 +02:00
|
|
|
<option value="default">Default</option>
|
|
|
|
|
<option value="slim">Slim</option>
|
|
|
|
|
</select>
|
2020-08-23 22:32:43 +02:00
|
|
|
</label>
|
2020-08-17 14:54:28 +02:00
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="control">
|
2020-08-23 22:32:43 +02:00
|
|
|
<label>Cape URL: <input id="cape_url" type="text" value="" placeholder="none" list="default_capes"></label>
|
2020-08-17 14:54:28 +02:00
|
|
|
<datalist id="default_capes">
|
|
|
|
|
<option value="">
|
|
|
|
|
<option value="img/mojang_cape.png">
|
2020-08-31 02:01:21 +02:00
|
|
|
<option value="img/legacy_cape.png">
|
2020-08-17 14:54:28 +02:00
|
|
|
<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>
|
|
|
|
|
|
2020-09-09 19:39:19 +02:00
|
|
|
<div class="control-section">
|
|
|
|
|
<h1>Other examples</h1>
|
|
|
|
|
<ul>
|
|
|
|
|
<li><a href="offscreen-render.html">offscreen-render</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
|
2020-08-17 14:54:28 +02:00
|
|
|
</div>
|
|
|
|
|
|
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>
|
|
|
|
|
|
2020-08-17 14:54:28 +02:00
|
|
|
<script src="../bundles/skinview3d.bundle.js"></script>
|
2020-08-17 14:35:05 +02:00
|
|
|
<script>
|
2020-09-12 11:32:50 +02:00
|
|
|
const skinParts = ["head", "body", "rightArm", "leftArm", "rightLeg", "leftLeg"];
|
|
|
|
|
const skinLayers = ["innerLayer", "outerLayer"];
|
2020-08-17 14:54:28 +02:00
|
|
|
const availableAnimations = {
|
|
|
|
|
walk: skinview3d.WalkingAnimation,
|
2020-10-10 11:32:54 +02:00
|
|
|
run: skinview3d.RunningAnimation,
|
|
|
|
|
fly: skinview3d.FlyingAnimation
|
2020-08-17 14:54:28 +02:00
|
|
|
};
|
2020-08-17 14:35:05 +02:00
|
|
|
|
2020-08-17 14:54:28 +02:00
|
|
|
let skinViewer;
|
2020-09-14 10:48:51 +02:00
|
|
|
let orbitControl;
|
2020-08-17 14:54:28 +02:00
|
|
|
let rotateAnimation;
|
|
|
|
|
let primaryAnimation;
|
2020-08-17 14:35:05 +02:00
|
|
|
|
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 {
|
2020-10-10 04:22:17 +02:00
|
|
|
const selectedBackEquipment = document.querySelector('input[type="radio"][name="back_equipment"]:checked');
|
|
|
|
|
skinViewer.loadCape(url, { backEquipment: selectedBackEquipment.value })
|
2020-08-17 14:54:28 +02:00
|
|
|
.then(() => input.setCustomValidity(""))
|
|
|
|
|
.catch(e => {
|
|
|
|
|
input.setCustomValidity("Image can't be loaded.");
|
|
|
|
|
console.error(e);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-08-17 14:35:05 +02:00
|
|
|
|
2020-08-17 14:54:28 +02:00
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
});
|
2020-09-14 10:48:51 +02:00
|
|
|
document.getElementById("control_rotate").addEventListener("change", e => orbitControl.enableRotate = e.target.checked);
|
|
|
|
|
document.getElementById("control_zoom").addEventListener("change", e => orbitControl.enableZoom = e.target.checked);
|
|
|
|
|
document.getElementById("control_pan").addEventListener("change", e => orbitControl.enablePan = e.target.checked);
|
2020-09-12 11:32:50 +02:00
|
|
|
for (const part of skinParts) {
|
|
|
|
|
for (const layer of skinLayers) {
|
2020-08-17 14:54:28 +02:00
|
|
|
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());
|
2020-10-10 04:22:17 +02:00
|
|
|
|
|
|
|
|
for (const el of document.querySelectorAll('input[type="radio"][name="back_equipment"]')) {
|
|
|
|
|
el.addEventListener("change", e => {
|
|
|
|
|
if (skinViewer.playerObject.backEquipment === null) {
|
|
|
|
|
// cape texture hasn't been loaded yet
|
|
|
|
|
// this option will be processed on texture loading
|
|
|
|
|
} else {
|
|
|
|
|
skinViewer.playerObject.backEquipment = e.target.value;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2020-08-17 14:54:28 +02:00
|
|
|
document.getElementById("reset_all").addEventListener("click", () => {
|
|
|
|
|
skinViewer.dispose();
|
2020-09-14 10:48:51 +02:00
|
|
|
orbitControl.dispose();
|
2020-08-17 14:54:28 +02:00
|
|
|
initializeViewer();
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function initializeViewer() {
|
2020-09-06 12:27:18 +02:00
|
|
|
skinViewer = new skinview3d.FXAASkinViewer({
|
|
|
|
|
canvas: document.getElementById("skin_container"),
|
2020-08-23 17:29:40 +02:00
|
|
|
alpha: false
|
|
|
|
|
});
|
|
|
|
|
skinViewer.renderer.setClearColor(0x5a76f3);
|
2020-09-14 10:48:51 +02:00
|
|
|
orbitControl = skinview3d.createOrbitControls(skinViewer);
|
2020-08-17 14:54:28 +02:00
|
|
|
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;
|
|
|
|
|
}
|
2020-09-14 10:48:51 +02:00
|
|
|
orbitControl.enableRotate = document.getElementById("control_rotate").checked;
|
|
|
|
|
orbitControl.enableZoom = document.getElementById("control_zoom").checked;
|
|
|
|
|
orbitControl.enablePan = document.getElementById("control_pan").checked;
|
2020-09-12 11:32:50 +02:00
|
|
|
for (const part of skinParts) {
|
|
|
|
|
for (const layer of skinLayers) {
|
2020-08-17 14:54:28 +02:00
|
|
|
skinViewer.playerObject.skin[part][layer].visible =
|
|
|
|
|
document.querySelector(`#layers_table input[type="checkbox"][data-part="${part}"][data-layer="${layer}"]`).checked;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
reloadSkin();
|
|
|
|
|
reloadCape();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
initializeControls();
|
|
|
|
|
initializeViewer();
|
|
|
|
|
</script>
|
2020-08-17 14:35:05 +02:00
|
|
|
|
2020-09-12 11:51:18 +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>
|
2020-08-23 20:26:33 +02:00
|
|
|
|
2020-09-12 11:51:18 +02:00
|
|
|
</body>
|
2020-08-17 14:35:05 +02:00
|
|
|
</html>
|
