---
categories: Original
date: "2023-06-15T00:00:00Z"
description: 十四行诗是由深蓝互动所制作的游戏《重返未来：1999》及其衍生作品的登场角色。—— moegirl.org.cn
tags:
    - JavaScript
    - 前端
    - 重返未来：1999
    - 逆向工程
slug: shisihangshi
title: 十四行诗
---

<script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
<script src="https://fastly.jsdelivr.net/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/pixi.js@6.5.2/dist/browser/pixi.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/pixi-live2d-display/dist/index.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/pixi-live2d-display/dist/extra.min.js"></script>

<canvas id="canvas"></canvas>

<script>
    const cubism4Model = "302301_shisihangshi/302301_shisihangshi.model3.json";

    const live2d = PIXI.live2d;

    (async function main() {
        const app = new PIXI.Application({
            view: document.getElementById("canvas"),
            autoStart: true,
            resizeTo: window,
            backgroundColor: 0x333333,
        });

        const models = await Promise.all([
            live2d.Live2DModel.from(cubism4Model),
        ]);

        models.forEach((model) => {
            app.stage.addChild(model);

            const scaleX = innerWidth / model.width;
            const scaleY = innerHeight / model.height;

            // fit the window
            model.scale.set(Math.min(scaleX, scaleY));

            model.y = innerHeight * 0.4;

            draggable(model);
        });

        const model4 = models[0];

        model4.on("pointerdown", (hitAreas) => {
            model4.motion("PlayTrick");
        });
    })();

    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));
    }
</script>