live2d实现看板娘达到交互效果

网页上实现一个卡通人物，鼠标移动时做出各种动作和文字提示，达到交互效果

在这里插入图片描述
一直想在网页实现下这个效果，研究了下，其实它是引用live2D实现的，Live2D是一种应用于电子游戏的绘图渲染技术，技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像。

如果只是简单学下的话，复制以下代码

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Live2D 看板娘 v1.2 / Demo</title>
    <script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.0.min.js"></script>
    <script type="text/javascript" charset="utf-8"  src="https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js"></script>
    <script type="text/javascript">
        L2Dwidget.init({
      
      "display": {
      
      
                "superSample": 2,
                "width": 200,
                "height": 400,
                "position": "right",
                "hOffset": 0,
                "vOffset": 0
            }
        });
    </script>

插入HTML标签里面，就可以看到效果了

直接用别人封装好的脚本库，简单高效。如果要深入的话…额，这东西需要模型，各种贴图资源文件，需要搭建一个服务存放（没法放在本地环境）
除了去学习live2D各种模型画图做导出存放到自己服务之外，还可以引用第三方API(https://live2d.fghrsh.net/api/get/?id=1)
在这里插入图片描述
可以看到，textures存放的是模型的贴图(其他的自己去研究吧)

下载https://download.csdn.net/download/code_carrierV1/85501571，打开demo.html看看效果吧(这里使用第三方API引用模型资源文件)
在这里插入图片描述
注意assets文件夹的路径，现在默认是和demo.html同级

如果人物出不来，就换一张试下，毕竟第三方API不稳定，人物图片删掉了也是有可能的

live2d实现看板娘达到交互效果

猜你喜欢