live2D简单加载方式

Author Avatar
yyq 2020-11-03 10:32:49
  • 二维码

live2D简单加载方式

        个人网站优化时接触的一款动画插件,功能还可以,记录下

        NO1:下载相关内容链接如下

            链接: https://pan.baidu.com/s/1CMmWxnZI2YGoCZA9K4cP6Q 提取码: ekf5


        NO2:解压后两个目录,live2d与live2d_api,将其放入项目public/static/home/目录下,如果你的是其他目录,需要修改JS等相关路径以便能正常访问


        NO3:使用方式,在html页面内添加元素及相关引用如下:

    <!-- 引用liv2D CSS布局 -->
   <link rel="stylesheet" type="text/css" href="/static/home/live2d/assets/waifu.css" />
   
   <!-- live2D 元素-->
   <div class="waifu">
       <div class="waifu-tips"></div>
       <canvas id="live2d" width="280" height="300" class="live2d"></canvas>
       <div class="waifu-tool">
           <span class="fui-home"></span>
           <span class="fui-chat"></span>
           <span class="fui-eye"></span>
           <span class="fui-user"></span>
           <span class="fui-photo"></span>
           <span class="fui-info-circle"></span>
           <span class="fui-cross"></span>
       </div>
   </div>

            <!-- 引用liv2D JS及入口函数-->

            <script src="/static/home/live2d/assets/waifu-tips.js"></script>

            <script src="/static/home/live2d/assets/live2d.js"></script>

            <script type="text/javascript">

                initModel("/static/home/live2d/assets/");

            </script>


        NO4:说明:waifu-tips.js内含有元素点击响应操作,部署完成后点击无反应,将class的点击响应改为监听点击即可,操作如下:

            原始处理:

                $('.waifu-tool .fui-eye').click(function (){

                    loadOtherModel();

                });


            更改为:

                $(document).on('click', '.waifu-tool .fui-eye', function(e){

                    loadOtherModel();

                });


上一篇 返回列表 下一篇

发表评论

Tips:评论内容请文明用语