经过了一周的摸索,终于在今天以一种诡异的方式解决了在wikidot上添加live2d的功能
如果看不到请开个梯子
另附
Etinjat的建议:总之能在作者页上自娱自乐,但不能用于其他正式页面
如果你想加上我这个live2d(我个人的live2模型),请在页面上加上这段代码:
[[div style="width: 250px;height:250px;position: fixed;bottom: 20px;right: 30px;" class="pconly"]]
[[html]]
<iframe id="inlineFrameExample"
width="250px"
height="250px"
src="https://msjand.github.io/"
frameborder="no"
>
</iframe>
[[/html]]
[[/div]]
值得注意的是,考虑到手机浏览屏幕比较小,我在wikidot页面顶部增加了一段手机端隐藏的css
[[module css]]
@media only screen and (max-width: 600px) {
.pconly {
display: none;} }
[[module]]
并且它只适用于gsk主题(因为背景是灰黑色的),如果你想定制一个自己的live2d就请往下继续翻吧
大图示例:
如果看不到请开个梯子
如何制作一个自己的live2d版娘
由于拉跨的Wikidot不支持在上面直接放这些代码,于是我找了个使用iframe取巧的办法
首先我主要参考了这↑里↓的方法和代码,因此如果你的模型不是model3.json的话就得劳烦您去看一下他的说明书了
说明文档页面:https://github.com/guansss/pixi-live2d-display/blob/master/README.zh.md
1.你需要拥有一个自己的网页,以便显示你的人物模型
我个人推荐是在GitHub上建立一个仓库以及相关的页面,你可以在这↑里↓,或者百度上找到相关方法,我就不过多赘述了
2.上传你的模型文件
你需要将你的模型文件(连带整个文件夹,如果文件过大可以使用客户端)上传到你的github上,如果这一步成功的话,你会在你github仓库的文件夹里找到这个文件
XXXX.model3.json
GitHub网页中点击打开,然后你会在一大串代码中找到这个raw,点进去(可能需要梯子):
然后复制下它的网页链接(url),这就是你模型的链接
如果需要在国内显示的话,我建议使用CDN网络加速后的链接,具体用法很简单,在你做完上面的上传步骤后,你在后面使用的模型链接就应该为:
https://cdn.jsdelivr.net/gh/<用户名>/<仓库名>/<文件及路径>
这样(应该)就能免受github爬梯子加速器的苦了,如果实在不行那就爬梯子吧(悲
3.放置你的网页
复制下面这段代码到txt当中,然后重命名为index.html
<!DOCTYPE html>
<html>
<head>
</head>
<style>
body {
overflow: hidden;
background-color: 1A1A1A;
}
</style>
<body>
<script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@6.5.2/dist/browser/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/index.min.js"></script>
<canvas id="canvas" width="878" height="792"></canvas>
<script>
const cubism4Model =
"https://raw.githubusercontent.com/msjand/live2d-jand/main/%E6%B3%A2%E5%A5%87%E9%85%B1live2d/%E6%B3%A2%E5%A5%87%E9%85%B11.model3.json"; //这里改你的模型文件
(async function main() {
const app = new PIXI.Application({
view: document.getElementById("canvas"),
autoStart: true,
resizeTo: window,
backgroundColor: 0x1A1A1A //设置背景颜色
});
const model4 = await PIXI.live2d.Live2DModel.from(cubism4Model);
app.stage.addChild(model4);
model4.scale.set(0.1); //调整模型的大小
model4.x = -50; //调整模型x轴位置
model4.y = -50; //调整模型y轴位置
})();
models.forEach((model) => {
app.stage.addChild(model);
const scaleX = (innerWidth * 0.4) / model.width;
const scaleY = (innerHeight * 0.8) / model.height;
// 适应窗口
model.scale.set(Math.min(scaleX, scaleY));
model.y = innerHeight * 0.1;
});
</script>
</body>
</html>
将里面这段代码换成你的模型链接
const cubism4Model =
"https://raw.githubusercontent.com/msjand/live2d-jand/main/%E6%B3%A2%E5%A5%87%E9%85%B1live2d/%E6%B3%A2%E5%A5%87%E9%85%B11.model3.json"; //这里改你的模型文件
你还可以更改其中的背景颜色,x后面接16位的色值,挑一个你页面上能用的就行
backgroundColor: 0x1A1A1A
然后保存
等一会,不出意料的话你就可以在你github.io的页面上看到你的模型了
就像这个:https://msjand.github.io/
4.把板娘放到你的wikidot页面中
把这段代码抄到你的页面上就大功告成了
建议一起放在文章最上面
[[module css]]
@media only screen and (max-width: 600px) {
.pconly {
display: none;} }
[[module]]
[[div style="width: 250px;height:250px;position: fixed;bottom: 20px;right: 30px;" class="pconly"]]
[[html]]
<iframe id="inlineFrameExample"
width="250px"
height="250px"
src="https://msjand.github.io/"
frameborder="no"
>
</iframe>
[[/html]]
[[/div]]
你也可以更改其中iframe标签的参数以及div块的参数调整,以及增加阴影、边框、文字之类的,但再此就不过多赘述了
最后特别感谢Dr Ink_233和其他/她几位大佬一直在帮忙改进代码
5.补充部分
这里是为继续优化live2d位置、交互等功能设置的说明页面
同样的,主要参考了这里的用法
首先是位置部分
你能在第三部分你的github.io网页代码中找到这一段代码
model4.scale.set(0.1);
model4.x = -50;
model4.y = -50;
它的主要功能是调整你模型的大小,比如这里就设置了原来大小的0.1,即10%
model4.scale.set(0.1);
这里则是让模型整体上分别向左和向上移动了50个单位,相应的有:负数向左,正数向右
model4.x = -50;
model4.y = -50;
如果你要添加一些鼠标点击交互
可以参考这里的示例
我注释了我能看懂的部分
const cubism2Model =
"https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/shizuku/shizuku.model.json";
const cubism4Model =
"https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/haru/haru_greeter_t03.model3.json";
const live2d = PIXI.live2d;
(async function main() {
const app = new PIXI.Application({
view: document.getElementById("canvas"),
autoStart: true,
resizeTo: window,
backgroundColor: 0x333333
});
const models = await Promise.all([
live2d.Live2DModel.from(cubism2Model),
live2d.Live2DModel.from(cubism4Model)
]);
models.forEach((model) => {
app.stage.addChild(model);
const scaleX = (innerWidth * 0.4) / model.width;
const scaleY = (innerHeight * 0.8) / model.height;
// fit the window
model.scale.set(Math.min(scaleX, scaleY));
model.y = innerHeight * 0.1;
draggable(model); //让模型可拖动
addFrame(model); //给模型增加边框
addHitAreaFrames(model); //给模型增加标注点击区域框
});
const model2 = models[0];
const model4 = models[1];
model2.x = (innerWidth - model2.width - model4.width) / 2;
model4.x = model2.x + model2.width;
// 下面这一部分增加了交互区域
model2.on("hit", (hitAreas) => {
if (hitAreas.includes("body")) {
model2.motion("tap_body");
}
if (hitAreas.includes("head")) {
model2.expression();
}
});
model4.on("hit", (hitAreas) => {
if (hitAreas.includes("Body")) {
model4.motion("Tap");
}
if (hitAreas.includes("Head")) {
model4.expression();
}
});
})();
//↓可拖动功能的js代码
function draggable(model) {
model.buttonMode = true;
model.on("pointerdown", (e) => {
model.dragging = true;
model._pointerX = e.data.global.x - model.x;
model._pointerY = e.data.global.y - model.y;
});
model.on("pointermove", (e) => {
if (model.dragging) {
model.position.x = e.data.global.x - model._pointerX;
model.position.y = e.data.global.y - model._pointerY;
}
});
model.on("pointerupoutside", () => (model.dragging = false));
model.on("pointerup", () => (model.dragging = false));
}
//↓增加边框的js代码
function addFrame(model) {
const foreground = PIXI.Sprite.from(PIXI.Texture.WHITE);
foreground.width = model.internalModel.width;
foreground.height = model.internalModel.height;
foreground.alpha = 0.2;
model.addChild(foreground);
checkbox("Model Frames", (checked) => (foreground.visible = checked));
}
//↓增加点击区域边框的js代码
function addHitAreaFrames(model) {
const hitAreaFrames = new live2d.HitAreaFrames();
model.addChild(hitAreaFrames);
checkbox("Hit Area Frames", (checked) => (hitAreaFrames.visible = checked));
}
//↓增加控制区域功能的js代码
function checkbox(name, onChange) {
const id = name.replace(/\W/g, "").toLowerCase();
let checkbox = document.getElementById(id);
if (!checkbox) {
const p = document.createElement("p");
p.innerHTML = `<input type="checkbox" id="${id}"> <label for="${id}">${name}</label>`;
document.getElementById("control").appendChild(p);
checkbox = p.firstChild;
}
checkbox.addEventListener("change", () => {
onChange(checkbox.checked);
});
onChange(checkbox.checked);
}
这里<style>标签以及@div id="control"></div@则是增加控制区域的css&html代码,可以不添加
<style>
#control
position: absolute
top: 8px
left: 24px
color: white
font-size: 18px
</style>
<script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@6.5.2/dist/browser/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/extra.min.js"></script>
<canvas id=canvas></canvas>
<div id="control"></div>