d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-24 23:16:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feature:

Browse Source 
手动引入live2D
This commit is contained in:
tangly1024
2021-12-28 14:47:00 +08:00
parent fefb85da1e
commit bee7fafcda
3 changed files with 74 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
components/Live2D.js
View File

@@ -1,4 +1,4 @@
import Head from 'next/head'
/* eslint-disable no-undef */
import { useEffect } from 'react'
export default function Live2D () {
@@ -7,16 +7,12 @@ export default function Live2D () {
initLive2D()
}
})
return <>
<Head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/></Head>
</>
return <div className='animate__fadeIn animate__bounceInUp'>
<canvas id="live2d" width="280" height="250"></canvas>
</div>
}
function initLive2D () {
// 注意：live2d_path 参数应使用绝对路径
const live2dPath = 'https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/'
// const live2d_path = "/live2d-widget/";
// 封装异步加载资源的方法
function loadExternalResource (url, type) {
return new Promise((resolve, reject) => {
@@ -41,19 +37,11 @@ function initLive2D () {
// 加载 waifu.css live2d.min.js waifu-tips.js
if (screen.width >= 768) {
Promise.all([
loadExternalResource(live2dPath + 'waifu.css', 'css'),
loadExternalResource(live2dPath + 'live2d.min.js', 'js'),
loadExternalResource(live2dPath + 'waifu-tips.js', 'js')
// loadExternalResource('https://cdn.zhangxinxu.com/sp/demo/live2d/live2d/js/live2d.js', 'js')
loadExternalResource('https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/live2d.min.js', 'js')
]).then(() => {
// eslint-disable-next-line no-undef
initWidget({
waifuPath: live2dPath + 'waifu-tips.json',
// apiPath: "https://live2d.fghrsh.net/api/",
cdnPath: 'https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/'
})
// https://github.com/xiazeyu/live2d-widget-models
loadlive2d('live2d', 'https://raw.githubusercontent.com/xiazeyu/live2d-widget-models/master/packages/live2d-widget-model-wanko/assets/wanko.model.json')
})
}
// initWidget 第一个参数为 waifu-tips.json 的路径，第二个参数为 API 地址
// API 后端可自行搭建，参考 https://github.com/fghrsh/live2d_api
// 初始化看板娘会自动加载指定目录下的 waifu-tips.json
}