微件:SaltSkinPreviewer：修订间差异

2022年8月20日 (六) 20:43的版本

<div class="salt salt-skin-view-3d" style="width: 250px; height: 350px;">[[文件:1.8皮肤模板 第二层镂空.png]]</div>

<div class="salt salt-skin-view-3d" style="width: 400px; height: 400px;">https://minotar.net/skin/MHF_Steve</div>

{{#Widget:SaltSkinPreviewer}}

https://minotar.net/skin/MHF_Steve

这个预览功能使用了bs-community的skinview3d开源库于2020-12-31的版本，采用MIT许可证，Salt_lovely编译上传于Github的版本遵从原许可证。

主体功能实现于2022年8月20日重写，新版源代码详见Github仓库，旧版源代码已经随着盐酱的旧电脑一起随风飘散。

@@ 第1行： / 第1行： @@
-<noinclude><pre><span class="skinview3d salt">[[文件:1.8皮肤模板 第二层镂空.png]]</span>
+<noinclude><pre><div class="salt salt-skin-view-3d" style="width: 250px; height: 350px;">[[文件:1.8皮肤模板 第二层镂空.png]]</div>
-<span class="skinview3d salt">https://attachment.mcbbs.net/forum/202004/26/203149z2t4el4ctdh4t1dt.png</span>
+<div class="salt salt-skin-view-3d" style="width: 400px; height: 400px;">https://minotar.net/skin/MHF_Steve</div>
 {{#Widget:SaltSkinPreviewer}}</pre>
-<span class="skinview3d salt">[[文件:1.8皮肤模板 第二层镂空.png]]</span>
+<div class="salt salt-skin-view-3d" style="width: 250px; height: 350px;">[[文件:1.8皮肤模板 第二层镂空.png]]</div>
-<span class="skinview3d salt">https://attachment.mcbbs.net/forum/202004/26/203149z2t4el4ctdh4t1dt.png</span>
+<div class="salt salt-skin-view-3d" style="width: 400px; height: 400px;">https://minotar.net/skin/MHF_Steve</div>
 {{#Widget:SaltSkinPreviewer}}
-这个预览功能使用了[https://github.com/bs-community/skinview3d bs-community的skinview3d开源库]于2020-12-31的版本，采用'''MIT许可证'''。
+这个预览功能使用了[https://github.com/bs-community/skinview3d bs-community的skinview3d开源库]于2020-12-31的版本，采用'''MIT许可证'''，Salt_lovely[https://github.com/Salt-lovely/skinview3d 编译上传于Github的版本]遵从原许可证。
+主体功能实现于2022年8月20日重写，新版源代码详见[https://github.com/mcbbs-wiki/mcbbs-wiki-widget-repo Github仓库]，旧版源代码已经随着盐酱的旧电脑一起随风飘散。
-Salt_lovely[https://github.com/Salt-lovely/skinview3d 编译上传于Github的版本]遵从原许可证。
-代码中<code>__awaiter</code>部分由Microsoft开发，释入公共领域，可随意使用；其余部分由Salt_lovely开发，使用'''AGPL v3许可证'''。
-（这么屑的代码应该没有人偷）
 </noinclude><includeonly><script async>
-'use strict';
+"use strict";
-(function () {
+(() => {
+ // src/utils/utils.ts
- let __awaiter = (this && this.__awaiter) || function (saltArg, _arguments, P, generator) {
+ function docReady(fn) {
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+ if (document.readyState === "loading") {
- return new (P || (P = Promise))(function (resolve, reject) {
+ window.addEventListener("DOMContentLoaded", fn);
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+ } else {
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+ fn();
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
- step((generator = generator.apply(saltArg, _arguments || [])).next());
- });
- };
- if (!document.querySelector('script[src^="https://cdn.jsdelivr.net/gh/Salt-lovely/skinview3d"]')) {
- let s = document.createElement('script')
- s.src = 'https://cdn.jsdelivr.net/gh/Salt-lovely/[email protected]/bundles/skinview3d.bundle.js'
- document.head.appendChild(s)
  }
+ }
- let allowList = ['https://attachment.mcbbs.net/']
+ function sleep(time = 500) {
- __awaiter(this, void 0, void 0, function* () {
+ return new Promise((res) => {
- // 主要过程
- let safe = 0
+ setTimeout(() => res(), time);
+ });
- while (typeof skinview3d == 'undefined' && safe < 100) {
+ }
- yield new Promise((resolve) => setTimeout(resolve, 1000));
+ async function waitTill(what, interval = 500, safeTime = 12e4) {
- // console.log(safe++)
-  }
+ const startTime = Date.now();
+ while (!what()) {
- if (typeof skinview3d == 'undefined') {
+ await sleep(interval);
- throw new Error('没有成功下载skinview3d')
+ if (Date.now() - startTime > safeTime && !what())
- }
+ throw new Error("Out Of Time");
- for (let s of Array.from(document.querySelectorAll('.skinview3d.salt'))) {
+ }
- s.classList.remove('salt') // 防止复读
+ }
- if (!(s instanceof HTMLElement)) { continue } // 略过非HTML元素
- let temp, src = ''
+ // src/utils/resource.ts
- temp = s.querySelector('img') // 从img获取
+ function addScript(url, asynchronous = false, key) {
- if (temp) {
+ if (key && document.getElementById(key))
- src = temp.src || ''
-  }
+ return;
+ const scr = document.createElement("script");
- if (src.length < 1) {
+ scr.src = url;
- // 没有获取到链接地址或者不存在img
+ scr.async = asynchronous;
- temp = s.querySelector('a')
-  if (temp) {
+ if (key)
-  src = temp.href || ''
+ scr.id = key;
+ document.head.appendChild(scr);
- }
-  }
+ }
- if (src.indexOf('https://game.bilibili.com/linkfilter/?url=') == 0
+ // widget/SaltSkinPreviewer/widget.ts
- || src.indexOf('http://game.bilibili.com/linkfilter/?url=') == 0) {
+ var filterWebsite = [
- src = src.replace(/https?\:\/\/game\.bilibili\.com\/linkfilter\/\?url\=/, '')
+ "https://mcbbs.wiki/",
- let allow = false
+ "https://attachment.mcbbs.net/",
- for (let al of allowList) {
+ "https://minotar.net/"
- if (src.indexOf(al) == 0) {
+ ];
- allow = true
+ addScript("https://cdn.jsdelivr.net/gh/Salt-lovely/[email protected]/bundles/skinview3d.bundle.js", true, "SaltSkinPreviewer");
- break
+ docReady(async () => {
- }
-  }
+ await waitTill(() => {
+ var _a;
- if (!allow) { continue }
+ return (_a = window.skinview3d) == null ? void 0 : _a.SkinViewer;
- src = 'https://saltproxy.saltlovely.workers.dev/' + src
-  }
+ });
+ const skinList = Array.from(document.querySelectorAll(".salt.salt-skin-view-3d"));
- if (src.length < 1) { continue } // 没救了
+ skinList.forEach((skin) => {
- // console.log(src)
-  // 添加皮肤
+ var _a;
+ skin.classList.remove("salt");
- s.innerHTML = '' // 清空
+ let src;
- let canvas = document.createElement('canvas')
-  s.appendChild(canvas)
+ if (skin.querySelector("img")) {
- let sv = new skinview3d.SkinViewer({
+ src = (_a = skin.querySelector("img")) == null ? void 0 : _a.src;
-  canvas: canvas,
+ } else
-  width: 250,
+ src = skin.textContent;
-  height: 350,
+ if (!src || src.length < 10)
-  skin: src
+ return;
+ if (!filterWebsite.some((site) => src.startsWith(site)))
- })
+ return;
- sv.renderer.setClearColor(0xf6f9fe) // 背景色
+ skin.innerHTML = "";
- let walk = sv.animations.add(skinview3d.WalkingAnimation)
+ const canvas = document.createElement("canvas");
- walk.speed = 0.4
- }
+ const option = {
- })
+  canvas,
+ width: skin.offsetWidth,
-})()
+ height: skin.offsetHeight,
+ skin: src,
+ fov: 50,
+ zoom: 0.9
+ };
+ const viewer = new window.skinview3d.SkinViewer(option);
+ viewer.globalLight.intensity = 0.5;
+ viewer.cameraLight.intensity = 0.5;
+ skin.appendChild(canvas);
+ const animation = {
+ idle: new window.skinview3d.IdleAnimation(),
+ walk: new window.skinview3d.WalkingAnimation()
+ };
+ const action = (() => {
+ let curr = 0;
+ const actions = [
+ (v) => {
+ v.animation = animation.walk;
+ v.animation.speed = 0.5;
+ },
+ (v) => {
+ v.animation = animation.walk;
+ v.animation.speed = 1;
+ },
+ (v) => {
+ v.animation = animation.idle;
+ v.animation.speed = 1;
+ }
+ ];
+ return (v) => {
+ actions[curr++](v);
+ if (curr >= actions.length)
+ curr = 0;
+ };
+ })();
+ let pos = { x: 0, y: 0 };
+ skin.addEventListener("mousedown", (ev) => {
+ const { x, y } = ev;
+ pos = { x, y };
+ ev.preventDefault();
+ });
+ skin.addEventListener("mouseup", (ev) => {
+ const { x, y } = ev;
+ if (Math.abs(pos.x - x) > 2 || Math.abs(pos.y - y) > 2)
+ return;
+ if (ev.button === 0)
+ action(viewer);
+ else if (ev.button === 2)
+ viewer.resetCameraPose();
+ ev.preventDefault();
+ });
+ action(viewer);
+ skin.addEventListener("dblclick", () => {
+ viewer.resetCameraPose();
+ });
+ });
+ });
+})();
 </script></includeonly>

微件:SaltSkinPreviewer：修订间差异

2022年8月20日 (六) 20:43的版本

导航菜单