在vuepress中使用live2d看板娘

在vuepress中使用live2d看板娘

最后修改时间:2 months ago
  1. 在合适的地方插入
<canvas id="live2d" width="280" height="250"></canvas>
1
  1. 将静态资源,即 live2d 所采用的模型 model.moc 、模型配置文件 model.json 、模型皮肤 textures/some.png 、 模型动作 motions\*.mtn 、声音 sounds\*.mp3 置入 \docs\.vuepress\public\live2d 中,这样在 vuepress 打包时,会自动置入静态文件夹中。

  2. script 标签下的 vue 生命周期钩子 mounted 中引入调用方法,

mounted() {
  import('./live2d.min.js').then(()=>{loadlive2d("live2d", this.$withBase("/live2d/model.json"))})
},
1
2
3

注意引入 js 的路径,此案例中两者在同一路径,故使用 ./ ,请按照实际情况自行修正。

  1. 最后,别忘记在 css 中书写好 canvas 的样式。

示例:

canvas#live2d {
  position: fixed;
  left: 20px;
  bottom: 200px;
}
1
2
3
4
5
  1. 出现的问题

Q:buildnavigator is not defined 问题

A:因 live2d.min.js 采用 window 以及 navigator 对象,需要在 vue.js 渲染页面后方可使用,应通过 import 方法,在回调中调用 loadlive2d 方法。

Q:为何要使用 this.$withBase 包裹路径

A:this.$withBasevuepress 提供的自动包裹 base 的一个内置 helper,可以帮助你生成正确的路径。以避免修改 config.js 中的 base 项后,路径失效。

- 全文完 -

留下一条留言?
默认颜色

主题颜色

标准颜色

更多颜色...