fixed size

This commit is contained in:
2024-09-21 00:50:49 +02:00
parent 11f8b42b79
commit a7ec470da1
3 changed files with 92 additions and 56 deletions

View File

@@ -44752,32 +44752,6 @@
transparent: true,
resizeTo: window
});
const model = await Live2DModel.from(jsonpath);
app.stage.addChild(model);
const parentWidth = element.width;
const parentHeight = element.height;
// Scale to fit the stage
const ratio = Math.min(
parentWidth / model.width,
parentHeight / model.height
);
model.scale.set(ratio, ratio);
// Align bottom and center horizontally
model.x = (parentWidth - model.width) / 2;
model.y = parentHeight - model.height;
// read json file to find motion groups
let modelJson = await readJSON(`${jsonpath}`);
// change expression after click on model
model.on("pointerdown", () => {
model.expression();
if (modelJson.motions) {
const motionGroup = Object.keys(modelJson.motions)[Math.floor(Math.random() * Object.keys(modelJson.motions).length)];
model.motion(motionGroup);
}
});
// function to read json file
function readJSON(path) {
@@ -44788,6 +44762,50 @@
.catch(error => reject(error));
});
}
function draggable(model) {
model.buttonMode = true;
model.on("pointerdown", (e) => {
model.dragging = true;
model._pointerX = e.data.global.x - model.x;
model._pointerY = e.data.global.y - model.y;
});
model.on("pointermove", (e) => {
if (model.dragging) {
model.position.x = e.data.global.x - model._pointerX;
model.position.y = e.data.global.y - model._pointerY;
}
});
model.on("pointerupoutside", () => (model.dragging = false));
model.on("pointerup", () => (model.dragging = false));
}
const model = await Live2DModel.from(jsonpath);
app.stage.addChild(model);
const parentWidth = element.width;
const parentHeight = element.height;
// Scale to fit the stage
const ratio = Math.min(
parentWidth / model.width,
parentHeight / model.height
);
model.scale.set(ratio, ratio);
// Align bottom and center horizontally
model.x = (parentWidth - model.width) / 2;
model.y = parentHeight - model.height;
draggable(model);
// read json file to find motion groups
let modelJson = await readJSON(`${jsonpath}`);
// change expression after click on model
model.on("pointerdown", () => {
model.expression();
if (modelJson.motions) {
const motionGroup = Object.keys(modelJson.motions)[Math.floor(Math.random() * Object.keys(modelJson.motions).length)];
model.motion(motionGroup);
}
});
}
}

View File

@@ -232,32 +232,6 @@ function loadWidget() {
transparent: true,
resizeTo: window
});
const model = await Live2DModel.from(jsonpath);
app.stage.addChild(model);
const parentWidth = element.width;
const parentHeight = element.height;
// Scale to fit the stage
const ratio = Math.min(
parentWidth / model.width,
parentHeight / model.height
);
model.scale.set(ratio, ratio);
// Align bottom and center horizontally
model.x = (parentWidth - model.width) / 2;
model.y = parentHeight - model.height;
// read json file to find motion groups
let modelJson = await readJSON(`${jsonpath}`);
// change expression after click on model
model.on("pointerdown", () => {
model.expression();
if (modelJson.motions) {
const motionGroup = Object.keys(modelJson.motions)[Math.floor(Math.random() * Object.keys(modelJson.motions).length)];
model.motion(motionGroup);
}
});
// function to read json file
function readJSON(path) {
@@ -268,6 +242,50 @@ function loadWidget() {
.catch(error => reject(error));
});
}
function draggable(model) {
model.buttonMode = true;
model.on("pointerdown", (e) => {
model.dragging = true;
model._pointerX = e.data.global.x - model.x;
model._pointerY = e.data.global.y - model.y;
});
model.on("pointermove", (e) => {
if (model.dragging) {
model.position.x = e.data.global.x - model._pointerX;
model.position.y = e.data.global.y - model._pointerY;
}
});
model.on("pointerupoutside", () => (model.dragging = false));
model.on("pointerup", () => (model.dragging = false));
}
const model = await Live2DModel.from(jsonpath);
app.stage.addChild(model);
const parentWidth = element.width;
const parentHeight = element.height;
// Scale to fit the stage
const ratio = Math.min(
parentWidth / model.width,
parentHeight / model.height
);
model.scale.set(ratio, ratio);
// Align bottom and center horizontally
model.x = (parentWidth - model.width) / 2;
model.y = parentHeight - model.height;
draggable(model);
// read json file to find motion groups
let modelJson = await readJSON(`${jsonpath}`);
// change expression after click on model
model.on("pointerdown", () => {
model.expression();
if (modelJson.motions) {
const motionGroup = Object.keys(modelJson.motions)[Math.floor(Math.random() * Object.keys(modelJson.motions).length)];
model.motion(motionGroup);
}
});
}
}

View File

@@ -42,7 +42,8 @@
position: fixed;
transform: translateY(3px);
transition: transform .3s ease-in-out, bottom 3s ease-in-out;
z-index: 1;
width: 25%;
height: 25%;
}
#waifu:hover {
@@ -98,10 +99,9 @@
#waifu #live2d {
cursor: grab;
height: 280px;
height: 100%;
position: relative;
width: 330px;
/* z-index: -1; */
width: 100%;
}
#waifu #live2d:active {