buri/live2d
1
0
Fork 0
mirror of https://github.com/Buriburizaem0n/live2d.git synced 2025-12-15 07:31:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

final edition

Browse Source
This commit is contained in:
Buriburi
2024-09-20 02:20:26 +02:00
parent cc4d2d8efa
commit 05c9ec6c88
6 changed files with 312 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
live2d/<!-- 宠物播放器 --> Normal file
View File

@@ -0,0 +1,67 @@
<!-- 宠物播放器 -->
<script src="https://cdn.jsdelivr.net/npm/live2dcubismcore@1.0.2/live2dcubismcore.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@7.x/dist/pixi.min.js"></script>
<script>
const live2d_path = "https://www.luoyangdonghui.de/wp-content/uploads/live2d_test16/live2d/";
</script>
<meting-js server="netease" type="playlist" id="2142063878" theme="#339981" fixed="true" preload="none" autoplay="false" loop="all" volume="0.3" order="random" mutex="true"></meting-js>;
<script>
// 封装异步加载资源的方法
function loadExternalResource(url, type, scriptType = null) {
return new Promise((resolve, reject) => {
let tag;
if (type === "css") {
tag = document.createElement("link");
tag.rel = "stylesheet";
tag.href = url;
tag.type = "text/css"; // 添加 CSS 类型
} else if (type === "js") {
tag = document.createElement("script");
tag.src = url;
// 如果 scriptType 存在，则为 <script> 添加 type 属性
if (scriptType) {
tag.type = scriptType; // 如 "module" 或 "text/javascript"
}
}
tag.onload = () => resolve(url);
tag.onerror = () => reject(new Error(`Failed to load resource: ${url}`));
// 将标签追加到 <head> 中
document.head.appendChild(tag);
});
}
// 手机和电脑都加载的音乐播放器相关资源
Promise.all([
loadExternalResource("https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css", "css"),
loadExternalResource("https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js", "js"),
]).then(() => {
loadExternalResource("https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js", "js");
});
ap = null;
Object.defineProperty(document.querySelector('meting-js'), "aplayer", {
set: function(aplayer) {
ap = aplayer;
ap_init();
initWidget();
}
});
// 只有电脑加载Live2D模块
if (screen.width >= 768) {
Promise.all([
loadExternalResource(live2d_path + "waifu.css", "css"),
loadExternalResource(live2d_path + "live2d.min.js", "js"),
loadExternalResource(live2d_path + "waifu-tips.js", "js", "module")
]);
}
</script>

45
live2d/<!--宠物播放器--> Normal file
View File

@@ -0,0 +1,45 @@
<!--宠物播放器-->
<script>const live2d_path = "https://cdn.jsdelivr.net/gh/crowya/live2d/live2d/";</script>
<meting-js server="tencent" type="playlist" id="8559460487" theme="#339981" fixed="true" preload="none" autoplay="false" loop="all" order="random" volume="0.3"></meting-js>
<script>
//封装异步加载资源的方法
function loadExternalResource(url, type) {
return new Promise((resolve, reject) => {
let tag;
if (type === "css") {
tag = document.createElement("link");
tag.rel = "stylesheet";
tag.href = url;
}
else if (type === "js") {
tag = document.createElement("script");
tag.src = url;
}
if (tag) {
tag.onload = () => resolve(url);
tag.onerror = () => reject(url);
document.head.appendChild(tag);
}
});
}
if (screen.width >= 768) {
Promise.all([
loadExternalResource("https://cdn.jsdelivr.net/gh/crowya/live2d/live2d/waifu.min.css", "css"),
loadExternalResource("https://cdn.jsdelivr.net/gh/crowya/live2d/live2d/live2d.min.js", "js"),
loadExternalResource("https://cdn.jsdelivr.net/gh/crowya/live2d/live2d/waifu-tips.min.js", "js"),
loadExternalResource("https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css", "css"),
loadExternalResource("https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js", "js"),
]).then(() => {
loadExternalResource("https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js", "js");
});
ap = null;
Object.defineProperty(document.querySelector('meting-js'), "aplayer", {
set: function(aplayer) {
ap = aplayer;
ap_init();
initWidget();
}
});
}
</script>

52
live2d/<!--宠物播放器-->.lua Normal file
View File

@@ -0,0 +1,52 @@
<!--宠物播放器-->
<script src="https://www.luoyangdonghui.de/wp-content/uploads/live2d_test16/live2d/live2d.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/live2dcubismcore@1.0.2/live2dcubismcore.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display@beta/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@7.x/dist/pixi.min.js"></script>
<script>
const live2d_path = "https://www.luoyangdonghui.de/wp-content/uploads/live2d_test16/live2d/";
</script>
<meting-js server="netease" type="playlist" id="2142063878" theme="#339981" fixed="true" preload="none" autoplay="false" loop="all" volume="0.3" order="random" mutex="true"></meting-js>;
<script>
//封装异步加载资源的方法
function loadExternalResource(url, type) {
return new Promise((resolve, reject) => {
let tag;
if (type === "css") {
tag = document.createElement("link");
tag.rel = "stylesheet";
tag.href = url;
}
else if (type === "js") {
tag = document.createElement("script");
tag.src = url;
}
if (tag) {
tag.onload = () => resolve(url);
tag.onerror = () => reject(url);
document.head.appendChild(tag);
}
});
}
if (screen.width >= 768) {
Promise.all([
loadExternalResource(live2d_path + "waifu.css", "css"),
loadExternalResource(live2d_path + "live2d.min.js", "js"),
loadExternalResource(live2d_path + "waifu-tips.js", "js"),
loadExternalResource("https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css", "css"),
loadExternalResource("https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js", "js"),
]).then(() => {
loadExternalResource("https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js", "js");
});
ap = null;
Object.defineProperty(document.querySelector('meting-js'), "aplayer", {
set: function(aplayer) {
ap = aplayer;
ap_init();
initWidget();
}
});
}
</script>

86
live2d/test.html Normal file
View File

@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live2D Pet and Music Player</title>
<style>
/* 简单的样式来隐藏宠物 */
.my-hide {
display: none;
}
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Live2D 宠物播放器与音乐播放器</h1>
<!-- 宠物播放器与Metting -->
<meting-js server="netease" type="playlist" id="2142063878" theme="#339981" fixed="true" preload="none" autoplay="false" loop="all" volume="0.3" order="random" mutex="true"></meting-js>
<script>src="https://cdn.jsdelivr.net/npm/live2dcubismcore@1.0.2/live2dcubismcore.min.js"</script>
<script>
const live2d_path = "https://www.luoyangdonghui.de/wp-content/uploads/live2d_test16/live2d/";
// 封装异步加载资源的方法
function loadExternalResource(url, type) {
return new Promise((resolve, reject) => {
let tag;
if (type === "css") {
tag = document.createElement("link");
tag.rel = "stylesheet";
tag.href = url;
}
else if (type === "js") {
tag = document.createElement("script");
tag.src = url;
}
if (tag) {
tag.onload = () => resolve(url);
tag.onerror = () => reject(url);
document.head.appendChild(tag);
}
});
}
// 初始化宠物播放器
function ap_init() {
console.log('宠物播放器初始化');
// 示例逻辑，可以根据实际情况调整
ap.lrc.hide(); // 初始化时隐藏歌词
ap.on('play', () => ap.lrc.show()); // 播放时显示歌词
ap.on('pause', () => ap.lrc.hide()); // 暂停时隐藏歌词
}
function initWidget() {
console.log("Widget Initialized");
}
if (screen.width >= 768) {
Promise.all([
loadExternalResource(live2d_path + "waifu.css", "css"),
loadExternalResource(live2d_path + "live2d.min.js", "js"),
loadExternalResource(live2d_path + "waifu-tips.js", "js"),
loadExternalResource("https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css", "css"),
loadExternalResource("https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js", "js"),
loadExternalResource("https://cdn.jsdelivr.net/npm/pixi.js@7.x/dist/pixi.min.js", "js"),
loadExternalResource("https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/index.js", "js"),
]).then(() => {
loadExternalResource("https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js", "js");
});
let ap = null;
Object.defineProperty(document.querySelector('meting-js'), "aplayer", {
set: function(aplayer) {
ap = aplayer;
ap_init(); // 初始化宠物播放器
initWidget(); // 初始化 Widget
}
});
}
</script>
</body>
</html>

61
live2d/test1.html Normal file
View File

@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live2D Test</title>
<style>
body {
margin: 0;
overflow: hidden;
}
canvas {
display: block;
}
</style>
</head>
<body>
<!-- 创建一个 canvas 元素来承载 Live2D 模型 -->
<canvas id="canvas"></canvas>
<!-- 引入 PixiJS 和 pixi-live2d-display -->
<script src="https://www.luoyangdonghui.de/wp-content/uploads/live2d_test16/live2d/live2d.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/live2dcubismcore@1.0.2/live2dcubismcore.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.5.2/browser/pixi.min.js"></script>
<script src="https://unpkg.com/pixi-live2d-display@latest/dist/index.min.js"></script>
<script>
// 引入 PixiJS 和 Live2D 显示插件
// import * as PIXI from 'pixi.js';
// import { Live2DModel } from 'pixi-live2d-display';
// 将 PIXI 暴露到全局，以便插件能引用 window.PIXI.Ticker 进行更新
window.PIXI = PIXI;
(async function () {
// 创建一个 PIXI 应用程序并将其绑定到页面上的 canvas 元素
const app = new PIXI.Application({
view: document.getElementById('canvas'),
});
// 加载 Live2D 模型（确保 'shizuku.model.json' 在正确的路径中）
const model = await PIXI.live2d.Live2DModel.from('https://www.luoyangdonghui.de/wp-content/uploads/live2d_test16/live2d/model/pichu/index.json');
// 将模型添加到应用的舞台
app.stage.addChild(model);
// 设置模型的初始位置、旋转、缩放和锚点
model.x = 200;
model.y = 500;
model.rotation = Math.PI;
model.skew.x = Math.PI;
model.scale.set(0.5, 0.5);
model.anchor.set(0.5, 0.5);
// 模型的交互事件，当点击模型身体时触发动作
model.on('hit', (hitAreas) => {
if (hitAreas.includes('body')) {
model.motion('tap_body');
}
});
})();
</script>

2
live2d/waifu-tips.js
View File

@@ -228,7 +228,7 @@ function loadWidget() {
view: element,
transparent: true,
});
const model = await Live2DModel.from(jsonpath);
const model = await PIXI.live2d.Live2DModel.from(jsonpath);
app.stage.addChild(model);