Spaces:
Running
on
Zero
Running
on
Zero
File size: 2,641 Bytes
766f691 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
//appをindex.jsで使いたいのでスコープを外しています。
var app;
// PixiJS
var {
Application, live2d: { Live2DModel }
} = PIXI;
// Kalidokit
var {
Face, Vector: { lerp }, Utils: { clamp }
} = Kalidokit;
// 1, Live2Dモデルへのパスを指定する
var modelUrl = "./Hiyori/Hiyori.model3.json";
var currentModel;
// メインの処理開始
(async function main() {
// 2, PixiJSを準備する
app = new PIXI.Application({
view: document.getElementById("my-live2d"),
autoStart: true,
backgroundAlpha: 0,
backgroundColor: 0x0000ff,
resizeTo: window
});
// 3, Live2Dモデルをロードする
currentModel = await Live2DModel.from(modelUrl, { autoInteract: false });
currentModel.scale.set(0.5);//モデルの大きさ★
currentModel.interactive = true;
currentModel.anchor.set(0.5, 0.5);//モデルのアンカー★
currentModel.position.set(window.innerWidth/2, window.innerHeight);//モデルの位置★
// 4, Live2Dモデルをドラッグ可能にする
currentModel.on("pointerdown", e => {
currentModel.offsetX = e.data.global.x - currentModel.position.x;
currentModel.offsetY = e.data.global.y - currentModel.position.y;
currentModel.dragging = true;
});
currentModel.on("pointerup", e => {
currentModel.dragging = false;
var updateFn = currentModel.internalModel.motionManager.update;
var coreModel = currentModel.internalModel.coreModel;
//モーション周りのパスcurrentModel.internalModel.motionManager.startMotion('TapBody', 0,2);
});
currentModel.on("pointermove", e => {
if (currentModel.dragging) {
currentModel.position.set(
e.data.global.x - currentModel.offsetX,
e.data.global.y - currentModel.offsetY
);
}
});
// 5, Live2Dモデルを拡大/縮小可能に(マウスホイール) #my-live2dはcanvasのidにして下さい
document.querySelector("#my-live2d").addEventListener("wheel", e => {
e.preventDefault();
currentModel.scale.set(
clamp(currentModel.scale.x + event.deltaY * -0.001, -0.5, 10)
);
});
//背景を設定./background.jpgを画像のパスに書きかえて下さい
let background = PIXI.Sprite.fromImage('./background.jpg');
background.anchor.set(0.5);
background.x = app.screen.width / 2;
background.y = app.screen.height / 2;
background.height = app.screen.height;
background.width = app.screen.width;
app.stage.addChild(background);
// 6, Live2Dモデルを配置する
app.stage.addChild(currentModel);
})();
|