From b935dabd1eed3e13bf5cb5f5bd2b25c2f26cea63 Mon Sep 17 00:00:00 2001 From: Sean Boult <996134+Hacksore@users.noreply.github.com> Date: Sat, 21 Sep 2024 10:56:39 -0500 Subject: [PATCH] More format --- examples/index.html | 462 ++++++++++++++++++--------------- examples/main.ts | 73 ++++-- examples/offscreen-renderer.ts | 23 +- examples/style.css | 10 +- 4 files changed, 311 insertions(+), 257 deletions(-) diff --git a/examples/index.html b/examples/index.html index 1076dd1..fa5e3ce 100644 --- a/examples/index.html +++ b/examples/index.html @@ -1,252 +1,288 @@ + + + + skinview3d + - - - - skinview3d - + + - +
+ - - -
- - - -
-

Viewport

-
- - +
+

Viewport

+
+ + +
+
+ + +
-
- - + +
+

Light

+ +
-
-
-

Light

- - -
+
+

Rotation

+ + +
-
-

Rotation

- - -
+
+

Animation

+
+ + + + + +
+ + +
-
-

Animation

-
- - - - - +
+

Mouse Control

+
+ + + +
- - -
-
-

Mouse Control

-
- - - +
+

Skin Layers

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
headbodyright armleft armright legleft leg
inner
outer
+
+

Back Equipment

+
+ + +
+
-
-
-

Skin Layers

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
headbodyright armleft armright legleft leg
inner
outer
-
-

Back Equipment

-
- - +
+

Skin

+
+
+ + + + + + + + + + + + + +
+
+
+
-
-
-

Skin

-
+
+

Cape

- - -
-
- -
-
-
-

Cape

-
- - - - - - +
+

Ears

+
+ +
+
+ + + + + + + + + +
-
-
-

Ears

-
- -
-
- - - - - - +
+

Panorama

+
+ + + + + + + + +
-
-
-

Panorama

-
- - - - - - +
+

Name Tag

+
+ +
-
-
-

Name Tag

-
- +
+

Other examples

+
-
-

Other examples

- -
- -
- - - - - - - + + + + + diff --git a/examples/main.ts b/examples/main.ts index 45207fc..0d544ff 100644 --- a/examples/main.ts +++ b/examples/main.ts @@ -7,7 +7,7 @@ const availableAnimations = { idle: new skinview3d.IdleAnimation(), walk: new skinview3d.WalkingAnimation(), run: new skinview3d.RunningAnimation(), - fly: new skinview3d.FlyingAnimation() + fly: new skinview3d.FlyingAnimation(), }; let skinViewer: skinview3d.SkinViewer; @@ -37,10 +37,11 @@ function reloadSkin() { skinViewer.loadSkin(null); input.setCustomValidity(""); } else { - skinViewer.loadSkin(url, { - model: document.getElementById("skin_model").value, - ears: document.getElementById("ears_source").value === "current_skin" - }) + skinViewer + .loadSkin(url, { + model: document.getElementById("skin_model").value, + ears: document.getElementById("ears_source").value === "current_skin", + }) .then(() => input.setCustomValidity("")) .catch(e => { input.setCustomValidity("Image can't be loaded."); @@ -57,7 +58,8 @@ function reloadCape() { input.setCustomValidity(""); } else { const selectedBackEquipment = document.querySelector('input[type="radio"][name="back_equipment"]:checked'); - skinViewer.loadCape(url, { backEquipment: selectedBackEquipment.value }) + skinViewer + .loadCape(url, { backEquipment: selectedBackEquipment.value }) .then(() => input.setCustomValidity("")) .catch(e => { input.setCustomValidity("Image can't be loaded."); @@ -87,7 +89,8 @@ function reloadEars(skipSkinReload = false) { skinViewer.loadEars(null); input.setCustomValidity(""); } else { - skinViewer.loadEars(url, { textureType: sourceType }) + skinViewer + .loadEars(url, { textureType: sourceType }) .then(() => input.setCustomValidity("")) .catch(e => { input.setCustomValidity("Image can't be loaded."); @@ -98,7 +101,7 @@ function reloadEars(skipSkinReload = false) { const el = document.getElementById("ears_texture_input"); if (hideInput) { - if (!(el.classList.contains("hidden"))) { + if (!el.classList.contains("hidden")) { el.classList.add("hidden"); } } else { @@ -113,7 +116,8 @@ function reloadPanorama() { skinViewer.background = null; input.setCustomValidity(""); } else { - skinViewer.loadPanorama(url) + skinViewer + .loadPanorama(url) .then(() => input.setCustomValidity("")) .catch(e => { input.setCustomValidity("Image can't be loaded."); @@ -132,15 +136,23 @@ function reloadNameTag() { } 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("fov").addEventListener("change", e => skinViewer.fov = e.target.value); - document.getElementById("zoom").addEventListener("change", e => skinViewer.zoom = e.target.value); - document.getElementById("global_light").addEventListener("change", e => skinViewer.globalLight.intensity = e.target.value); - document.getElementById("camera_light").addEventListener("change", e => skinViewer.cameraLight.intensity = e.target.value); - document.getElementById("animation_pause_resume").addEventListener("click", () => skinViewer.animation.paused = !skinViewer.animation.paused); - document.getElementById("auto_rotate").addEventListener("change", e => skinViewer.autoRotate = e.target.checked); - document.getElementById("auto_rotate_speed").addEventListener("change", e => skinViewer.autoRotateSpeed = 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("fov").addEventListener("change", e => (skinViewer.fov = e.target.value)); + document.getElementById("zoom").addEventListener("change", e => (skinViewer.zoom = e.target.value)); + document + .getElementById("global_light") + .addEventListener("change", e => (skinViewer.globalLight.intensity = e.target.value)); + document + .getElementById("camera_light") + .addEventListener("change", e => (skinViewer.cameraLight.intensity = e.target.value)); + document + .getElementById("animation_pause_resume") + .addEventListener("click", () => (skinViewer.animation.paused = !skinViewer.animation.paused)); + document.getElementById("auto_rotate").addEventListener("change", e => (skinViewer.autoRotate = e.target.checked)); + document + .getElementById("auto_rotate_speed") + .addEventListener("change", e => (skinViewer.autoRotateSpeed = e.target.value)); for (const el of document.querySelectorAll('input[type="radio"][name="animation"]')) { el.addEventListener("change", e => { if (e.target.value === "") { @@ -156,13 +168,20 @@ function initializeControls() { skinViewer.animation.speed = e.target.value; } }); - document.getElementById("control_rotate").addEventListener("change", e => skinViewer.controls.enableRotate = e.target.checked); - document.getElementById("control_zoom").addEventListener("change", e => skinViewer.controls.enableZoom = e.target.checked); - document.getElementById("control_pan").addEventListener("change", e => skinViewer.controls.enablePan = e.target.checked); + document + .getElementById("control_rotate") + .addEventListener("change", e => (skinViewer.controls.enableRotate = e.target.checked)); + document + .getElementById("control_zoom") + .addEventListener("change", e => (skinViewer.controls.enableZoom = e.target.checked)); + document + .getElementById("control_pan") + .addEventListener("change", e => (skinViewer.controls.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); + 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)); } } @@ -217,7 +236,7 @@ function initializeControls() { function initializeViewer() { skinViewer = new skinview3d.SkinViewer({ - canvas: document.getElementById("skin_container") + canvas: document.getElementById("skin_container"), }); skinViewer.width = document.getElementById("canvas_width").value; @@ -238,8 +257,9 @@ function initializeViewer() { skinViewer.controls.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; + skinViewer.playerObject.skin[part][layer].visible = document.querySelector( + `#layers_table input[type="checkbox"][data-part="${part}"][data-layer="${layer}"]` + ).checked; } } reloadSkin(); @@ -251,4 +271,3 @@ function initializeViewer() { initializeControls(); initializeViewer(); - diff --git a/examples/offscreen-renderer.ts b/examples/offscreen-renderer.ts index 712cc02..ab0efa9 100644 --- a/examples/offscreen-renderer.ts +++ b/examples/offscreen-renderer.ts @@ -4,39 +4,39 @@ import "./style.css"; const configurations = [ { skin: "img/1_8_texturemap_redux.png", - cape: null + cape: null, }, { skin: "img/hacksore.png", - cape: "img/legacy_cape.png" + cape: "img/legacy_cape.png", }, { skin: "img/haka.png", - cape: "img/mojang_cape.png" + cape: "img/mojang_cape.png", }, { skin: "img/hatsune_miku.png", cape: "img/mojang_cape.png", - backEquipment: "elytra" + backEquipment: "elytra", }, { skin: "img/ironman_hd.png", - cape: "img/hd_cape.png" + cape: "img/hd_cape.png", }, { skin: "img/sethbling.png", - cape: null - } + cape: null, + }, ]; -(async function() { +(async function () { const skinViewer = new skinview3d.SkinViewer({ width: 200, height: 300, - renderPaused: true + renderPaused: true, }); - skinViewer.camera.rotation.x = -0.620; + skinViewer.camera.rotation.x = -0.62; skinViewer.camera.rotation.y = 0.534; skinViewer.camera.rotation.z = 0.348; skinViewer.camera.position.x = 30.5; @@ -46,7 +46,7 @@ const configurations = [ for (const config of configurations) { await Promise.all([ skinViewer.loadSkin(config.skin), - skinViewer.loadCape(config.cape, { backEquipment: config.backEquipment }) + skinViewer.loadCape(config.cape, { backEquipment: config.backEquipment }), ]); skinViewer.render(); const image = skinViewer.canvas.toDataURL(); @@ -60,4 +60,3 @@ const configurations = [ skinViewer.dispose(); })(); - diff --git a/examples/style.css b/examples/style.css index 64d2ba7..10cb707 100644 --- a/examples/style.css +++ b/examples/style.css @@ -1,6 +1,6 @@ @font-face { - font-family: 'Minecraft'; - src: url('font/minecraft.woff2') format('woff2'); + font-family: "Minecraft"; + src: url("font/minecraft.woff2") format("woff2"); } body { @@ -29,7 +29,7 @@ input[type="text"] { display: inline; } -.control+.control { +.control + .control { margin-left: 10px; } @@ -37,8 +37,8 @@ input[type="text"] { margin-left: 10px; } -.control-section>h1, -.control-section>h2 { +.control-section > h1, +.control-section > h2 { margin-left: -10px; }