MCBBS Wiki

微件:SaltSkinPreviewer：修订间差异

微件 讨论

微件:SaltSkinPreviewer (查看源代码)

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

添加303字节 、​ 2022年8月20日 (星期六)
代码重写
可视化wikitext
（创建页面，内容为“<noinclude><pre><span class="skinview3d salt">文件:1.8皮肤模板 第二层镂空.png</span> <span class="skinview3d salt">https://attachment.mcbbs.net/forum/202004/26/203149z2t4el4ctdh4t1dt.png</span> {{#Widget:SaltSkinPreviewer}}</pre> <span class="skinview3d salt">文件:1.8皮肤模板 第二层镂空.png</span> <span class="skinview3d salt">https://attachment.mcbbs.net/forum/202004/26/203149z2t4el4ctdh4t1dt.png</span> {{#Widget:SaltSkinPrev…”）
标签：2017年版源代码编辑
 
（代码重写）
<noinclude><pre><spandiv class="skinview3dsalt salt-skin-view-3d" style="width: 250px; height: 350px;">[[文件:1.8皮肤模板 第二层镂空.png]]</spandiv>
 
<spandiv class="skinview3dsalt salt-skin-view-3d" style="width: 400px; height: 400px;">https://attachment.mcbbsminotar.net/forumskin/202004/26/203149z2t4el4ctdh4t1dt.pngMHF_Steve</spandiv>
 
{{#Widget:SaltSkinPreviewer}}</pre>
 
<spandiv class="skinview3dsalt salt-skin-view-3d" style="width: 250px; height: 350px;">[[文件:1.8皮肤模板 第二层镂空.png]]</spandiv>
 
<spandiv class="skinview3dsalt salt-skin-view-3d" style="width: 400px; height: 400px;">https://attachment.mcbbsminotar.net/forumskin/202004/26/203149z2t4el4ctdh4t1dt.pngMHF_Steve</spandiv>
 
{{#Widget:SaltSkinPreviewer}}
 
这个预览功能使用了[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'";
(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) => {
// 主要过程
setTimeout(() => let safe =res(), 0time);
});
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 (tempkey) {
srcscr.id = temp.href || ''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')
if s(skin.appendChildquerySelector(canvas"img")) {
src = (_a = let svskin.querySelector("img")) == newnull skinview3d? void 0 : _a.SkinViewer({src;
} canvas: canvas,else
src = width: 250,skin.textContent;
if (!src || src.length < height: 350,10)
skin: srcreturn;
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>
取自“https://mcbbs.wiki/wiki/特殊:移动版差异/37739”