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实现看板娘达到交互效果相关推荐

博客右下角的动态人物（live2d）看板娘
效果图代码如下 <script src="https://eqcn.ajz.miesnfu.com/wp-content/plug ...
Live2D看板娘详细实现
Live2D看板娘实现国际惯例先上图: 所需资源: 链接:https://pan.baidu.com/s/1s7IJIqGnn-cNRAfoS-qG5w 提取码:dhf4 其中包含了看板娘所需的CS ...
博客园添加live2D看板娘和樱花飘落背景
写在前面本文主要描述了怎么给博客园添加看板娘和樱花飘落特效,文章可能还有很多不足,请大家谅解,欢迎大佬提意见. 本文使用的东西 live2d(看板娘) 樱花飘落博客园文章目录写在前面本文使用 ...
Docker系列 WordPress系列国服最强博客看板娘没有之一
转自我的个人博客https://blognas.hwb0307.com.欢迎关注! 前言在<Docker系列 WordPress系列特效>教程中,你应该已经学会怎么使用一个CDN看板娘 ...
Vue中引入看板娘教程
第一种方法本教程使用的Vue项目一.下载文件要玩看板娘,需要一些写好的资源文件,下载地址我提供我的百度网盘链接:百度网盘请输入提取码提取码:22l5 也可以扫下面这个二维码使用步骤 1. ...
vue中引入看板娘，敲可爱
博客中右下角的板娘! 段落引用接下来在vue以组件的形式使用(只贴出重要的代码,文章末端放上demo的地址,资源都在) npm上有许多现成的依赖,但是可定制的内容少了许多,本文使用自制组件,可在wai ...
如何给博客添加看板娘详解（面向新手）
1.在我的博客页面,点击"管理",进入博客园后台. 2.选择"文件",从本地上传四个文件 flat-ui.min.css (看板娘的侧边选项栏) live2d. ...
live2d 3行代码为网站添加萌萌哒看板娘
3行代码为网站添加萌萌哒看板娘看板娘是一种职业和习惯称呼,也是ACGN次文化中的萌属性之一.简而言之就是小店的女服务生,也有"吸引顾客,招揽生意,提高人气"等作用类似品牌形象代 ...
live2d（Web SDK 4.x）Web看板娘进阶
接上篇文章 Live2D(WebSDK 4.X)网页看板娘设置(一) 欢迎大家阅读本篇教程该篇教程为进阶版的看板娘设置教程,阅读完后可以极大程度的自定义你的看板娘项目. 教程内容: 去掉canvas ...

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

live2d实现看板娘达到交互效果相关推荐

最新文章

热门文章