MCBBS Wiki欢迎您共同参与编辑！在参与编辑之前请先阅读Wiki方针。
如果在编辑的过程中遇到了什么问题，可以去讨论板提问。
为了您能够无阻碍地参与编辑 未验证/绑定过邮箱的用户，请尽快绑定/验证。
MCBBS Wiki GitHub群组已上线！
您可以在回声洞中发表吐槽！
服务器状态监控。点击进入
本站由MCBBS用户自行搭建，与MCBBS及东银河系漫游指南（北京）科技有限公司没有从属关系。点此了解 MCBBS Wiki 不是什么>>
微件:SaltSkinPreviewer：修订间差异
跳到导航
跳到搜索
（创建页面，内容为“<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年版源代码编辑 |
Salt lovely（留言 | 贡献） （代码重写） |
||
| 第1行： | 第1行： | ||
<noinclude><pre>< |
<noinclude><pre><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}}</pre> |
{{#Widget:SaltSkinPreviewer}}</pre> |
||
< |
<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}} |
{{#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> |
</noinclude><includeonly><script async> |
||
"use strict"; |
|||
( |
(() => { |
||
// 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(() => 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 (key) |
|||
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') |
|||
if (skin.querySelector("img")) { |
|||
src = (_a = skin.querySelector("img")) == null ? void 0 : _a.src; |
|||
} else |
|||
src = skin.textContent; |
|||
if (!src || src.length < 10) |
|||
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> |
</script></includeonly> |
||
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}}
这个预览功能使用了bs-community的skinview3d开源库于2020-12-31的版本，采用MIT许可证，Salt_lovely编译上传于Github的版本遵从原许可证。
主体功能实现于2022年8月20日重写，新版源代码详见Github仓库，旧版源代码已经随着盐酱的旧电脑一起随风飘散。