我们想要给博客增加一个看板娘或小动物，增加互动的趣味性。

本文将介绍一种 live2d 的技术，并提供相应的代码，帮助你在 3 分钟之内接入个人站点。

在线查看效果：https://summerscar.me/live2dDemo/

live2d 介绍

Live2D 并不是一种先进的技术，它产生的效果，都是用基本的平移、旋转、透明、曲面变形等操作实现的。 最终的效果与贴图关系很大，而每一个动作，都需要制作师的精细调整。 这是一个需要消耗大量时间精力的过程，因此质量好的模型并不多，质量好的也一般是在游戏中，版权受到保护，不能随意使用。

引自 https://github.com/galnetwen/Live2D

live2d 使用

模型可以在这个仓库 (opens new window)找：

如何使用 live2d ，整体来说就三步：

1. 创建 canvas 元素，用于展示
2. 加载 live2d 脚本
3. 加载 live2d 模型

对于 live2d 的脚本和资源，我们可以利用 jsdelivr 获取 live2dDemo 仓库的 CDN 资源地址，比如

• live2d 脚本对应的 cdn 地址为 https://cdn.jsdelivr.net/gh/francecil-public/live2dDemo/live2d.js
• live2d 猫猫模型对应的 cdn 地址为 https://cdn.jsdelivr.net/gh/francecil-public/live2dDemo/assets/hijiki.model.json

整理以上步骤得到一段通用代码：

export default () => {
    if (typeof window !== "undefined") {
        // 窄屏不展示
        if(window.innerWidth <= 800) {
            return;
        }
        setTimeout(() => {
            const model = LIVE2D_MODEL
            const canvas = document.createElement('canvas')
            canvas.id = "live2d"
            canvas.style = "position: fixed; right: 40px; bottom: 40px";
            canvas.width = 180
            canvas.height = 150
            document.body.appendChild(canvas)
            
            const script = document.createElement('script')
            script.src = 'https://cdn.jsdelivr.net/gh/francecil-public/live2dDemo/live2d.js'
            script.async = true
            script.onload = () => {
                window.loadlive2d("live2d", `https://cdn.jsdelivr.net/gh/francecil-public/live2dDemo/assets/${model}/${model}.model.json`);
            }
            document.body.appendChild(script)
        }, 3000)
    }
}

上面代码加了延迟加载和窄屏限制

拓展阅读

• 为网站添加一只萌萌哒的看板娘 (opens new window)