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

changed size of models

Browse Source
This commit is contained in:
Buriburi
2024-09-20 12:36:55 +02:00
parent a1d7831bf0
commit 087117eb06
3 changed files with 79 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
live2d/test1.html
View File

@@ -15,47 +15,77 @@
</style>
</head>
<body>
<!-- 创建一个 canvas 元素来承载 Live2D 模型 -->
<canvas id="canvas" width='800' height="800"></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('./model/pichu/index.json');
// 将模型添加到应用的舞台
app.stage.addChild(model);
// 设置模型的初始位置、旋转、缩放和锚点
model.x = 300;
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 src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!--宠物播放器-->
<script>
const live2d_path = "./";
</script>
<!-- <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/live2dcubismcore@1.0.2/live2dcubismcore.min.js"></script> -->
<script src="./live2d.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.5.2/browser/pixi.min.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display@latest/dist/index.min.js"></script> -->
<!-- <script src="./waifu-tips.js"></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;
tag.async = true; // 确保脚本是异步加载的
}
if (tag) {
tag.onload = () => {
resolve(`Resource loaded: ${url}`);
};
tag.onerror = (error) => {
reject(new Error(`Failed to load resource: ${url} - ${error.message}`));
};
// 确保只在没有相同资源的情况下加载，避免重复加载
if (!document.head.querySelector(`[src="${url}"]`) && !document.head.querySelector(`[href="${url}"]`)) {
document.head.appendChild(tag);
} else {
resolve(`Resource already loaded: ${url}`);
}
} else {
reject(new Error(`Invalid resource type: ${type}`));
}
});
}
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/live2dcubismcore@1.0.2/live2dcubismcore.min.js", "js"),
loadExternalResource("https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.5.2/browser/pixi.min.js", "js"),
loadExternalResource("https://cdn.jsdelivr.net/npm/pixi-live2d-display@latest/dist/index.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>
</script>

31
live2d/waifu-tips.js
View File

@@ -204,40 +204,17 @@ function loadWidget() {
modelList = result;
}
// async function loadModel(modelId, modelTexturesId, message) {
// localStorage.setItem("modelId", modelId);
// localStorage.setItem("modelTexturesId", modelTexturesId);
// showMessage(message, 4000, 10);
// if (!modelList) await loadModelList();
// let target = modelList.models[modelId];
// // loadlive2d("live2d", `${live2d_path}model/${target}/index.json`);
// loadModelPixi("live2d", `${live2d_path}model/${target}/index.json`);
// console.log(`Live2D 模型 ${modelId}-${target} 加载完成`);
// }
async function loadModel(modelId, modelTexturesId, message) {
localStorage.setItem("modelId", modelId);
localStorage.setItem("modelTexturesId", modelTexturesId);
showMessage(message, 4000, 10);
if (!modelList) await loadModelList();
let target = modelList.models_json_path[modelId];
// 模型路径
const modelPath = `${live2d_path}model/${target}`;
// 使用正则表达式判断文件名
if (/index3\.json$/.test(modelPath)) {
// 如果文件名为 index3.json，则使用 loadModelPixi
loadModelPixi("live2d", modelPath);
console.log(`使用 Pixi 加载 Live2D 模型 ${modelId}-${target} 的 index3.json 文件`);
} else {
// 否则使用 loadlive2d 加载 index.json
loadlive2d("live2d", modelPath);
console.log(`使用 Live2D 加载模型 ${modelId}-${target} 的 index.json 文件`);
}
// loadlive2d("live2d", `${live2d_path}model/${target}/index.json`);
loadModelPixi("live2d", `${live2d_path}model/${target}`);
console.log(`Live2D 模型 ${modelId}-${target} 加载完成`);
}
async function loadNextModel() {
let modelId = localStorage.getItem("modelId");
if (!modelList) await loadModelList();

4
live2d/waifu.css
View File

@@ -90,9 +90,9 @@
#waifu #live2d {
cursor: grab;
height: 250px;
height: 280px;
position: relative;
width: 250px;
width: 300px;
}
#waifu #live2d:active {