为你的个人页面添加看板娘

评分: +24+x

经过了一周的摸索,终于在今天以一种诡异的方式解决了在wikidot上添加live2d的功能

如果看不到请开个梯子

另附EtinjatEtinjat的建议:总之能在作者页上自娱自乐,但不能用于其他正式页面

如果你想加上我这个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的页面

如果看不到请开个梯子






如何制作一个自己的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,点进去(可能需要梯子):

raw.png

然后复制下它的网页链接(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_233Dr 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>






除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License