mirror of
https://github.com/Buriburizaem0n/live2d.git
synced 2026-02-04 11:30:02 +00:00
changed size of models
This commit is contained in:
@@ -15,47 +15,77 @@
|
|||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- 创建一个 canvas 元素来承载 Live2D 模型 -->
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||||
<canvas id="canvas" width='800' height="800"></canvas>
|
<!--宠物播放器-->
|
||||||
|
<script>
|
||||||
<!-- 引入 PixiJS 和 pixi-live2d-display -->
|
const live2d_path = "./";
|
||||||
<script src="https://www.luoyangdonghui.de/wp-content/uploads/live2d_test16/live2d/live2d.min.js"></script>
|
</script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/live2dcubismcore@1.0.2/live2dcubismcore.min.js"></script>
|
<!-- <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.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/live2dcubismcore@1.0.2/live2dcubismcore.min.js"></script> -->
|
||||||
<script src="https://unpkg.com/pixi-live2d-display@latest/dist/index.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>
|
<script>
|
||||||
// 引入 PixiJS 和 Live2D 显示插件
|
//封装异步加载资源的方法
|
||||||
// import * as PIXI from 'pixi.js';
|
function loadExternalResource(url, type) {
|
||||||
// import { Live2DModel } from 'pixi-live2d-display';
|
return new Promise((resolve, reject) => {
|
||||||
|
let tag;
|
||||||
|
|
||||||
// 将 PIXI 暴露到全局，以便插件能引用 window.PIXI.Ticker 进行更新
|
if (type === "css") {
|
||||||
window.PIXI = PIXI;
|
tag = document.createElement("link");
|
||||||
|
tag.rel = "stylesheet";
|
||||||
|
tag.href = url;
|
||||||
|
} else if (type === "js") {
|
||||||
|
tag = document.createElement("script");
|
||||||
|
tag.src = url;
|
||||||
|
tag.async = true; // 确保脚本是异步加载的
|
||||||
|
}
|
||||||
|
|
||||||
(async function () {
|
if (tag) {
|
||||||
// 创建一个 PIXI 应用程序并将其绑定到页面上的 canvas 元素
|
tag.onload = () => {
|
||||||
const app = new PIXI.Application({
|
resolve(`Resource loaded: ${url}`);
|
||||||
view: document.getElementById('canvas'),
|
};
|
||||||
});
|
|
||||||
|
|
||||||
// 加载 Live2D 模型（确保 'shizuku.model.json' 在正确的路径中）
|
tag.onerror = (error) => {
|
||||||
const model = await PIXI.live2d.Live2DModel.from('./model/pichu/index.json');
|
reject(new Error(`Failed to load resource: ${url} - ${error.message}`));
|
||||||
|
};
|
||||||
|
|
||||||
// 将模型添加到应用的舞台
|
// 确保只在没有相同资源的情况下加载，避免重复加载
|
||||||
app.stage.addChild(model);
|
if (!document.head.querySelector(`[src="${url}"]`) && !document.head.querySelector(`[href="${url}"]`)) {
|
||||||
|
document.head.appendChild(tag);
|
||||||
// 设置模型的初始位置、旋转、缩放和锚点
|
} else {
|
||||||
model.x = 300;
|
resolve(`Resource already loaded: ${url}`);
|
||||||
model.y = 500;
|
}
|
||||||
model.rotation = Math.PI;
|
} else {
|
||||||
model.skew.x = Math.PI;
|
reject(new Error(`Invalid resource type: ${type}`));
|
||||||
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');
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
})();
|
}
|
||||||
|
|
||||||
|
|
||||||
|
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>
|
</script>
|
||||||
|
|||||||
@@ -204,38 +204,15 @@ function loadWidget() {
|
|||||||
modelList = result;
|
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) {
|
async function loadModel(modelId, modelTexturesId, message) {
|
||||||
localStorage.setItem("modelId", modelId);
|
localStorage.setItem("modelId", modelId);
|
||||||
localStorage.setItem("modelTexturesId", modelTexturesId);
|
localStorage.setItem("modelTexturesId", modelTexturesId);
|
||||||
showMessage(message, 4000, 10);
|
showMessage(message, 4000, 10);
|
||||||
|
|
||||||
if (!modelList) await loadModelList();
|
if (!modelList) await loadModelList();
|
||||||
let target = modelList.models_json_path[modelId];
|
let target = modelList.models_json_path[modelId];
|
||||||
|
// loadlive2d("live2d", `${live2d_path}model/${target}/index.json`);
|
||||||
// 模型路径
|
loadModelPixi("live2d", `${live2d_path}model/${target}`);
|
||||||
const modelPath = `${live2d_path}model/${target}`;
|
console.log(`Live2D 模型 ${modelId}-${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 文件`);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function loadNextModel() {
|
async function loadNextModel() {
|
||||||
|
|||||||
@@ -90,9 +90,9 @@
|
|||||||
|
|
||||||
#waifu #live2d {
|
#waifu #live2d {
|
||||||
cursor: grab;
|
cursor: grab;
|
||||||
height: 250px;
|
height: 280px;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 250px;
|
width: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#waifu #live2d:active {
|
#waifu #live2d:active {
|
||||||
|
|||||||
Reference in New Issue
Block a user