在vue项目添加live2d可交互的看板娘
在vue项目添加live2d可交互的看板娘
·
先看效果图
接下来完成这个小功能!
第一步)
在index.html的head中添加
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
第二步)
创建对应层级目录, 然后把这四个文件放进去,文件的链接会放在文章的最后
第三步)
在对应层级目录下复制进去这个index的vue文件
index.vue代码(直接创建个空的vue文件全复制进去,放到对应的目录下)
<template>
<div class="index">
<div class="waifu">
<!-- 提示框 -->
<div class="waifu-tips"></div>
<!-- 看板娘画布 -->
<canvas id="live2d" class="live2d"/>
<!-- 工具栏 -->
<div class="waifu-tool">
<p class="fui-home">
<i class="el-icon-s-home"/>
</p>
<p class="fui-chat">
<i class="el-icon-upload"/>
</p>
<p class="fui-eye">
<i class="el-icon-share"/>
</p>
<p class="fui-user">
<i class="el-icon-warning"/>
</p>
<p class="fui-photo">
<i class="el-icon-camera-solid"/>
</p>
<p class="fui-info-circle">
<i class="el-icon-s-comment"/>
</p>
<p class="fui-cross">
<i class="el-icon-error"/>
</p>
</div>
</div>
</div>
</template>
<script>
import '@/assets/live2d/waifu-tips'
import '@/assets/live2d/live2d'
import '@/assets/live2d/waifu.css'
import { initModel } from '@/assets/live2d/waifu-tips'
export default {
name: 'PhyLive2d',
components: {
},
data() {
return {
}
},
mounted () {
live2d_settings['modelId'] = 5; // 默认模型 ID
live2d_settings['modelTexturesId'] = 1; // 默认材质 ID
/* 在 initModel 前添加 */
initModel(require("@/assets/live2d/waifu-tips.json"))
},
methods: {
}
}
</script>
<style scoped>
.waifu-tool p i {
cursor: pointer;
}
</style>
第四步)
在App.vue中引入这个index组件
这样就添加成功了!
其中waifu-tips.js中可以对配置项进行修改
在waifu-tips.json中可以对看板娘的交互信息进行修改
链接在下方
链接:https://pan.baidu.com/s/1yqD4n6lK4l1lefsF8WgQHw
提取码:qwer
有问题的可以在下方评论联系,记住看清层级目录,一般来说是没问题的。
更多推荐
已为社区贡献2条内容
所有评论(0)