live2d在vue中的运用
live2d在vue中的运用:1.首先先下载live2d的安装包链接:https://pan.baidu.com/s/1Ay3Tk3sZInHHwqpBkBHP7w提取码:zjsk2.将下载好的安装包解压到static下3.在上一级目录中的index.html文件中加标签文件地址一定要对应!!!<script type="text/javascript" src="./static/live
·
live2d在vue中的运用:
1.首先先下载live2d的安装包
链接:https://pan.baidu.com/s/1Ay3Tk3sZInHHwqpBkBHP7w
提取码:zjsk
2.将下载好的安装包解压到static下
3.在上一级目录中的index.html文件中加标签
文件地址一定要对应!!!
<script type="text/javascript" src="./static/live2dw/lib/L2Dwidget.min.js"></script>
4.再在App.vue中添加代码
文件地址一定要对应,不同的文件地址可以选择不同的老婆!
/*看板娘初始化
参数说明
model 模型的配置
json 文件资源路径,可以支持网络路径,此处使用的是相对路径
scale 模型缩放系数
display 模型布局
position 位置
width 宽度
height 高度
hOffset 水平偏移量
vOffset 垂直偏移量
mobile 移动端配置
show 显示/隐藏
scale 缩放比例
react 模型矩形框样式
opacity 透明度
opacityDefault 默认透明度
opacityOnHover 鼠标悬浮透明度
*/
mounted() {
setTimeout(() => {
window.L2Dwidget.init({
pluginRootPath: '../static/live2dw/',
pluginJsPath: 'lib/',
pluginModelPath: 'live2d-widget-model-haru_2/assets/', //中间这个haru_2就是你的老婆,想换个老婆,换这个就可以了
tagMode: false,
debug: false,
model: { jsonPath: '../static/live2dw/live2d-widget-model-haru_2/assets/haru02.model.json' },
display: { position: 'right', width: 400, height: 900 }, //调整大小,和位置
mobile: { show: true }, //要不要盯着你的鼠标看
log: false,
})
}, 1)
}
对应的*.model.json文件中可以修改声音等属性
5.大功告成
更多推荐
已为社区贡献1条内容
所有评论(0)