skinview3d-node 3.4.2-node.1

package/libs/skinview3d.mjs

@@ -0,0 +1,2898 @@
+import { Image, Canvas, FontLibrary } from 'skia-canvas';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+import { Group, MeshStandardMaterial, FrontSide, DoubleSide, BoxGeometry, Mesh, Vector2, DataTexture, RGBAFormat, OrthographicCamera, BufferGeometry, Float32BufferAttribute, ShaderMaterial, UniformsUtils, WebGLRenderTarget, HalfFloatType, NoBlending, Clock, Color, Sprite, SpriteMaterial, NearestFilter, AmbientLight, PointLight, Scene, PerspectiveCamera, ColorManagement, WebGLRenderer, LinearFilter, UnsignedByteType, EquirectangularReflectionMapping, Texture, Object3D, Quaternion, Vector3 } from 'three';
+import { PNG } from 'pngjs';
+import gl from 'gl';
+
+function setUVs(box, u, v, width, height, depth, textureWidth, textureHeight) {
+    const toFaceVertices = (x1, y1, x2, y2) => [
+        new Vector2(x1 / textureWidth, 1.0 - y2 / textureHeight),
+        new Vector2(x2 / textureWidth, 1.0 - y2 / textureHeight),
+        new Vector2(x2 / textureWidth, 1.0 - y1 / textureHeight),
+        new Vector2(x1 / textureWidth, 1.0 - y1 / textureHeight)
+    ];
+    const top = toFaceVertices(u + depth, v, u + width + depth, v + depth);
+    const bottom = toFaceVertices(u + width + depth, v, u + width * 2 + depth, v + depth);
+    const left = toFaceVertices(u, v + depth, u + depth, v + depth + height);
+    const front = toFaceVertices(u + depth, v + depth, u + width + depth, v + depth + height);
+    const right = toFaceVertices(u + width + depth, v + depth, u + width + depth * 2, v + height + depth);
+    const back = toFaceVertices(u + width + depth * 2, v + depth, u + width * 2 + depth * 2, v + height + depth);
+    const uvAttr = box.attributes.uv;
+    const uvRight = [right[3], right[2], right[0], right[1]];
+    const uvLeft = [left[3], left[2], left[0], left[1]];
+    const uvTop = [top[3], top[2], top[0], top[1]];
+    const uvBottom = [bottom[0], bottom[1], bottom[3], bottom[2]];
+    const uvFront = [front[3], front[2], front[0], front[1]];
+    const uvBack = [back[3], back[2], back[0], back[1]];
+    // Create a new array to hold the modified UV data
+    const newUVData = [];
+    // Iterate over the arrays and copy the data to uvData
+    for (const uvArray of [uvRight, uvLeft, uvTop, uvBottom, uvFront, uvBack]) {
+        for (const uv of uvArray) {
+            newUVData.push(uv.x, uv.y);
+        }
+    }
+    uvAttr.set(new Float32Array(newUVData));
+    uvAttr.needsUpdate = true;
+}
+function setSkinUVs(box, u, v, width, height, depth) {
+    setUVs(box, u, v, width, height, depth, 64, 64);
+}
+function setCapeUVs(box, u, v, width, height, depth) {
+    setUVs(box, u, v, width, height, depth, 64, 32);
+}
+/**
+ * Notice that innerLayer and outerLayer may NOT be the direct children of the Group.
+ */
+class BodyPart extends Group {
+    innerLayer;
+    outerLayer;
+    constructor(innerLayer, outerLayer) {
+        super();
+        this.innerLayer = innerLayer;
+        this.outerLayer = outerLayer;
+        innerLayer.name = 'inner';
+        outerLayer.name = 'outer';
+    }
+}
+class SkinObject extends Group {
+    // body parts
+    head;
+    body;
+    rightArm;
+    leftArm;
+    rightLeg;
+    leftLeg;
+    modelListeners = []; // called when model(slim property) is changed
+    slim = false;
+    _map = null;
+    layer1Material;
+    layer1MaterialBiased;
+    layer2Material;
+    layer2MaterialBiased;
+    constructor() {
+        super();
+        this.layer1Material = new MeshStandardMaterial({
+            side: FrontSide
+        });
+        this.layer2Material = new MeshStandardMaterial({
+            side: DoubleSide,
+            transparent: true,
+            alphaTest: 1e-5
+        });
+        this.layer1MaterialBiased = this.layer1Material.clone();
+        this.layer1MaterialBiased.polygonOffset = true;
+        this.layer1MaterialBiased.polygonOffsetFactor = 1.0;
+        this.layer1MaterialBiased.polygonOffsetUnits = 1.0;
+        this.layer2MaterialBiased = this.layer2Material.clone();
+        this.layer2MaterialBiased.polygonOffset = true;
+        this.layer2MaterialBiased.polygonOffsetFactor = 1.0;
+        this.layer2MaterialBiased.polygonOffsetUnits = 1.0;
+        // Head
+        const headBox = new BoxGeometry(8, 8, 8);
+        setSkinUVs(headBox, 0, 0, 8, 8, 8);
+        const headMesh = new Mesh(headBox, this.layer1Material);
+        const head2Box = new BoxGeometry(9, 9, 9);
+        setSkinUVs(head2Box, 32, 0, 8, 8, 8);
+        const head2Mesh = new Mesh(head2Box, this.layer2Material);
+        this.head = new BodyPart(headMesh, head2Mesh);
+        this.head.name = 'head';
+        this.head.add(headMesh, head2Mesh);
+        headMesh.position.y = 4;
+        head2Mesh.position.y = 4;
+        this.add(this.head);
+        // Body
+        const bodyBox = new BoxGeometry(8, 12, 4);
+        setSkinUVs(bodyBox, 16, 16, 8, 12, 4);
+        const bodyMesh = new Mesh(bodyBox, this.layer1Material);
+        const body2Box = new BoxGeometry(8.5, 12.5, 4.5);
+        setSkinUVs(body2Box, 16, 32, 8, 12, 4);
+        const body2Mesh = new Mesh(body2Box, this.layer2Material);
+        this.body = new BodyPart(bodyMesh, body2Mesh);
+        this.body.name = 'body';
+        this.body.add(bodyMesh, body2Mesh);
+        this.body.position.y = -6;
+        this.add(this.body);
+        // Right Arm
+        const rightArmBox = new BoxGeometry();
+        const rightArmMesh = new Mesh(rightArmBox, this.layer1MaterialBiased);
+        this.modelListeners.push(() => {
+            rightArmMesh.scale.x = this.slim ? 3 : 4;
+            rightArmMesh.scale.y = 12;
+            rightArmMesh.scale.z = 4;
+            setSkinUVs(rightArmBox, 40, 16, this.slim ? 3 : 4, 12, 4);
+        });
+        const rightArm2Box = new BoxGeometry();
+        const rightArm2Mesh = new Mesh(rightArm2Box, this.layer2MaterialBiased);
+        this.modelListeners.push(() => {
+            rightArm2Mesh.scale.x = this.slim ? 3.5 : 4.5;
+            rightArm2Mesh.scale.y = 12.5;
+            rightArm2Mesh.scale.z = 4.5;
+            setSkinUVs(rightArm2Box, 40, 32, this.slim ? 3 : 4, 12, 4);
+        });
+        const rightArmPivot = new Group();
+        rightArmPivot.add(rightArmMesh, rightArm2Mesh);
+        this.modelListeners.push(() => {
+            rightArmPivot.position.x = this.slim ? -0.5 : -1;
+        });
+        rightArmPivot.position.y = -4;
+        this.rightArm = new BodyPart(rightArmMesh, rightArm2Mesh);
+        this.rightArm.name = 'rightArm';
+        this.rightArm.add(rightArmPivot);
+        this.rightArm.position.x = -5;
+        this.rightArm.position.y = -2;
+        this.add(this.rightArm);
+        // Left Arm
+        const leftArmBox = new BoxGeometry();
+        const leftArmMesh = new Mesh(leftArmBox, this.layer1MaterialBiased);
+        this.modelListeners.push(() => {
+            leftArmMesh.scale.x = this.slim ? 3 : 4;
+            leftArmMesh.scale.y = 12;
+            leftArmMesh.scale.z = 4;
+            setSkinUVs(leftArmBox, 32, 48, this.slim ? 3 : 4, 12, 4);
+        });
+        const leftArm2Box = new BoxGeometry();
+        const leftArm2Mesh = new Mesh(leftArm2Box, this.layer2MaterialBiased);
+        this.modelListeners.push(() => {
+            leftArm2Mesh.scale.x = this.slim ? 3.5 : 4.5;
+            leftArm2Mesh.scale.y = 12.5;
+            leftArm2Mesh.scale.z = 4.5;
+            setSkinUVs(leftArm2Box, 48, 48, this.slim ? 3 : 4, 12, 4);
+        });
+        const leftArmPivot = new Group();
+        leftArmPivot.add(leftArmMesh, leftArm2Mesh);
+        this.modelListeners.push(() => {
+            leftArmPivot.position.x = this.slim ? 0.5 : 1;
+        });
+        leftArmPivot.position.y = -4;
+        this.leftArm = new BodyPart(leftArmMesh, leftArm2Mesh);
+        this.leftArm.name = 'leftArm';
+        this.leftArm.add(leftArmPivot);
+        this.leftArm.position.x = 5;
+        this.leftArm.position.y = -2;
+        this.add(this.leftArm);
+        // Right Leg
+        const rightLegBox = new BoxGeometry(4, 12, 4);
+        setSkinUVs(rightLegBox, 0, 16, 4, 12, 4);
+        const rightLegMesh = new Mesh(rightLegBox, this.layer1MaterialBiased);
+        const rightLeg2Box = new BoxGeometry(4.5, 12.5, 4.5);
+        setSkinUVs(rightLeg2Box, 0, 32, 4, 12, 4);
+        const rightLeg2Mesh = new Mesh(rightLeg2Box, this.layer2MaterialBiased);
+        const rightLegPivot = new Group();
+        rightLegPivot.add(rightLegMesh, rightLeg2Mesh);
+        rightLegPivot.position.y = -6;
+        this.rightLeg = new BodyPart(rightLegMesh, rightLeg2Mesh);
+        this.rightLeg.name = 'rightLeg';
+        this.rightLeg.add(rightLegPivot);
+        this.rightLeg.position.x = -1.9;
+        this.rightLeg.position.y = -12;
+        this.rightLeg.position.z = -0.1;
+        this.add(this.rightLeg);
+        // Left Leg
+        const leftLegBox = new BoxGeometry(4, 12, 4);
+        setSkinUVs(leftLegBox, 16, 48, 4, 12, 4);
+        const leftLegMesh = new Mesh(leftLegBox, this.layer1MaterialBiased);
+        const leftLeg2Box = new BoxGeometry(4.5, 12.5, 4.5);
+        setSkinUVs(leftLeg2Box, 0, 48, 4, 12, 4);
+        const leftLeg2Mesh = new Mesh(leftLeg2Box, this.layer2MaterialBiased);
+        const leftLegPivot = new Group();
+        leftLegPivot.add(leftLegMesh, leftLeg2Mesh);
+        leftLegPivot.position.y = -6;
+        this.leftLeg = new BodyPart(leftLegMesh, leftLeg2Mesh);
+        this.leftLeg.name = 'leftLeg';
+        this.leftLeg.add(leftLegPivot);
+        this.leftLeg.position.x = 1.9;
+        this.leftLeg.position.y = -12;
+        this.leftLeg.position.z = -0.1;
+        this.add(this.leftLeg);
+        this.modelType = 'default';
+    }
+    get map() {
+        return this._map;
+    }
+    set map(newMap) {
+        this._map = newMap;
+        this.layer1Material.map = newMap;
+        this.layer1Material.needsUpdate = true;
+        this.layer1MaterialBiased.map = newMap;
+        this.layer1MaterialBiased.needsUpdate = true;
+        this.layer2Material.map = newMap;
+        this.layer2Material.needsUpdate = true;
+        this.layer2MaterialBiased.map = newMap;
+        this.layer2MaterialBiased.needsUpdate = true;
+    }
+    get modelType() {
+        return this.slim ? 'slim' : 'default';
+    }
+    set modelType(value) {
+        this.slim = value === 'slim';
+        this.modelListeners.forEach(listener => listener());
+    }
+    getBodyParts() {
+        return this.children.filter(it => it instanceof BodyPart);
+    }
+    setInnerLayerVisible(value) {
+        this.getBodyParts().forEach(part => (part.innerLayer.visible = value));
+    }
+    setOuterLayerVisible(value) {
+        this.getBodyParts().forEach(part => (part.outerLayer.visible = value));
+    }
+    resetJoints() {
+        this.head.rotation.set(0, 0, 0);
+        this.leftArm.rotation.set(0, 0, 0);
+        this.rightArm.rotation.set(0, 0, 0);
+        this.leftLeg.rotation.set(0, 0, 0);
+        this.rightLeg.rotation.set(0, 0, 0);
+        this.body.rotation.set(0, 0, 0);
+        this.head.position.y = 0;
+        this.body.position.y = -6;
+        this.body.position.z = 0;
+        this.rightArm.position.x = -5;
+        this.rightArm.position.y = -2;
+        this.rightArm.position.z = 0;
+        this.leftArm.position.x = 5;
+        this.leftArm.position.y = -2;
+        this.leftArm.position.z = 0;
+        this.rightLeg.position.x = -1.9;
+        this.rightLeg.position.y = -12;
+        this.rightLeg.position.z = -0.1;
+        this.leftLeg.position.x = 1.9;
+        this.leftLeg.position.y = -12;
+        this.leftLeg.position.z = -0.1;
+    }
+}
+class CapeObject extends Group {
+    cape;
+    material;
+    constructor() {
+        super();
+        this.material = new MeshStandardMaterial({
+            side: DoubleSide,
+            transparent: true,
+            alphaTest: 1e-5
+        });
+        // +z (front) - inside of cape
+        // -z (back) - outside of cape
+        const capeBox = new BoxGeometry(10, 16, 1);
+        setCapeUVs(capeBox, 0, 0, 10, 16, 1);
+        this.cape = new Mesh(capeBox, this.material);
+        this.cape.position.y = -8;
+        this.cape.position.z = 0.5;
+        this.add(this.cape);
+    }
+    get map() {
+        return this.material.map;
+    }
+    set map(newMap) {
+        this.material.map = newMap;
+        this.material.needsUpdate = true;
+    }
+}
+class ElytraObject extends Group {
+    leftWing;
+    rightWing;
+    material;
+    constructor() {
+        super();
+        this.material = new MeshStandardMaterial({
+            side: DoubleSide,
+            transparent: true,
+            alphaTest: 1e-5
+        });
+        const leftWingBox = new BoxGeometry(12, 22, 4);
+        setCapeUVs(leftWingBox, 22, 0, 10, 20, 2);
+        const leftWingMesh = new Mesh(leftWingBox, this.material);
+        leftWingMesh.position.x = -5;
+        leftWingMesh.position.y = -10;
+        leftWingMesh.position.z = -1;
+        this.leftWing = new Group();
+        this.leftWing.add(leftWingMesh);
+        this.add(this.leftWing);
+        const rightWingBox = new BoxGeometry(12, 22, 4);
+        setCapeUVs(rightWingBox, 22, 0, 10, 20, 2);
+        const rightWingMesh = new Mesh(rightWingBox, this.material);
+        rightWingMesh.scale.x = -1;
+        rightWingMesh.position.x = 5;
+        rightWingMesh.position.y = -10;
+        rightWingMesh.position.z = -1;
+        this.rightWing = new Group();
+        this.rightWing.add(rightWingMesh);
+        this.add(this.rightWing);
+        this.leftWing.position.x = 5;
+        this.leftWing.rotation.x = 0.2617994;
+        this.resetJoints();
+    }
+    resetJoints() {
+        this.leftWing.rotation.y = 0.01; // to avoid z-fighting
+        this.leftWing.rotation.z = 0.2617994;
+        this.updateRightWing();
+    }
+    /**
+     * Mirrors the position & rotation of left wing,
+     * and apply them to the right wing.
+     */
+    updateRightWing() {
+        this.rightWing.position.x = -this.leftWing.position.x;
+        this.rightWing.position.y = this.leftWing.position.y;
+        this.rightWing.rotation.x = this.leftWing.rotation.x;
+        this.rightWing.rotation.y = -this.leftWing.rotation.y;
+        this.rightWing.rotation.z = -this.leftWing.rotation.z;
+    }
+    get map() {
+        return this.material.map;
+    }
+    set map(newMap) {
+        this.material.map = newMap;
+        this.material.needsUpdate = true;
+    }
+}
+class EarsObject extends Group {
+    rightEar;
+    leftEar;
+    material;
+    constructor() {
+        super();
+        this.material = new MeshStandardMaterial({
+            side: FrontSide
+        });
+        const earBox = new BoxGeometry(8, 8, 4 / 3);
+        setUVs(earBox, 0, 0, 6, 6, 1, 14, 7);
+        this.rightEar = new Mesh(earBox, this.material);
+        this.rightEar.name = 'rightEar';
+        this.rightEar.position.x = -6;
+        this.add(this.rightEar);
+        this.leftEar = new Mesh(earBox, this.material);
+        this.leftEar.name = 'leftEar';
+        this.leftEar.position.x = 6;
+        this.add(this.leftEar);
+    }
+    get map() {
+        return this.material.map;
+    }
+    set map(newMap) {
+        this.material.map = newMap;
+        this.material.needsUpdate = true;
+    }
+}
+const CapeDefaultAngle = (10.8 * Math.PI) / 180;
+class PlayerObject extends Group {
+    skin;
+    cape;
+    elytra;
+    ears;
+    nameTag;
+    constructor() {
+        super();
+        this.skin = new SkinObject();
+        this.skin.name = 'skin';
+        this.skin.position.y = 8;
+        this.add(this.skin);
+        this.cape = new CapeObject();
+        this.cape.name = 'cape';
+        this.cape.position.y = 8;
+        this.cape.position.z = -2;
+        this.cape.rotation.x = CapeDefaultAngle;
+        this.cape.rotation.y = Math.PI;
+        this.add(this.cape);
+        this.elytra = new ElytraObject();
+        this.elytra.name = 'elytra';
+        this.elytra.position.y = 8;
+        this.elytra.position.z = -2;
+        this.elytra.visible = false;
+        this.add(this.elytra);
+        this.ears = new EarsObject();
+        this.ears.name = 'ears';
+        this.ears.position.y = 10;
+        this.ears.position.z = 2 / 3;
+        this.ears.visible = false;
+        this.skin.head.add(this.ears);
+    }
+    get backEquipment() {
+        if (this.cape.visible) {
+            return 'cape';
+        }
+        else if (this.elytra.visible) {
+            return 'elytra';
+        }
+        else {
+            return null;
+        }
+    }
+    set backEquipment(value) {
+        this.cape.visible = value === 'cape';
+        this.elytra.visible = value === 'elytra';
+    }
+    resetJoints() {
+        this.skin.resetJoints();
+        this.cape.rotation.x = CapeDefaultAngle;
+        this.cape.position.y = 8;
+        this.cape.position.z = -2;
+        this.elytra.position.y = 8;
+        this.elytra.position.z = -2;
+        this.elytra.rotation.x = 0;
+        this.elytra.resetJoints();
+    }
+}
+
+function isTextureSource(value) {
+    return (value instanceof Image ||
+        // value instanceof HTMLVideoElement ||
+        value instanceof Canvas //||
+    // (typeof ImageBitmap !== 'undefined' && value instanceof ImageBitmap) ||
+    // (typeof OffscreenCanvas !== 'undefined' && value instanceof OffscreenCanvas)
+    );
+}
+
+function hasTransparency(context, x0, y0, w, h) {
+    const imgData = context.getImageData(x0, y0, w, h);
+    for (let x = 0; x < w; x++) {
+        for (let y = 0; y < h; y++) {
+            const offset = (x + y * w) * 4;
+            if (imgData.data[offset + 3] !== 0xff) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+function computeSkinScale(width) {
+    return width / 64.0;
+}
+function fixOpaqueSkin(context, width, format1_8) {
+    // see https://github.com/bs-community/skinview3d/issues/15
+    // see https://github.com/bs-community/skinview3d/issues/93
+    // check whether the skin has opaque background
+    if (format1_8) {
+        if (hasTransparency(context, 0, 0, width, width))
+            return;
+    }
+    else {
+        if (hasTransparency(context, 0, 0, width, width / 2))
+            return;
+    }
+    const scale = computeSkinScale(width);
+    const clearArea = (x, y, w, h) => context.clearRect(x * scale, y * scale, w * scale, h * scale);
+    clearArea(40, 0, 8, 8); // Helm Top
+    clearArea(48, 0, 8, 8); // Helm Bottom
+    clearArea(32, 8, 8, 8); // Helm Right
+    clearArea(40, 8, 8, 8); // Helm Front
+    clearArea(48, 8, 8, 8); // Helm Left
+    clearArea(56, 8, 8, 8); // Helm Back
+    if (format1_8) {
+        clearArea(4, 32, 4, 4); // Right Leg Layer 2 Top
+        clearArea(8, 32, 4, 4); // Right Leg Layer 2 Bottom
+        clearArea(0, 36, 4, 12); // Right Leg Layer 2 Right
+        clearArea(4, 36, 4, 12); // Right Leg Layer 2 Front
+        clearArea(8, 36, 4, 12); // Right Leg Layer 2 Left
+        clearArea(12, 36, 4, 12); // Right Leg Layer 2 Back
+        clearArea(20, 32, 8, 4); // Torso Layer 2 Top
+        clearArea(28, 32, 8, 4); // Torso Layer 2 Bottom
+        clearArea(16, 36, 4, 12); // Torso Layer 2 Right
+        clearArea(20, 36, 8, 12); // Torso Layer 2 Front
+        clearArea(28, 36, 4, 12); // Torso Layer 2 Left
+        clearArea(32, 36, 8, 12); // Torso Layer 2 Back
+        clearArea(44, 32, 4, 4); // Right Arm Layer 2 Top
+        clearArea(48, 32, 4, 4); // Right Arm Layer 2 Bottom
+        clearArea(40, 36, 4, 12); // Right Arm Layer 2 Right
+        clearArea(44, 36, 4, 12); // Right Arm Layer 2 Front
+        clearArea(48, 36, 4, 12); // Right Arm Layer 2 Left
+        clearArea(52, 36, 12, 12); // Right Arm Layer 2 Back
+        clearArea(4, 48, 4, 4); // Left Leg Layer 2 Top
+        clearArea(8, 48, 4, 4); // Left Leg Layer 2 Bottom
+        clearArea(0, 52, 4, 12); // Left Leg Layer 2 Right
+        clearArea(4, 52, 4, 12); // Left Leg Layer 2 Front
+        clearArea(8, 52, 4, 12); // Left Leg Layer 2 Left
+        clearArea(12, 52, 4, 12); // Left Leg Layer 2 Back
+        clearArea(52, 48, 4, 4); // Left Arm Layer 2 Top
+        clearArea(56, 48, 4, 4); // Left Arm Layer 2 Bottom
+        clearArea(48, 52, 4, 12); // Left Arm Layer 2 Right
+        clearArea(52, 52, 4, 12); // Left Arm Layer 2 Front
+        clearArea(56, 52, 4, 12); // Left Arm Layer 2 Left
+        clearArea(60, 52, 4, 12); // Left Arm Layer 2 Back
+    }
+}
+function convertSkinTo1_8(context, width) {
+    // Copied parts are horizontally flipped
+    context.save();
+    context.scale(-1, 1);
+    const scale = computeSkinScale(width);
+    const copySkin = (sX, sY, w, h, dX, dY) => context.drawImage(context.canvas, sX * scale, sY * scale, w * scale, h * scale, -dX * scale - w * scale, dY * scale, w * scale, h * scale); // -w https://github.com/samizdatco/skia-canvas/issues/283
+    copySkin(4, 16, 4, 4, 20, 48); // Top Leg
+    copySkin(8, 16, 4, 4, 24, 48); // Bottom Leg
+    copySkin(0, 20, 4, 12, 24, 52); // Outer Leg
+    copySkin(4, 20, 4, 12, 20, 52); // Front Leg
+    copySkin(8, 20, 4, 12, 16, 52); // Inner Leg
+    copySkin(12, 20, 4, 12, 28, 52); // Back Leg
+    copySkin(44, 16, 4, 4, 36, 48); // Top Arm
+    copySkin(48, 16, 4, 4, 40, 48); // Bottom Arm
+    copySkin(40, 20, 4, 12, 40, 52); // Outer Arm
+    copySkin(44, 20, 4, 12, 36, 52); // Front Arm
+    copySkin(48, 20, 4, 12, 32, 52); // Inner Arm
+    copySkin(52, 20, 4, 12, 44, 52); // Back Arm
+    context.restore();
+}
+function loadSkinToCanvas(canvas, image) {
+    let isOldFormat = false;
+    if (image.width !== image.height) {
+        if (image.width === 2 * image.height) {
+            isOldFormat = true;
+        }
+        else {
+            throw new Error(`Bad skin size: ${image.width}x${image.height}`);
+        }
+    }
+    const context = canvas.getContext('2d' /* , { willReadFrequently: true } */);
+    if (isOldFormat) {
+        const sideLength = image.width;
+        canvas.width = sideLength;
+        canvas.height = sideLength;
+        context.clearRect(0, 0, sideLength, sideLength);
+        context.drawImage(image, 0, 0, sideLength, sideLength / 2.0);
+        convertSkinTo1_8(context, sideLength);
+        fixOpaqueSkin(context, canvas.width, false);
+    }
+    else {
+        canvas.width = image.width;
+        canvas.height = image.height;
+        context.clearRect(0, 0, image.width, image.height);
+        context.drawImage(image, 0, 0, canvas.width, canvas.height);
+        fixOpaqueSkin(context, canvas.width, true);
+    }
+}
+function computeCapeScale(image) {
+    if (image.width === 2 * image.height) {
+        // 64x32
+        return image.width / 64;
+    }
+    else if (image.width * 17 === image.height * 22) {
+        // 22x17
+        return image.width / 22;
+    }
+    else if (image.width * 11 === image.height * 23) {
+        // 46x22
+        return image.width / 46;
+    }
+    else {
+        throw new Error(`Bad cape size: ${image.width}x${image.height}`);
+    }
+}
+function loadCapeToCanvas(canvas, image) {
+    const scale = computeCapeScale(image);
+    canvas.width = 64 * scale;
+    canvas.height = 32 * scale;
+    const context = canvas.getContext('2d');
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    context.drawImage(image, 0, 0, image.width, image.height);
+}
+function isAreaBlack(context, x0, y0, w, h) {
+    const imgData = context.getImageData(x0, y0, w, h);
+    for (let x = 0; x < w; x++) {
+        for (let y = 0; y < h; y++) {
+            const offset = (x + y * w) * 4;
+            if (!(imgData.data[offset + 0] === 0 && imgData.data[offset + 1] === 0 && imgData.data[offset + 2] === 0 && imgData.data[offset + 3] === 0xff)) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+function isAreaWhite(context, x0, y0, w, h) {
+    const imgData = context.getImageData(x0, y0, w, h);
+    for (let x = 0; x < w; x++) {
+        for (let y = 0; y < h; y++) {
+            const offset = (x + y * w) * 4;
+            if (!(imgData.data[offset + 0] === 0xff && imgData.data[offset + 1] === 0xff && imgData.data[offset + 2] === 0xff && imgData.data[offset + 3] === 0xff)) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+function inferModelType(canvas) {
+    // The right arm area of *default* skins:
+    // (44,16)->*-------*-------*
+    // (40,20)  |top    |bottom |
+    // \|/      |4x4    |4x4    |
+    //  *-------*-------*-------*-------*
+    //  |right  |front  |left   |back   |
+    //  |4x12   |4x12   |4x12   |4x12   |
+    //  *-------*-------*-------*-------*
+    // The right arm area of *slim* skins:
+    // (44,16)->*------*------*-*
+    // (40,20)  |top   |bottom| |<----[x0=50,y0=16,w=2,h=4]
+    // \|/      |3x4   |3x4   | |
+    //  *-------*------*------***-----*-*
+    //  |right  |front |left   |back  | |<----[x0=54,y0=20,w=2,h=12]
+    //  |4x12   |3x12  |4x12   |3x12  | |
+    //  *-------*------*-------*------*-*
+    // Compared with default right arms, slim right arms have 2 unused areas.
+    //
+    // The same is true for left arm:
+    // The left arm area of *default* skins:
+    // (36,48)->*-------*-------*
+    // (32,52)  |top    |bottom |
+    // \|/      |4x4    |4x4    |
+    //  *-------*-------*-------*-------*
+    //  |right  |front  |left   |back   |
+    //  |4x12   |4x12   |4x12   |4x12   |
+    //  *-------*-------*-------*-------*
+    // The left arm area of *slim* skins:
+    // (36,48)->*------*------*-*
+    // (32,52)  |top   |bottom| |<----[x0=42,y0=48,w=2,h=4]
+    // \|/      |3x4   |3x4   | |
+    //  *-------*------*------***-----*-*
+    //  |right  |front |left   |back  | |<----[x0=46,y0=52,w=2,h=12]
+    //  |4x12   |3x12  |4x12   |3x12  | |
+    //  *-------*------*-------*------*-*
+    //
+    // If there is a transparent pixel in any of the 4 unused areas, the skin must be slim,
+    // as transparent pixels are not allowed in the first layer.
+    // If the 4 areas are all black or all white, the skin is also considered as slim.
+    const scale = computeSkinScale(canvas.width);
+    const context = canvas.getContext('2d');
+    const checkTransparency = (x, y, w, h) => hasTransparency(context, x * scale, y * scale, w * scale, h * scale);
+    const checkBlack = (x, y, w, h) => isAreaBlack(context, x * scale, y * scale, w * scale, h * scale);
+    const checkWhite = (x, y, w, h) => isAreaWhite(context, x * scale, y * scale, w * scale, h * scale);
+    const isSlim = checkTransparency(50, 16, 2, 4) ||
+        checkTransparency(54, 20, 2, 12) ||
+        checkTransparency(42, 48, 2, 4) ||
+        checkTransparency(46, 52, 2, 12) ||
+        (checkBlack(50, 16, 2, 4) && checkBlack(54, 20, 2, 12) && checkBlack(42, 48, 2, 4) && checkBlack(46, 52, 2, 12)) ||
+        (checkWhite(50, 16, 2, 4) && checkWhite(54, 20, 2, 12) && checkWhite(42, 48, 2, 4) && checkWhite(46, 52, 2, 12));
+    return isSlim ? 'slim' : 'default';
+}
+function computeEarsScale(image) {
+    if (image.width === image.height * 2 && image.height % 7 === 0) {
+        return image.height / 7;
+    }
+    else {
+        throw new Error(`Bad ears size: ${image.width}x${image.height}`);
+    }
+}
+function loadEarsToCanvas(canvas, image) {
+    const scale = computeEarsScale(image);
+    canvas.width = 14 * scale;
+    canvas.height = 7 * scale;
+    const context = canvas.getContext('2d');
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    context.drawImage(image, 0, 0, image.width, image.height);
+}
+function loadEarsToCanvasFromSkin(canvas, image) {
+    if (image.width !== image.height && image.width !== 2 * image.height) {
+        throw new Error(`Bad skin size: ${image.width}x${image.height}`);
+    }
+    const scale = computeSkinScale(image.width);
+    const w = 14 * scale;
+    const h = 7 * scale;
+    canvas.width = w;
+    canvas.height = h;
+    const context = canvas.getContext('2d');
+    context.clearRect(0, 0, w, h);
+    context.drawImage(image, 24 * scale, 0, w, h, 0, 0, w, h);
+}
+
+async function loadImage(source) {
+    const image = new Image();
+    return new Promise((resolve, reject) => {
+        image.onload = () => resolve(image);
+        image.onerror = reject;
+        if (typeof source === 'string') {
+            image.src = source;
+        }
+        else if (Buffer.isBuffer(source)) {
+            image.src = source;
+        }
+        else {
+            image.src = source.src;
+        }
+    });
+}
+function canvas2DataTexture(canvas) {
+    const png = PNG.sync.read(canvas.toBufferSync('png'));
+    const texture = new DataTexture(Uint8Array.from(png.data), png.width, png.height, RGBAFormat);
+    texture.needsUpdate = true;
+    texture.flipY = true;
+    return texture;
+}
+
+/**
+ * Full-screen textured quad shader
+ */
+
+const CopyShader = {
+
+	name: 'CopyShader',
+
+	uniforms: {
+
+		'tDiffuse': { value: null },
+		'opacity': { value: 1.0 }
+
+	},
+
+	vertexShader: /* glsl */`
+
+		varying vec2 vUv;
+
+		void main() {
+
+			vUv = uv;
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+		}`,
+
+	fragmentShader: /* glsl */`
+
+		uniform float opacity;
+
+		uniform sampler2D tDiffuse;
+
+		varying vec2 vUv;
+
+		void main() {
+
+			vec4 texel = texture2D( tDiffuse, vUv );
+			gl_FragColor = opacity * texel;
+
+
+		}`
+
+};
+
+class Pass {
+
+	constructor() {
+
+		this.isPass = true;
+
+		// if set to true, the pass is processed by the composer
+		this.enabled = true;
+
+		// if set to true, the pass indicates to swap read and write buffer after rendering
+		this.needsSwap = true;
+
+		// if set to true, the pass clears its buffer before rendering
+		this.clear = false;
+
+		// if set to true, the result of the pass is rendered to screen. This is set automatically by EffectComposer.
+		this.renderToScreen = false;
+
+	}
+
+	setSize( /* width, height */ ) {}
+
+	render( /* renderer, writeBuffer, readBuffer, deltaTime, maskActive */ ) {
+
+		console.error( 'THREE.Pass: .render() must be implemented in derived pass.' );
+
+	}
+
+	dispose() {}
+
+}
+
+// Helper for passes that need to fill the viewport with a single quad.
+
+const _camera = new OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
+
+// https://github.com/mrdoob/three.js/pull/21358
+
+const _geometry = new BufferGeometry();
+_geometry.setAttribute( 'position', new Float32BufferAttribute( [ - 1, 3, 0, - 1, - 1, 0, 3, - 1, 0 ], 3 ) );
+_geometry.setAttribute( 'uv', new Float32BufferAttribute( [ 0, 2, 0, 0, 2, 0 ], 2 ) );
+
+class FullScreenQuad {
+
+	constructor( material ) {
+
+		this._mesh = new Mesh( _geometry, material );
+
+	}
+
+	dispose() {
+
+		this._mesh.geometry.dispose();
+
+	}
+
+	render( renderer ) {
+
+		renderer.render( this._mesh, _camera );
+
+	}
+
+	get material() {
+
+		return this._mesh.material;
+
+	}
+
+	set material( value ) {
+
+		this._mesh.material = value;
+
+	}
+
+}
+
+class ShaderPass extends Pass {
+
+	constructor( shader, textureID ) {
+
+		super();
+
+		this.textureID = ( textureID !== undefined ) ? textureID : 'tDiffuse';
+
+		if ( shader instanceof ShaderMaterial ) {
+
+			this.uniforms = shader.uniforms;
+
+			this.material = shader;
+
+		} else if ( shader ) {
+
+			this.uniforms = UniformsUtils.clone( shader.uniforms );
+
+			this.material = new ShaderMaterial( {
+
+				name: ( shader.name !== undefined ) ? shader.name : 'unspecified',
+				defines: Object.assign( {}, shader.defines ),
+				uniforms: this.uniforms,
+				vertexShader: shader.vertexShader,
+				fragmentShader: shader.fragmentShader
+
+			} );
+
+		}
+
+		this.fsQuad = new FullScreenQuad( this.material );
+
+	}
+
+	render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {
+
+		if ( this.uniforms[ this.textureID ] ) {
+
+			this.uniforms[ this.textureID ].value = readBuffer.texture;
+
+		}
+
+		this.fsQuad.material = this.material;
+
+		if ( this.renderToScreen ) {
+
+			renderer.setRenderTarget( null );
+			this.fsQuad.render( renderer );
+
+		} else {
+
+			renderer.setRenderTarget( writeBuffer );
+			// TODO: Avoid using autoClear properties, see https://github.com/mrdoob/three.js/pull/15571#issuecomment-465669600
+			if ( this.clear ) renderer.clear( renderer.autoClearColor, renderer.autoClearDepth, renderer.autoClearStencil );
+			this.fsQuad.render( renderer );
+
+		}
+
+	}
+
+	dispose() {
+
+		this.material.dispose();
+
+		this.fsQuad.dispose();
+
+	}
+
+}
+
+class MaskPass extends Pass {
+
+	constructor( scene, camera ) {
+
+		super();
+
+		this.scene = scene;
+		this.camera = camera;
+
+		this.clear = true;
+		this.needsSwap = false;
+
+		this.inverse = false;
+
+	}
+
+	render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {
+
+		const context = renderer.getContext();
+		const state = renderer.state;
+
+		// don't update color or depth
+
+		state.buffers.color.setMask( false );
+		state.buffers.depth.setMask( false );
+
+		// lock buffers
+
+		state.buffers.color.setLocked( true );
+		state.buffers.depth.setLocked( true );
+
+		// set up stencil
+
+		let writeValue, clearValue;
+
+		if ( this.inverse ) {
+
+			writeValue = 0;
+			clearValue = 1;
+
+		} else {
+
+			writeValue = 1;
+			clearValue = 0;
+
+		}
+
+		state.buffers.stencil.setTest( true );
+		state.buffers.stencil.setOp( context.REPLACE, context.REPLACE, context.REPLACE );
+		state.buffers.stencil.setFunc( context.ALWAYS, writeValue, 0xffffffff );
+		state.buffers.stencil.setClear( clearValue );
+		state.buffers.stencil.setLocked( true );
+
+		// draw into the stencil buffer
+
+		renderer.setRenderTarget( readBuffer );
+		if ( this.clear ) renderer.clear();
+		renderer.render( this.scene, this.camera );
+
+		renderer.setRenderTarget( writeBuffer );
+		if ( this.clear ) renderer.clear();
+		renderer.render( this.scene, this.camera );
+
+		// unlock color and depth buffer and make them writable for subsequent rendering/clearing
+
+		state.buffers.color.setLocked( false );
+		state.buffers.depth.setLocked( false );
+
+		state.buffers.color.setMask( true );
+		state.buffers.depth.setMask( true );
+
+		// only render where stencil is set to 1
+
+		state.buffers.stencil.setLocked( false );
+		state.buffers.stencil.setFunc( context.EQUAL, 1, 0xffffffff ); // draw if == 1
+		state.buffers.stencil.setOp( context.KEEP, context.KEEP, context.KEEP );
+		state.buffers.stencil.setLocked( true );
+
+	}
+
+}
+
+class ClearMaskPass extends Pass {
+
+	constructor() {
+
+		super();
+
+		this.needsSwap = false;
+
+	}
+
+	render( renderer /*, writeBuffer, readBuffer, deltaTime, maskActive */ ) {
+
+		renderer.state.buffers.stencil.setLocked( false );
+		renderer.state.buffers.stencil.setTest( false );
+
+	}
+
+}
+
+class EffectComposer {
+
+	constructor( renderer, renderTarget ) {
+
+		this.renderer = renderer;
+
+		this._pixelRatio = renderer.getPixelRatio();
+
+		if ( renderTarget === undefined ) {
+
+			const size = renderer.getSize( new Vector2() );
+			this._width = size.width;
+			this._height = size.height;
+
+			renderTarget = new WebGLRenderTarget( this._width * this._pixelRatio, this._height * this._pixelRatio, { type: HalfFloatType } );
+			renderTarget.texture.name = 'EffectComposer.rt1';
+
+		} else {
+
+			this._width = renderTarget.width;
+			this._height = renderTarget.height;
+
+		}
+
+		this.renderTarget1 = renderTarget;
+		this.renderTarget2 = renderTarget.clone();
+		this.renderTarget2.texture.name = 'EffectComposer.rt2';
+
+		this.writeBuffer = this.renderTarget1;
+		this.readBuffer = this.renderTarget2;
+
+		this.renderToScreen = true;
+
+		this.passes = [];
+
+		this.copyPass = new ShaderPass( CopyShader );
+		this.copyPass.material.blending = NoBlending;
+
+		this.clock = new Clock();
+
+	}
+
+	swapBuffers() {
+
+		const tmp = this.readBuffer;
+		this.readBuffer = this.writeBuffer;
+		this.writeBuffer = tmp;
+
+	}
+
+	addPass( pass ) {
+
+		this.passes.push( pass );
+		pass.setSize( this._width * this._pixelRatio, this._height * this._pixelRatio );
+
+	}
+
+	insertPass( pass, index ) {
+
+		this.passes.splice( index, 0, pass );
+		pass.setSize( this._width * this._pixelRatio, this._height * this._pixelRatio );
+
+	}
+
+	removePass( pass ) {
+
+		const index = this.passes.indexOf( pass );
+
+		if ( index !== - 1 ) {
+
+			this.passes.splice( index, 1 );
+
+		}
+
+	}
+
+	isLastEnabledPass( passIndex ) {
+
+		for ( let i = passIndex + 1; i < this.passes.length; i ++ ) {
+
+			if ( this.passes[ i ].enabled ) {
+
+				return false;
+
+			}
+
+		}
+
+		return true;
+
+	}
+
+	render( deltaTime ) {
+
+		// deltaTime value is in seconds
+
+		if ( deltaTime === undefined ) {
+
+			deltaTime = this.clock.getDelta();
+
+		}
+
+		const currentRenderTarget = this.renderer.getRenderTarget();
+
+		let maskActive = false;
+
+		for ( let i = 0, il = this.passes.length; i < il; i ++ ) {
+
+			const pass = this.passes[ i ];
+
+			if ( pass.enabled === false ) continue;
+
+			pass.renderToScreen = ( this.renderToScreen && this.isLastEnabledPass( i ) );
+			pass.render( this.renderer, this.writeBuffer, this.readBuffer, deltaTime, maskActive );
+
+			if ( pass.needsSwap ) {
+
+				if ( maskActive ) {
+
+					const context = this.renderer.getContext();
+					const stencil = this.renderer.state.buffers.stencil;
+
+					//context.stencilFunc( context.NOTEQUAL, 1, 0xffffffff );
+					stencil.setFunc( context.NOTEQUAL, 1, 0xffffffff );
+
+					this.copyPass.render( this.renderer, this.writeBuffer, this.readBuffer, deltaTime );
+
+					//context.stencilFunc( context.EQUAL, 1, 0xffffffff );
+					stencil.setFunc( context.EQUAL, 1, 0xffffffff );
+
+				}
+
+				this.swapBuffers();
+
+			}
+
+			if ( MaskPass !== undefined ) {
+
+				if ( pass instanceof MaskPass ) {
+
+					maskActive = true;
+
+				} else if ( pass instanceof ClearMaskPass ) {
+
+					maskActive = false;
+
+				}
+
+			}
+
+		}
+
+		this.renderer.setRenderTarget( currentRenderTarget );
+
+	}
+
+	reset( renderTarget ) {
+
+		if ( renderTarget === undefined ) {
+
+			const size = this.renderer.getSize( new Vector2() );
+			this._pixelRatio = this.renderer.getPixelRatio();
+			this._width = size.width;
+			this._height = size.height;
+
+			renderTarget = this.renderTarget1.clone();
+			renderTarget.setSize( this._width * this._pixelRatio, this._height * this._pixelRatio );
+
+		}
+
+		this.renderTarget1.dispose();
+		this.renderTarget2.dispose();
+		this.renderTarget1 = renderTarget;
+		this.renderTarget2 = renderTarget.clone();
+
+		this.writeBuffer = this.renderTarget1;
+		this.readBuffer = this.renderTarget2;
+
+	}
+
+	setSize( width, height ) {
+
+		this._width = width;
+		this._height = height;
+
+		const effectiveWidth = this._width * this._pixelRatio;
+		const effectiveHeight = this._height * this._pixelRatio;
+
+		this.renderTarget1.setSize( effectiveWidth, effectiveHeight );
+		this.renderTarget2.setSize( effectiveWidth, effectiveHeight );
+
+		for ( let i = 0; i < this.passes.length; i ++ ) {
+
+			this.passes[ i ].setSize( effectiveWidth, effectiveHeight );
+
+		}
+
+	}
+
+	setPixelRatio( pixelRatio ) {
+
+		this._pixelRatio = pixelRatio;
+
+		this.setSize( this._width, this._height );
+
+	}
+
+	dispose() {
+
+		this.renderTarget1.dispose();
+		this.renderTarget2.dispose();
+
+		this.copyPass.dispose();
+
+	}
+
+}
+
+class RenderPass extends Pass {
+
+	constructor( scene, camera, overrideMaterial = null, clearColor = null, clearAlpha = null ) {
+
+		super();
+
+		this.scene = scene;
+		this.camera = camera;
+
+		this.overrideMaterial = overrideMaterial;
+
+		this.clearColor = clearColor;
+		this.clearAlpha = clearAlpha;
+
+		this.clear = true;
+		this.clearDepth = false;
+		this.needsSwap = false;
+		this._oldClearColor = new Color();
+
+	}
+
+	render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {
+
+		const oldAutoClear = renderer.autoClear;
+		renderer.autoClear = false;
+
+		let oldClearAlpha, oldOverrideMaterial;
+
+		if ( this.overrideMaterial !== null ) {
+
+			oldOverrideMaterial = this.scene.overrideMaterial;
+
+			this.scene.overrideMaterial = this.overrideMaterial;
+
+		}
+
+		if ( this.clearColor !== null ) {
+
+			renderer.getClearColor( this._oldClearColor );
+			renderer.setClearColor( this.clearColor );
+
+		}
+
+		if ( this.clearAlpha !== null ) {
+
+			oldClearAlpha = renderer.getClearAlpha();
+			renderer.setClearAlpha( this.clearAlpha );
+
+		}
+
+		if ( this.clearDepth == true ) {
+
+			renderer.clearDepth();
+
+		}
+
+		renderer.setRenderTarget( this.renderToScreen ? null : readBuffer );
+
+		if ( this.clear === true ) {
+
+			// TODO: Avoid using autoClear properties, see https://github.com/mrdoob/three.js/pull/15571#issuecomment-465669600
+			renderer.clear( renderer.autoClearColor, renderer.autoClearDepth, renderer.autoClearStencil );
+
+		}
+
+		renderer.render( this.scene, this.camera );
+
+		// restore
+
+		if ( this.clearColor !== null ) {
+
+			renderer.setClearColor( this._oldClearColor );
+
+		}
+
+		if ( this.clearAlpha !== null ) {
+
+			renderer.setClearAlpha( oldClearAlpha );
+
+		}
+
+		if ( this.overrideMaterial !== null ) {
+
+			this.scene.overrideMaterial = oldOverrideMaterial;
+
+		}
+
+		renderer.autoClear = oldAutoClear;
+
+	}
+
+}
+
+/**
+ * NVIDIA FXAA by Timothy Lottes
+ * https://developer.download.nvidia.com/assets/gamedev/files/sdk/11/FXAA_WhitePaper.pdf
+ * - WebGL port by @supereggbert
+ * http://www.glge.org/demos/fxaa/
+ * Further improved by Daniel Sturk
+ */
+
+const FXAAShader = {
+
+	uniforms: {
+
+		'tDiffuse': { value: null },
+		'resolution': { value: new Vector2( 1 / 1024, 1 / 512 ) }
+
+	},
+
+	vertexShader: /* glsl */`
+
+		varying vec2 vUv;
+
+		void main() {
+
+			vUv = uv;
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+
+		}`,
+
+	fragmentShader: `
+	precision highp float;
+
+	uniform sampler2D tDiffuse;
+
+	uniform vec2 resolution;
+
+	varying vec2 vUv;
+
+	// FXAA 3.11 implementation by NVIDIA, ported to WebGL by Agost Biro (biro@archilogic.com)
+
+	//----------------------------------------------------------------------------------
+	// File:        es3-kepler\FXAA\assets\shaders/FXAA_DefaultES.frag
+	// SDK Version: v3.00
+	// Email:       gameworks@nvidia.com
+	// Site:        http://developer.nvidia.com/
+	//
+	// Copyright (c) 2014-2015, NVIDIA CORPORATION. All rights reserved.
+	//
+	// Redistribution and use in source and binary forms, with or without
+	// modification, are permitted provided that the following conditions
+	// are met:
+	//  * Redistributions of source code must retain the above copyright
+	//    notice, this list of conditions and the following disclaimer.
+	//  * Redistributions in binary form must reproduce the above copyright
+	//    notice, this list of conditions and the following disclaimer in the
+	//    documentation and/or other materials provided with the distribution.
+	//  * Neither the name of NVIDIA CORPORATION nor the names of its
+	//    contributors may be used to endorse or promote products derived
+	//    from this software without specific prior written permission.
+	//
+	// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS ''AS IS'' AND ANY
+	// EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+	// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+	// PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL THE COPYRIGHT OWNER OR
+	// CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+	// EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+	// PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
+	// PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+	// OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+	// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+	// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+	//
+	//----------------------------------------------------------------------------------
+
+	#ifndef FXAA_DISCARD
+			//
+			// Only valid for PC OpenGL currently.
+			// Probably will not work when FXAA_GREEN_AS_LUMA = 1.
+			//
+			// 1 = Use discard on pixels which don't need AA.
+			//     For APIs which enable concurrent TEX+ROP from same surface.
+			// 0 = Return unchanged color on pixels which don't need AA.
+			//
+			#define FXAA_DISCARD 0
+	#endif
+
+	/*--------------------------------------------------------------------------*/
+	#define FxaaTexTop(t, p) texture2D(t, p, -100.0)
+	#define FxaaTexOff(t, p, o, r) texture2D(t, p + (o * r), -100.0)
+	/*--------------------------------------------------------------------------*/
+
+	#define NUM_SAMPLES 5
+
+	// assumes colors have premultipliedAlpha, so that the calculated color contrast is scaled by alpha
+	float contrast( vec4 a, vec4 b ) {
+			vec4 diff = abs( a - b );
+			return max( max( max( diff.r, diff.g ), diff.b ), diff.a );
+	}
+
+	/*============================================================================
+
+									FXAA3 QUALITY - PC
+
+	============================================================================*/
+
+	/*--------------------------------------------------------------------------*/
+	vec4 FxaaPixelShader(
+			vec2 posM,
+			sampler2D tex,
+			vec2 fxaaQualityRcpFrame,
+			float fxaaQualityEdgeThreshold,
+			float fxaaQualityinvEdgeThreshold
+	) {
+			vec4 rgbaM = FxaaTexTop(tex, posM);
+			vec4 rgbaS = FxaaTexOff(tex, posM, vec2( 0.0, 1.0), fxaaQualityRcpFrame.xy);
+			vec4 rgbaE = FxaaTexOff(tex, posM, vec2( 1.0, 0.0), fxaaQualityRcpFrame.xy);
+			vec4 rgbaN = FxaaTexOff(tex, posM, vec2( 0.0,-1.0), fxaaQualityRcpFrame.xy);
+			vec4 rgbaW = FxaaTexOff(tex, posM, vec2(-1.0, 0.0), fxaaQualityRcpFrame.xy);
+			// . S .
+			// W M E
+			// . N .
+
+			bool earlyExit = max( max( max(
+					contrast( rgbaM, rgbaN ),
+					contrast( rgbaM, rgbaS ) ),
+					contrast( rgbaM, rgbaE ) ),
+					contrast( rgbaM, rgbaW ) )
+					< fxaaQualityEdgeThreshold;
+			// . 0 .
+			// 0 0 0
+			// . 0 .
+
+			#if (FXAA_DISCARD == 1)
+					if(earlyExit) FxaaDiscard;
+			#else
+					if(earlyExit) return rgbaM;
+			#endif
+
+			float contrastN = contrast( rgbaM, rgbaN );
+			float contrastS = contrast( rgbaM, rgbaS );
+			float contrastE = contrast( rgbaM, rgbaE );
+			float contrastW = contrast( rgbaM, rgbaW );
+
+			float relativeVContrast = ( contrastN + contrastS ) - ( contrastE + contrastW );
+			relativeVContrast *= fxaaQualityinvEdgeThreshold;
+
+			bool horzSpan = relativeVContrast > 0.;
+			// . 1 .
+			// 0 0 0
+			// . 1 .
+
+			// 45 deg edge detection and corners of objects, aka V/H contrast is too similar
+			if( abs( relativeVContrast ) < .3 ) {
+					// locate the edge
+					vec2 dirToEdge;
+					dirToEdge.x = contrastE > contrastW ? 1. : -1.;
+					dirToEdge.y = contrastS > contrastN ? 1. : -1.;
+					// . 2 .      . 1 .
+					// 1 0 2  ~=  0 0 1
+					// . 1 .      . 0 .
+
+					// tap 2 pixels and see which ones are "outside" the edge, to
+					// determine if the edge is vertical or horizontal
+
+					vec4 rgbaAlongH = FxaaTexOff(tex, posM, vec2( dirToEdge.x, -dirToEdge.y ), fxaaQualityRcpFrame.xy);
+					float matchAlongH = contrast( rgbaM, rgbaAlongH );
+					// . 1 .
+					// 0 0 1
+					// . 0 H
+
+					vec4 rgbaAlongV = FxaaTexOff(tex, posM, vec2( -dirToEdge.x, dirToEdge.y ), fxaaQualityRcpFrame.xy);
+					float matchAlongV = contrast( rgbaM, rgbaAlongV );
+					// V 1 .
+					// 0 0 1
+					// . 0 .
+
+					relativeVContrast = matchAlongV - matchAlongH;
+					relativeVContrast *= fxaaQualityinvEdgeThreshold;
+
+					if( abs( relativeVContrast ) < .3 ) { // 45 deg edge
+							// 1 1 .
+							// 0 0 1
+							// . 0 1
+
+							// do a simple blur
+							return mix(
+									rgbaM,
+									(rgbaN + rgbaS + rgbaE + rgbaW) * .25,
+									.4
+							);
+					}
+
+					horzSpan = relativeVContrast > 0.;
+			}
+
+			if(!horzSpan) rgbaN = rgbaW;
+			if(!horzSpan) rgbaS = rgbaE;
+			// . 0 .      1
+			// 1 0 1  ->  0
+			// . 0 .      1
+
+			bool pairN = contrast( rgbaM, rgbaN ) > contrast( rgbaM, rgbaS );
+			if(!pairN) rgbaN = rgbaS;
+
+			vec2 offNP;
+			offNP.x = (!horzSpan) ? 0.0 : fxaaQualityRcpFrame.x;
+			offNP.y = ( horzSpan) ? 0.0 : fxaaQualityRcpFrame.y;
+
+			bool doneN = false;
+			bool doneP = false;
+
+			float nDist = 0.;
+			float pDist = 0.;
+
+			vec2 posN = posM;
+			vec2 posP = posM;
+
+			int iterationsUsed = 0;
+			int iterationsUsedN = 0;
+			int iterationsUsedP = 0;
+			for( int i = 0; i < NUM_SAMPLES; i++ ) {
+					iterationsUsed = i;
+
+					float increment = float(i + 1);
+
+					if(!doneN) {
+							nDist += increment;
+							posN = posM + offNP * nDist;
+							vec4 rgbaEndN = FxaaTexTop(tex, posN.xy);
+							doneN = contrast( rgbaEndN, rgbaM ) > contrast( rgbaEndN, rgbaN );
+							iterationsUsedN = i;
+					}
+
+					if(!doneP) {
+							pDist += increment;
+							posP = posM - offNP * pDist;
+							vec4 rgbaEndP = FxaaTexTop(tex, posP.xy);
+							doneP = contrast( rgbaEndP, rgbaM ) > contrast( rgbaEndP, rgbaN );
+							iterationsUsedP = i;
+					}
+
+					if(doneN || doneP) break;
+			}
+
+
+			if ( !doneP && !doneN ) return rgbaM; // failed to find end of edge
+
+			float dist = min(
+					doneN ? float( iterationsUsedN ) / float( NUM_SAMPLES - 1 ) : 1.,
+					doneP ? float( iterationsUsedP ) / float( NUM_SAMPLES - 1 ) : 1.
+			);
+
+			// hacky way of reduces blurriness of mostly diagonal edges
+			// but reduces AA quality
+			dist = pow(dist, .5);
+
+			dist = 1. - dist;
+
+			return mix(
+					rgbaM,
+					rgbaN,
+					dist * .5
+			);
+	}
+
+	void main() {
+			const float edgeDetectionQuality = .2;
+			const float invEdgeDetectionQuality = 1. / edgeDetectionQuality;
+
+			gl_FragColor = FxaaPixelShader(
+					vUv,
+					tDiffuse,
+					resolution,
+					edgeDetectionQuality, // [0,1] contrast needed, otherwise early discard
+					invEdgeDetectionQuality
+			);
+
+	}
+	`
+
+};
+
+/**
+ * A Minecraft name tag, i.e. a text label with background.
+ */
+class NameTagObject extends Sprite {
+    /**
+     * A promise that is resolved after the name tag is fully painted.
+     *
+     * This will be a resolved promise, if
+     * {@link NameTagOptions.repaintAfterLoaded} is `false`, or
+     * the desired font is available when the `NameTagObject` is created.
+     *
+     * If {@link NameTagOptions.repaintAfterLoaded} is `true`, and
+     * the desired font hasn't been loaded when the `NameTagObject` is created,
+     * the name tag will be painted with the fallback font first, and then
+     * repainted with the desired font after it's loaded. This promise is
+     * resolved after repainting is done.
+     */
+    painted;
+    text;
+    font;
+    margin;
+    textStyle;
+    backgroundStyle;
+    height;
+    textMaterial;
+    constructor(text = '', options = {}) {
+        const material = new SpriteMaterial({
+            transparent: true,
+            alphaTest: 1e-5
+        });
+        super(material);
+        this.textMaterial = material;
+        this.text = text;
+        this.font = options.font === undefined ? '48px Minecraft' : options.font;
+        this.margin = options.margin === undefined ? [5, 10, 5, 10] : options.margin;
+        this.textStyle = options.textStyle === undefined ? 'white' : options.textStyle;
+        this.backgroundStyle = options.backgroundStyle === undefined ? 'rgba(0,0,0,.25)' : options.backgroundStyle;
+        this.height = options.height === undefined ? 4.0 : options.height;
+        const repaintAfterLoaded = options.repaintAfterLoaded ?? true;
+        if (repaintAfterLoaded /* && !document.fonts.check(this.font, this.text) */) {
+            this.paint();
+            this.painted = this.loadAndPaint();
+        }
+        else {
+            this.paint();
+            this.painted = Promise.resolve();
+        }
+    }
+    async loadAndPaint() {
+        // await document.fonts.load(this.font, this.text);
+        this.paint();
+    }
+    paint() {
+        const canvas = new Canvas();
+        // Measure the text size
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        let ctx = canvas.getContext('2d');
+        ctx.font = this.font;
+        const metrics = ctx.measureText(this.text);
+        // Compute canvas size
+        canvas.width = this.margin[3] + metrics.actualBoundingBoxLeft + metrics.actualBoundingBoxRight + this.margin[1];
+        canvas.height = this.margin[0] + metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent + this.margin[2];
+        // After change canvas size, the context needs to be re-created
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        ctx = canvas.getContext('2d');
+        ctx.font = this.font;
+        // Fill background
+        ctx.fillStyle = this.backgroundStyle;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        // Draw text
+        ctx.fillStyle = this.textStyle;
+        ctx.fillText(this.text, this.margin[3] + metrics.actualBoundingBoxLeft, this.margin[0] + metrics.actualBoundingBoxAscent);
+        // Apply texture
+        const texture = canvas2DataTexture(canvas);
+        texture.magFilter = NearestFilter;
+        texture.minFilter = NearestFilter;
+        this.textMaterial.map = texture;
+        this.textMaterial.needsUpdate = true;
+        // Update size
+        this.scale.x = (canvas.width / canvas.height) * this.height;
+        this.scale.y = this.height;
+    }
+}
+
+/**
+ * The SkinViewer renders the player on a canvas.
+ */
+class SkinViewer {
+    /**
+     * The canvas where the renderer draws its output.
+     */
+    canvas;
+    ctx;
+    scene;
+    camera;
+    renderer;
+    /**
+     * The OrbitControls component which is used to implement the mouse control function.
+     *
+     * @see {@link https://threejs.org/docs/#examples/en/controls/OrbitControls | OrbitControls - three.js docs}
+     */
+    // readonly controls: OrbitControls;
+    /**
+     * The player object.
+     */
+    playerObject;
+    /**
+     * A group that wraps the player object.
+     * It is used to center the player in the world.
+     */
+    playerWrapper;
+    globalLight = new AmbientLight(0xffffff, 3);
+    cameraLight = new PointLight(0xffffff, 0.6);
+    composer;
+    renderPass;
+    fxaaPass;
+    skinCanvas;
+    capeCanvas;
+    earsCanvas;
+    skinTexture = null;
+    capeTexture = null;
+    earsTexture = null;
+    backgroundTexture = null;
+    _disposed = false;
+    _zoom;
+    /**
+     * Whether to rotate the player along the y axis.
+     *
+     * @defaultValue `false`
+     */
+    autoRotate = false;
+    /**
+     * The angular velocity of the player, in rad/s.
+     *
+     * @defaultValue `1.0`
+     * @see {@link autoRotate}
+     */
+    autoRotateSpeed = 1.0;
+    _animation;
+    // private clock: Clock;
+    // private animationID: number | null;
+    // private onContextLost: (event: Event) => void;
+    // private onContextRestored: () => void;
+    _pixelRatio;
+    // private devicePixelRatioQuery: MediaQueryList | null;
+    // private onDevicePixelRatioChange: () => void;
+    _nameTag = null;
+    nameTagYOffset = 20;
+    _loadPromiseArr = [];
+    /** 读取各部位 */
+    ready;
+    constructor(options = {}) {
+        this.canvas = options.canvas || new Canvas();
+        this.ctx = options.ctx || gl(300, 300, { preserveDrawingBuffer: options.preserveDrawingBuffer });
+        this.skinCanvas = new Canvas();
+        this.capeCanvas = new Canvas();
+        this.earsCanvas = new Canvas();
+        this.scene = new Scene();
+        this.camera = new PerspectiveCamera();
+        this.camera.add(this.cameraLight);
+        this.scene.add(this.camera);
+        this.scene.add(this.globalLight);
+        ColorManagement.enabled = false;
+        this.renderer = new WebGLRenderer({
+            canvas: this.canvas,
+            context: this.ctx,
+            preserveDrawingBuffer: options.preserveDrawingBuffer === true // default: false
+        });
+        // this.onDevicePixelRatioChange = () => {
+        // 	this.renderer.setPixelRatio(window.devicePixelRatio);
+        // 	this.updateComposerSize();
+        // 	if (this._pixelRatio === "match-device") {
+        // 		this.devicePixelRatioQuery = matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+        // 		this.devicePixelRatioQuery.addEventListener("change", this.onDevicePixelRatioChange, { once: true });
+        // 	}
+        // };
+        // if (options.pixelRatio === undefined || options.pixelRatio === "match-device") {
+        // 	this._pixelRatio = "match-device";
+        // 	this.devicePixelRatioQuery = matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+        // 	this.devicePixelRatioQuery.addEventListener("change", this.onDevicePixelRatioChange, { once: true });
+        // 	this.renderer.setPixelRatio(window.devicePixelRatio);
+        // } else {
+        this._pixelRatio = options.pixelRatio || 1;
+        // this.devicePixelRatioQuery = null;
+        this.renderer.setPixelRatio(1);
+        // }
+        this.renderer.setClearColor(0, 0);
+        // if (this.renderer.capabilities.isWebGL2) {
+        // Use float precision depth if possible
+        // see https://github.com/bs-community/skinview3d/issues/111
+        const renderTarget = new WebGLRenderTarget(0, 0, {
+            // depthTexture: new DepthTexture(0, 0, FloatType),
+            minFilter: LinearFilter,
+            magFilter: LinearFilter,
+            format: RGBAFormat,
+            type: UnsignedByteType
+        });
+        // }
+        this.composer = new EffectComposer(this.renderer, renderTarget);
+        this.renderPass = new RenderPass(this.scene, this.camera);
+        this.fxaaPass = new ShaderPass(FXAAShader);
+        this.composer.addPass(this.renderPass);
+        this.composer.addPass(this.fxaaPass);
+        this.playerObject = new PlayerObject();
+        this.playerObject.name = 'player';
+        this.playerObject.skin.visible = false;
+        this.playerObject.cape.visible = false;
+        this.playerWrapper = new Group();
+        this.playerWrapper.add(this.playerObject);
+        this.scene.add(this.playerWrapper);
+        // this.controls = new OrbitControls(this.camera, this.canvas);
+        // this.controls.enablePan = false; // disable pan by default
+        // this.controls.minDistance = 10;
+        // this.controls.maxDistance = 256;
+        // if (options.enableControls === false) {
+        // 	this.controls.enabled = false;
+        // }
+        if (options.skin !== undefined) {
+            this._loadPromiseArr.push(this.loadSkin(options.skin, {
+                model: options.model,
+                ears: options.ears === 'current-skin'
+            }));
+        }
+        if (options.cape !== undefined) {
+            this._loadPromiseArr.push(this.loadCape(options.cape, options.capeLoadOptions));
+        }
+        if (options.ears !== undefined && options.ears !== 'current-skin') {
+            this._loadPromiseArr.push(this.loadEars(options.ears.source, {
+                textureType: options.ears.textureType
+            }));
+        }
+        if (options.width !== undefined) {
+            this.width = options.width;
+        }
+        if (options.height !== undefined) {
+            this.height = options.height;
+        }
+        if (options.background !== undefined) {
+            this.background = options.background;
+        }
+        if (options.panorama !== undefined) {
+            this._loadPromiseArr.push(this.loadPanorama(options.panorama));
+        }
+        if (options.nameTag !== undefined) {
+            this.nameTag = options.nameTag;
+        }
+        this.camera.position.z = 1;
+        this._zoom = options.zoom === undefined ? 0.9 : options.zoom;
+        this.fov = options.fov === undefined ? 50 : options.fov;
+        this._animation = options.animation === undefined ? null : options.animation;
+        // this.clock = new Clock();
+        // this.onContextLost = (event: Event) => {
+        // 	event.preventDefault();
+        // 	if (this.animationID !== null) {
+        // 		window.cancelAnimationFrame(this.animationID);
+        // 		this.animationID = null;
+        // 	}
+        // };
+        // this.onContextRestored = () => {
+        // 	this.renderer.setClearColor(0, 0); // Clear color might be lost
+        // 	if (!this._renderPaused && !this._disposed && this.animationID === null) {
+        // 		this.animationID = window.requestAnimationFrame(() => this.draw());
+        // 	}
+        // };
+        // this.canvas.addEventListener("webglcontextlost", this.onContextLost, false);
+        // this.canvas.addEventListener("webglcontextrestored", this.onContextRestored, false);
+        // this.canvas.addEventListener(
+        // 	"mousedown",
+        // 	() => {
+        // 		this.isUserRotating = true;
+        // 	},
+        // 	false
+        // );
+        // this.canvas.addEventListener(
+        // 	"mouseup",
+        // 	() => {
+        // 		this.isUserRotating = false;
+        // 	},
+        // 	false
+        // );
+        // this.canvas.addEventListener(
+        // 	"touchmove",
+        // 	e => {
+        // 		if (e.touches.length === 1) {
+        // 			this.isUserRotating = true;
+        // 		} else {
+        // 			this.isUserRotating = false;
+        // 		}
+        // 	},
+        // 	false
+        // );
+        // this.canvas.addEventListener(
+        // 	"touchend",
+        // 	() => {
+        // 		this.isUserRotating = false;
+        // 	},
+        // 	false
+        // );
+        this.ready = Promise.allSettled(this._loadPromiseArr);
+    }
+    updateComposerSize() {
+        this.composer.setSize(this.width, this.height);
+        const pixelRatio = this.renderer.getPixelRatio();
+        this.composer.setPixelRatio(pixelRatio);
+        this.fxaaPass.material.uniforms['resolution'].value.x = 1 / (this.width * pixelRatio);
+        this.fxaaPass.material.uniforms['resolution'].value.y = 1 / (this.height * pixelRatio);
+    }
+    recreateSkinTexture() {
+        if (this.skinTexture !== null) {
+            this.skinTexture.dispose();
+        }
+        this.skinTexture = canvas2DataTexture(this.skinCanvas);
+        this.skinTexture.magFilter = NearestFilter;
+        this.skinTexture.minFilter = NearestFilter;
+        this.playerObject.skin.map = this.skinTexture;
+    }
+    recreateCapeTexture() {
+        if (this.capeTexture !== null) {
+            this.capeTexture.dispose();
+        }
+        this.capeTexture = canvas2DataTexture(this.capeCanvas);
+        this.capeTexture.magFilter = NearestFilter;
+        this.capeTexture.minFilter = NearestFilter;
+        this.playerObject.cape.map = this.capeTexture;
+        this.playerObject.elytra.map = this.capeTexture;
+    }
+    recreateEarsTexture() {
+        if (this.earsTexture !== null) {
+            this.earsTexture.dispose();
+        }
+        this.earsTexture = canvas2DataTexture(this.earsCanvas);
+        this.earsTexture.magFilter = NearestFilter;
+        this.earsTexture.minFilter = NearestFilter;
+        this.playerObject.ears.map = this.earsTexture;
+    }
+    loadSkin(source, options = {}) {
+        if (source === null) {
+            this.resetSkin();
+        }
+        else if (isTextureSource(source)) {
+            loadSkinToCanvas(this.skinCanvas, source);
+            this.recreateSkinTexture();
+            if (options.model === undefined || options.model === 'auto-detect') {
+                this.playerObject.skin.modelType = inferModelType(this.skinCanvas);
+            }
+            else {
+                this.playerObject.skin.modelType = options.model;
+            }
+            if (options.makeVisible !== false) {
+                this.playerObject.skin.visible = true;
+            }
+            if (options.ears === true || options.ears == 'load-only') {
+                loadEarsToCanvasFromSkin(this.earsCanvas, source);
+                this.recreateEarsTexture();
+                if (options.ears === true) {
+                    this.playerObject.ears.visible = true;
+                    if (this._nameTag) {
+                        this.nameTagYOffset = 25;
+                        this._nameTag.position.y = this.nameTagYOffset;
+                    }
+                }
+            }
+        }
+        else {
+            return loadImage(source).then(image => this.loadSkin(image, options));
+        }
+    }
+    resetSkin() {
+        this.playerObject.skin.visible = false;
+        this.playerObject.skin.map = null;
+        if (this.skinTexture !== null) {
+            this.skinTexture.dispose();
+            this.skinTexture = null;
+        }
+    }
+    loadCape(source, options = {}) {
+        if (source === null) {
+            this.resetCape();
+        }
+        else if (isTextureSource(source)) {
+            loadCapeToCanvas(this.capeCanvas, source);
+            this.recreateCapeTexture();
+            if (options.makeVisible !== false) {
+                this.playerObject.backEquipment = options.backEquipment || 'cape';
+            }
+        }
+        else {
+            return loadImage(source).then(image => this.loadCape(image, options));
+        }
+    }
+    resetCape() {
+        this.playerObject.backEquipment = null;
+        this.playerObject.cape.map = null;
+        this.playerObject.elytra.map = null;
+        if (this.capeTexture !== null) {
+            this.capeTexture.dispose();
+            this.capeTexture = null;
+        }
+    }
+    loadEars(source, options = {}) {
+        if (source === null) {
+            this.resetEars();
+        }
+        else if (isTextureSource(source)) {
+            if (options.textureType === 'skin') {
+                loadEarsToCanvasFromSkin(this.earsCanvas, source);
+            }
+            else {
+                loadEarsToCanvas(this.earsCanvas, source);
+            }
+            this.recreateEarsTexture();
+            if (options.makeVisible !== false) {
+                this.playerObject.ears.visible = true;
+                if (this._nameTag) {
+                    this.nameTagYOffset = 25;
+                    this._nameTag.position.y = this.nameTagYOffset;
+                }
+            }
+        }
+        else {
+            return loadImage(source).then(image => this.loadEars(image, options));
+        }
+    }
+    resetEars() {
+        this.playerObject.ears.visible = false;
+        if (this._nameTag) {
+            this.nameTagYOffset = 20;
+            this._nameTag.position.y = this.nameTagYOffset;
+        }
+        this.playerObject.ears.map = null;
+        if (this.earsTexture !== null) {
+            this.earsTexture.dispose();
+            this.earsTexture = null;
+        }
+    }
+    loadPanorama(source) {
+        return this.loadBackground(source, EquirectangularReflectionMapping);
+    }
+    loadBackground(source, mapping) {
+        if (isTextureSource(source)) {
+            if (this.backgroundTexture !== null) {
+                this.backgroundTexture.dispose();
+            }
+            this.backgroundTexture = new Texture();
+            this.backgroundTexture.image = source;
+            if (mapping !== undefined) {
+                this.backgroundTexture.mapping = mapping;
+            }
+            this.backgroundTexture.needsUpdate = true;
+            this.scene.background = this.backgroundTexture;
+        }
+        else {
+            return loadImage(source).then(image => this.loadBackground(image, mapping));
+        }
+    }
+    toRGBA() {
+        const buf = new Uint8Array(this.width * this.height * 4);
+        this.ctx.readPixels(0, 0, this.width, this.height, this.ctx.RGBA, this.ctx.UNSIGNED_BYTE, buf);
+        const res = new Uint8Array(this.width * this.height * 4);
+        for (let y = 0; y < this.height; y++) {
+            for (let x = 0; x < this.width; x++) {
+                const srcIdx = ((this.height - 1 - y) * this.width + x) * 4;
+                const dstIdx = (y * this.width + x) * 4;
+                res[dstIdx] = buf[srcIdx];
+                res[dstIdx + 1] = buf[srcIdx + 1];
+                res[dstIdx + 2] = buf[srcIdx + 2];
+                res[dstIdx + 3] = buf[srcIdx + 3];
+            }
+        }
+        return res;
+    }
+    toBuffer(format = 'png', options) {
+        const buf = this.toRGBA();
+        const outCanvas = new Canvas(this.width, this.height);
+        const ctx2d = outCanvas.getContext('2d');
+        const imageData = ctx2d.createImageData(this.width, this.height);
+        for (let y = 0; y < this.height; y++) {
+            for (let x = 0; x < this.width; x++) {
+                const srcIdx = (y * this.width + x) * 4;
+                const dstIdx = (y * this.width + x) * 4;
+                imageData.data[dstIdx] = buf[srcIdx];
+                imageData.data[dstIdx + 1] = buf[srcIdx + 1];
+                imageData.data[dstIdx + 2] = buf[srcIdx + 2];
+                imageData.data[dstIdx + 3] = buf[srcIdx + 3];
+            }
+        }
+        ctx2d.putImageData(imageData, 0, 0);
+        return outCanvas.toBufferSync(format, options);
+    }
+    /**
+     * Renders the scene to the canvas.
+     * This method does not change the animation progress.
+     */
+    render() {
+        this.composer.render();
+    }
+    renderAnimationFrame(progress, binary = false) {
+        if (this._animation == null) {
+            throw new Error('No animation.');
+        }
+        return () => {
+            this._animation.render(this.playerObject, progress);
+            this.render();
+            return binary ? this.toBuffer('png') : this.toRGBA();
+        };
+    }
+    renderAnimationLoop(frames = 30, binary = false) {
+        if (this._animation == null) {
+            throw new Error('No animation.');
+        }
+        return new Array(frames).fill(null).map((_, i) => {
+            return () => {
+                // this.playerObject.resetJoints();
+                // this.playerObject.position.set(0, 0, 0);
+                // this.playerObject.rotation.set(0, 0, 0);
+                this._animation.render(this.playerObject, i / frames);
+                this.render();
+                return binary ? this.toBuffer('png') : this.toRGBA();
+            };
+        });
+    }
+    setSize(width, height) {
+        this.camera.aspect = width / height;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setSize(width, height);
+        this.updateComposerSize();
+    }
+    dispose() {
+        this._disposed = true;
+        // this.canvas.removeEventListener("webglcontextlost", this.onContextLost, false);
+        // this.canvas.removeEventListener("webglcontextrestored", this.onContextRestored, false);
+        // if (this.devicePixelRatioQuery !== null) {
+        // 	this.devicePixelRatioQuery.removeEventListener("change", this.onDevicePixelRatioChange);
+        // 	this.devicePixelRatioQuery = null;
+        // }
+        // if (this.animationID !== null) {
+        // 	window.cancelAnimationFrame(this.animationID);
+        // 	this.animationID = null;
+        // }
+        // this.controls.dispose();
+        try {
+            this.renderer.dispose();
+        }
+        catch (error) {
+            // https://github.com/mrdoob/three.js/issues/33157
+        }
+        this.resetSkin();
+        this.resetCape();
+        this.resetEars();
+        this.background = null;
+        this.fxaaPass.fsQuad.dispose();
+    }
+    get disposed() {
+        return this._disposed;
+    }
+    /**
+     * Whether rendering and animations are paused.
+     * Setting this property to true will stop both rendering and animation loops.
+     * Setting it back to false will resume them.
+     */
+    // get renderPaused(): boolean {
+    // 	return this._renderPaused;
+    // }
+    // set renderPaused(value: boolean) {
+    // 	this._renderPaused = value;
+    // 	if (this._renderPaused && this.animationID !== null) {
+    // 		window.cancelAnimationFrame(this.animationID);
+    // 		this.animationID = null;
+    // 		this.clock.stop();
+    // 		this.clock.autoStart = true;
+    // 	} else if (
+    // 		!this._renderPaused &&
+    // 		!this._disposed &&
+    // 		!this.renderer.getContext().isContextLost() &&
+    // 		this.animationID == null
+    // 	) {
+    // 		this.animationID = window.requestAnimationFrame(() => this.draw());
+    // 	}
+    // }
+    get width() {
+        return this.renderer.getSize(new Vector2()).width;
+    }
+    set width(newWidth) {
+        this.setSize(newWidth, this.height);
+    }
+    get height() {
+        return this.renderer.getSize(new Vector2()).height;
+    }
+    set height(newHeight) {
+        this.setSize(this.width, newHeight);
+    }
+    get background() {
+        return this.scene.background;
+    }
+    set background(value) {
+        if (value === null || value instanceof Color || value instanceof Texture) {
+            this.scene.background = value;
+        }
+        else {
+            this.scene.background = new Color(value);
+        }
+        if (this.backgroundTexture !== null && value !== this.backgroundTexture) {
+            this.backgroundTexture.dispose();
+            this.backgroundTexture = null;
+        }
+    }
+    adjustCameraDistance() {
+        let distance = 4.5 + 16.5 / Math.tan(((this.fov / 180) * Math.PI) / 2) / this.zoom;
+        // limit distance between 10 ~ 256 (default min / max distance of OrbitControls)
+        if (distance < 10) {
+            distance = 10;
+        }
+        else if (distance > 256) {
+            distance = 256;
+        }
+        this.camera.position.multiplyScalar(distance / this.camera.position.length());
+        this.camera.updateProjectionMatrix();
+    }
+    resetCameraPose() {
+        this.camera.position.set(0, 0, 1);
+        this.camera.rotation.set(0, 0, 0);
+        this.adjustCameraDistance();
+    }
+    get fov() {
+        return this.camera.fov;
+    }
+    set fov(value) {
+        this.camera.fov = value;
+        this.adjustCameraDistance();
+    }
+    get zoom() {
+        return this._zoom;
+    }
+    set zoom(value) {
+        this._zoom = value;
+        this.adjustCameraDistance();
+    }
+    get pixelRatio() {
+        return this._pixelRatio;
+    }
+    set pixelRatio(newValue) {
+        // if (newValue === "match-device") {
+        // 	if (this._pixelRatio !== "match-device") {
+        // 		this._pixelRatio = newValue;
+        // 		this.onDevicePixelRatioChange();
+        // 	}
+        // } else {
+        // 	if (this._pixelRatio === "match-device" && this.devicePixelRatioQuery !== null) {
+        // 		this.devicePixelRatioQuery.removeEventListener("change", this.onDevicePixelRatioChange);
+        // 		this.devicePixelRatioQuery = null;
+        // 	}
+        this._pixelRatio = newValue;
+        this.renderer.setPixelRatio(newValue);
+        this.updateComposerSize();
+        // }
+    }
+    /**
+     * The animation that is current playing, or `null` if no animation is playing.
+     *
+     * Setting this property to a different value will change the current animation.
+     * The player's pose and the progress of the new animation will be reset before playing.
+     *
+     * Setting this property to `null` will stop the current animation and reset the player's pose.
+     */
+    get animation() {
+        return this._animation;
+    }
+    set animation(animation) {
+        if (this._animation !== animation) {
+            this.playerObject.resetJoints();
+            this.playerObject.position.set(0, 0, 0);
+            this.playerObject.rotation.set(0, 0, 0);
+            if (this._nameTag) {
+                this._nameTag.position.y = this.nameTagYOffset;
+            }
+            // this.clock.stop();
+            // this.clock.autoStart = true;
+        }
+        // if (animation !== null) {
+        // 	animation.progress = 0;
+        // }
+        this._animation = animation;
+    }
+    /**
+     * The name tag to display above the player, or `null` if there is none.
+     *
+     * When setting this property to a `string` value, a {@link NameTagObject}
+     * will be automatically created with default options.
+     *
+     * @example
+     * ```
+     * skinViewer.nameTag = "hello";
+     * skinViewer.nameTag = new NameTagObject("hello", { textStyle: "yellow" });
+     * skinViewer.nameTag = null;
+     * ```
+     */
+    get nameTag() {
+        return this._nameTag;
+    }
+    set nameTag(newVal) {
+        if (this._nameTag !== null) {
+            // Remove the old name tag from the scene
+            this.playerWrapper.remove(this._nameTag);
+        }
+        if (newVal !== null) {
+            if (!(newVal instanceof Object3D)) {
+                newVal = new NameTagObject(newVal);
+            }
+            // Add the new name tag to the scene
+            this.playerWrapper.add(newVal);
+            // Set y position
+            this.nameTagYOffset = this.playerObject.ears.visible ? 25 : 20;
+            newVal.position.y = this.nameTagYOffset;
+        }
+        this._nameTag = newVal;
+        this.playerObject.nameTag = newVal || undefined;
+    }
+}
+
+const defaultParams = {
+    multiple: {
+        value: 1,
+        desc: '整数倍频率'
+    },
+    delay: {
+        value: 5,
+        desc: '每帧延迟时间 1/100ms, 1=10ms'
+    }
+};
+function getParamsValue(params) {
+    return Object.fromEntries(Object.entries(params).map(([key, value]) => [key, value.value]));
+}
+class PlayerAnimation {
+    static params = {
+        ...defaultParams
+    };
+    // 这一层只需要暴露一个接口给外部调用
+    render(player, progress) {
+        // 确保 progress 在 0-1 之间 (可选，视需求而定)
+        // const p = progress % 1.0;
+        this.animate(player, progress);
+    }
+}
+/**
+ * A class that helps you create an animation from a function.
+ *
+ * @example
+ * To create an animation that rotates the player:
+ * ```
+ * new FunctionAnimation((player, progress) => player.rotation.y = progress)
+ * ```
+ */
+class FunctionAnimation extends PlayerAnimation {
+    static title = '函数';
+    static params = {
+        ...defaultParams
+    };
+    params = getParamsValue(PlayerAnimation.params);
+    fn;
+    constructor(fn) {
+        super();
+        this.fn = fn;
+    }
+    animate(player, progress) {
+        this.fn(player, progress);
+    }
+}
+class IdleAnimation extends PlayerAnimation {
+    static title = '常态';
+    static params = {
+        ...defaultParams
+    };
+    params = getParamsValue(IdleAnimation.params);
+    animate(player, progress) {
+        // Multiply by animation's natural speed
+        const t = progress * 2 * Math.PI * this.params.multiple;
+        // Arm swing
+        const basicArmRotationZ = Math.PI * 0.02;
+        player.skin.leftArm.rotation.z = Math.cos(t) * 0.03 + basicArmRotationZ;
+        player.skin.rightArm.rotation.z = Math.cos(t + Math.PI) * 0.03 - basicArmRotationZ;
+        // Always add an angle for cape around the x axis
+        const basicCapeRotationX = Math.PI * 0.06;
+        player.cape.rotation.x = Math.sin(t) * 0.01 + basicCapeRotationX;
+    }
+}
+class WalkingAnimation extends PlayerAnimation {
+    /**
+     * Whether to shake head when walking.
+     *
+     * @defaultValue `true`
+     */
+    // headBobbing: boolean = true;
+    static title = '行走';
+    static params = {
+        ...defaultParams,
+        headBobbing: {
+            value: true,
+            desc: '是否摇晃头部'
+        }
+    };
+    params = getParamsValue(WalkingAnimation.params);
+    animate(player, progress) {
+        // 基础周期：0 -> 2PI
+        // 所有的动作都基于这个 base
+        const t = progress * 2 * Math.PI * this.params.multiple;
+        // 肢体摆动 (频率 1x)
+        player.skin.leftLeg.rotation.x = Math.sin(t) * 0.5;
+        player.skin.rightLeg.rotation.x = Math.sin(t + Math.PI) * 0.5;
+        player.skin.leftArm.rotation.x = Math.sin(t + Math.PI) * 0.5;
+        player.skin.rightArm.rotation.x = Math.sin(t) * 0.5;
+        const basicArmRotationZ = Math.PI * 0.02;
+        player.skin.leftArm.rotation.z = Math.cos(t) * 0.03 + basicArmRotationZ;
+        player.skin.rightArm.rotation.z = Math.cos(t + Math.PI) * 0.03 - basicArmRotationZ;
+        // 头部摇晃 (频率 2x - 保证在 0-1 周期内摇晃整数次)
+        // 原版是 /4, /5，这里为了完美闭环，必须设为整数倍
+        // 比如设定：走一圈，头晃 2 次
+        if (this.params.headBobbing) {
+            // Head shaking with different frequency & amplitude
+            player.skin.head.rotation.y = Math.sin(t * 1) * 0.1; // 左右晃
+            player.skin.head.rotation.x = Math.sin(t * 2) * 0.05; // 上下晃
+        }
+        else {
+            player.skin.head.rotation.y = 0;
+            player.skin.head.rotation.x = 0;
+        }
+        // 披风 (频率 1x 或 2x)
+        player.cape.rotation.x = Math.sin(t) * 0.06 + Math.PI * 0.06;
+    }
+}
+class RunningAnimation extends PlayerAnimation {
+    static title = '跑步';
+    static params = {
+        ...defaultParams,
+        multiply: {
+            value: 3,
+            desc: defaultParams.multiple.desc
+        }
+        // jump: {
+        // 	value: true,
+        // 	desc: '是否跳起'
+        // }
+    };
+    params = getParamsValue(RunningAnimation.params);
+    animate(player, progress) {
+        // 基础周期：0 -> 2PI
+        const t = progress * 2 * Math.PI * this.params.multiple + Math.PI * 0.5; // 保留相位偏移
+        // Leg swing with larger amplitude
+        player.skin.leftLeg.rotation.x = Math.cos(t + Math.PI) * 1.3;
+        player.skin.rightLeg.rotation.x = Math.cos(t) * 1.3;
+        // Arm swing
+        player.skin.leftArm.rotation.x = Math.cos(t) * 1.5;
+        player.skin.rightArm.rotation.x = Math.cos(t + Math.PI) * 1.5;
+        // 身体跳动 (频率 2x)
+        // 跑一步跳一下，左右各一步，所以跳两下 -> 2x
+        player.position.y = Math.cos(t * 2);
+        // Dodging when running
+        player.position.x = Math.cos(t) * 0.15;
+        // Slightly tilting when running
+        player.rotation.z = Math.cos(t + Math.PI) * 0.01;
+        // Apply higher swing frequency, lower amplitude,
+        // and greater basic rotation around x axis,
+        // to cape when running.
+        // 披风 (频率 2x)
+        player.cape.rotation.x = Math.sin(t * 2) * 0.1 + Math.PI * 0.3;
+        // What about head shaking?
+        // You shouldn't glance right and left when running dude :P
+        if (player.nameTag)
+            player.nameTag.position.y = player.position.y + 20;
+    }
+}
+function clamp(num, min, max) {
+    return Math.min(Math.max(num, min), max);
+}
+class FlyingAnimation extends PlayerAnimation {
+    static title = '飞行';
+    static params = {
+        ...defaultParams,
+        multiple: {
+            value: 2,
+            desc: defaultParams.multiple.desc
+        }
+    };
+    params = getParamsValue(FlyingAnimation.params);
+    animate(player, progress) {
+        // Body rotation finishes in 0.5s
+        // Elytra expansion finishes in 3.3s
+        const t = progress * Math.PI * 2 * this.params.multiple;
+        const startProgress = clamp((t * t) / 100, 0, 1);
+        player.rotation.x = (startProgress * Math.PI) / 2;
+        player.skin.head.rotation.x = startProgress > 0.5 ? Math.PI / 4 - player.rotation.x : 0;
+        const basicArmRotationZ = Math.PI * 0.25 * startProgress;
+        player.skin.leftArm.rotation.z = basicArmRotationZ;
+        player.skin.rightArm.rotation.z = -basicArmRotationZ;
+        const elytraRotationX = 0.34906584;
+        const elytraRotationZ = Math.PI / 2;
+        const interpolation = Math.pow(0.9, t);
+        player.elytra.leftWing.rotation.x = elytraRotationX + interpolation * (0.2617994 - elytraRotationX);
+        player.elytra.leftWing.rotation.z = elytraRotationZ + interpolation * (0.2617994 - elytraRotationZ);
+        player.elytra.updateRightWing();
+    }
+}
+class WaveAnimation extends PlayerAnimation {
+    static title = '挥手';
+    static params = {
+        ...defaultParams,
+        whichArm: {
+            value: 'left',
+            desc: '挥动哪个胳膊',
+            choices: ['left', 'right', 'both']
+        },
+        sameDirection: {
+            value: true,
+            desc: '挥动方向相同'
+        }
+    };
+    params = getParamsValue(WaveAnimation.params);
+    animate(player, progress) {
+        const t = progress * 2 * Math.PI * this.params.multiple;
+        const targetArm = this.params.whichArm === 'left' ? player.skin.leftArm : player.skin.rightArm;
+        targetArm.rotation.x = 180;
+        targetArm.rotation.z = Math.sin(t) * 0.5;
+        if (this.params.whichArm === 'both') {
+            player.skin.leftArm.rotation.x = targetArm.rotation.x;
+            player.skin.leftArm.rotation.z = this.params.sameDirection ? targetArm.rotation.z : -Math.sin(t) * 0.5;
+        }
+    }
+}
+class CrouchAnimation extends PlayerAnimation {
+    static title = '蹲伏';
+    static params = {
+        ...defaultParams,
+        showProgress: {
+            value: false,
+            desc: '是否启用平滑过渡。 false (默认): 像 Minecraft 游戏内一样，瞬间在站立和蹲下间切换。true: 平滑地蹲下和起立（适合展示动画）。'
+        },
+        isStatic: {
+            value: false,
+            desc: '是否保持静止的蹲下状态。为 true 则忽略 progress，始终保持完全蹲下的姿态。'
+        },
+        isRunningHitAnimation: {
+            value: false,
+            desc: '是否同时播放攻击（挥手）动画'
+        },
+        hitCycles: {
+            value: 8,
+            desc: '攻击动画的次数'
+        }
+    };
+    params = getParamsValue(CrouchAnimation.params);
+    animate(player, progress) {
+        // 1. 计算蹲下系数 (crouchFactor)
+        // 范围 0.0 (站立) 到 1.0 (完全蹲下)
+        let crouchFactor;
+        if (this.params.isStatic) {
+            crouchFactor = 1.0; // 始终蹲下
+        }
+        else {
+            // 将 0-1 的进度映射为 0-1-0 的正弦波 (蹲下再站起)
+            // progress: 0 -> 0.5 -> 1.0
+            // angle:    0 -> PI  -> 2PI
+            // sin:      0 -> 1   -> 0
+            const t = progress * 2 * Math.PI * this.params.multiple;
+            crouchFactor = Math.abs(Math.sin(t / 2));
+        }
+        // 2. 处理 "瞬间切换" 逻辑 (Minecraft 原版风格)
+        if (!this.params.showProgress && !this.params.isStatic) {
+            // 如果进度 > 0.5 则算蹲下，否则算站立
+            crouchFactor = crouchFactor > (this.params.showProgress ? 0 : 0.4) ? 1.0 : 0.0;
+        }
+        // --- 应用身体位移和旋转 (使用 crouchFactor 插值) ---
+        // 身体前倾
+        player.skin.body.rotation.x = 0.4537860552 * crouchFactor;
+        // 身体位置调整 (Y轴下降, Z轴后退)
+        player.skin.body.position.y = -6 - 2.103677462 * crouchFactor;
+        player.skin.body.position.z = 1.3256181 * crouchFactor - 3.4500310377 * crouchFactor;
+        // 头部位置 (跟随身体下沉)
+        player.skin.head.position.y = -3.618325234674 * crouchFactor;
+        // 手臂位置和旋转
+        // 基础位置偏移
+        const armZ = 3.618325234674 * crouchFactor - 3.4500310377 * crouchFactor;
+        const armY = -2 - 2.53943318 * crouchFactor;
+        player.skin.leftArm.position.z = armZ;
+        player.skin.rightArm.position.z = armZ;
+        player.skin.leftArm.position.y = armY;
+        player.skin.rightArm.position.y = armY;
+        // 手臂旋转 (保持垂直或跟随身体)
+        player.skin.leftArm.rotation.x = 0.410367746202 * crouchFactor;
+        player.skin.rightArm.rotation.x = player.skin.leftArm.rotation.x;
+        // 手臂微张
+        player.skin.leftArm.rotation.z = 0.1;
+        player.skin.rightArm.rotation.z = -0.1;
+        // 腿部位置
+        player.skin.leftLeg.position.z = -3.4500310377 * crouchFactor;
+        player.skin.rightLeg.position.z = -3.4500310377 * crouchFactor;
+        // 披风 (Cape) 调整
+        player.cape.position.y = 8 - 1.851236166577372 * crouchFactor;
+        player.cape.position.z = -2 + 3.786619432 * crouchFactor - 3.4500310377 * crouchFactor;
+        player.cape.rotation.x = (10.8 * Math.PI) / 180 + 0.294220265771 * crouchFactor;
+        // --- 鞘翅 (Elytra) 逻辑重写 ---
+        // 移除 isCrouched 状态，直接基于 crouchFactor 计算位置
+        player.elytra.position.x = player.cape.position.x;
+        player.elytra.position.y = player.cape.position.y;
+        player.elytra.position.z = player.cape.position.z;
+        player.elytra.rotation.x = player.cape.rotation.x - (10.8 * Math.PI) / 180;
+        // 鞘翅开合角度：
+        // 站立时 (crouchFactor=0) -> 0.26 rad
+        // 蹲下时 (crouchFactor=1) -> 0.72 rad (根据原代码逻辑推算)
+        // 使用线性插值替代原有的复杂状态机
+        const wingRotZ = 0.26179944 + 0.4582006 * crouchFactor;
+        player.elytra.leftWing.rotation.z = wingRotZ;
+        player.elytra.updateRightWing();
+        // --- 攻击 (Hit) 动画逻辑 ---
+        if (this.params.isRunningHitAnimation) {
+            if (crouchFactor !== 1) {
+                // 只在蹲下时播放
+                if (crouchFactor === 0) {
+                    player.skin.body.rotation.y = 0;
+                }
+                return;
+            }
+            // 为了保证循环完美，攻击频率必须是主循环的整数倍。
+            // 比如主循环是蹲下再起来 (1次)，期间挥动 2 次手。
+            const t = progress * 2 * Math.PI * this.params.hitCycles;
+            // 基础手臂旋转 Z
+            const basicArmRotationZ = 0.01 * Math.PI + 0.06;
+            // 右手攻击
+            // 叠加在蹲下的旋转基础上
+            const crouchOffsetX = 0.4537860552 * crouchFactor;
+            // Right Arm Swing
+            player.skin.rightArm.rotation.x = -crouchOffsetX + 2 * Math.sin(t + Math.PI) * 0.3 - crouchOffsetX;
+            player.skin.rightArm.rotation.z = -Math.cos(t) * 0.403 + basicArmRotationZ;
+            // Body Twist
+            player.skin.body.rotation.y = -Math.cos(t) * 0.06;
+            // Left Arm Compensation (摆动平衡)
+            player.skin.leftArm.rotation.x = Math.sin(t + Math.PI) * 0.077 + 0.47 * crouchFactor;
+            player.skin.leftArm.rotation.z = -Math.cos(t) * 0.015 + 0.13 - 0.05 * (1 - crouchFactor);
+            // 左手位置微调 (仅在站立时明显，原代码逻辑)
+            // 使用 (1 - crouchFactor) 来限制仅在站立附近生效
+            const standFactor = 1 - crouchFactor;
+            player.skin.leftArm.position.z += Math.cos(t) * 0.3 * standFactor;
+            player.skin.leftArm.position.x = 5 - Math.cos(t) * 0.05 * standFactor;
+        }
+    }
+}
+class HitAnimation extends PlayerAnimation {
+    // multiple: number = 2;
+    static title = '击打';
+    static params = {
+        ...defaultParams,
+        multiple: {
+            value: 10,
+            desc: defaultParams.multiple.desc
+        }
+    };
+    params = getParamsValue(HitAnimation.params);
+    animate(player, progress) {
+        const t = progress * Math.PI * 2 * this.params.multiple;
+        player.skin.rightArm.rotation.x = -0.4537860552 * 2 + 2 * Math.sin(t + Math.PI) * 0.3;
+        const basicArmRotationZ = 0.01 * Math.PI + 0.06;
+        player.skin.rightArm.rotation.z = -Math.cos(t) * 0.403 + basicArmRotationZ;
+        player.skin.body.rotation.y = -Math.cos(t) * 0.06;
+        player.skin.leftArm.rotation.x = Math.sin(t + Math.PI) * 0.077;
+        player.skin.leftArm.rotation.z = -Math.cos(t) * 0.015 + 0.13 - 0.05;
+        player.skin.leftArm.position.z = Math.cos(t) * 0.3;
+        player.skin.leftArm.position.x = 5 - Math.cos(t) * 0.05;
+    }
+}
+class SwimAnimation extends PlayerAnimation {
+    static title = '游泳';
+    static params = {
+        ...defaultParams,
+        multiple: {
+            value: 1,
+            desc: defaultParams.multiple.desc
+        }
+    };
+    params = getParamsValue(SwimAnimation.params);
+    animate(player, progress) {
+        player.position.y = -5;
+        player.rotation.x = Math.PI / 2;
+        player.skin.head.rotation.x = -Math.PI / 4;
+        player.cape.rotation.x = Math.PI / 4;
+        const loopProgress = (progress * this.params.multiple) % 1;
+        // keyframe timing points
+        const times = [0, 0.7 / 1.3, 1.1 / 1.3, 1.0];
+        const leftEulerDeg = [
+            { z: 180, y: 180, x: 0 },
+            { z: 287.2, y: 180, x: 0 },
+            { z: 180, y: 180, x: 90 },
+            { z: 180, y: 180, x: 0 }
+        ];
+        const rightEulerDeg = [
+            { z: -180, y: 180, x: 0 },
+            { z: -287.2, y: 180, x: 0 },
+            { z: -180, y: 180, x: 90 },
+            { z: -180, y: 180, x: 0 }
+        ];
+        const toRad = Math.PI / 180;
+        function eulerZYXToQuat(z, y, x) {
+            const qz = new Quaternion().setFromAxisAngle(new Vector3(0, 0, 1), z);
+            const qy = new Quaternion().setFromAxisAngle(new Vector3(0, 1, 0), y);
+            const qx = new Quaternion().setFromAxisAngle(new Vector3(1, 0, 0), x);
+            return qx.multiply(qy).multiply(qz);
+        }
+        const leftQuats = leftEulerDeg.map(e => eulerZYXToQuat(e.z * toRad, e.y * toRad, e.x * toRad));
+        const rightQuats = rightEulerDeg.map(e => eulerZYXToQuat(e.z * toRad, e.y * toRad, e.x * toRad));
+        function findSegment(t) {
+            for (let i = 0; i < times.length - 1; i++) {
+                if (t >= times[i] && t <= times[i + 1]) {
+                    return { i, t0: times[i], t1: times[i + 1] };
+                }
+            }
+            return { i: times.length - 2, t0: times[times.length - 2], t1: times[times.length - 1] };
+        }
+        const seg = findSegment(loopProgress);
+        const p = (loopProgress - seg.t0) / (seg.t1 - seg.t0);
+        const i = seg.i;
+        const qLeft = new Quaternion().copy(leftQuats[i]).slerp(leftQuats[i + 1], p);
+        const qRight = new Quaternion().copy(rightQuats[i]).slerp(rightQuats[i + 1], p);
+        player.skin.leftArm.quaternion.copy(qLeft);
+        player.skin.rightArm.quaternion.copy(qRight);
+        const legAmp = 17.2 * toRad;
+        const legPhase = loopProgress * Math.PI * 2;
+        const leftLegX = legAmp * Math.cos(legPhase + Math.PI);
+        const rightLegX = legAmp * Math.cos(legPhase);
+        player.skin.leftLeg.rotation.x = leftLegX;
+        player.skin.leftLeg.rotation.y = -0.1 * toRad;
+        player.skin.leftLeg.rotation.z = -0.1 * toRad;
+        player.skin.rightLeg.rotation.x = rightLegX;
+        player.skin.rightLeg.rotation.y = 0.1 * toRad;
+        player.skin.rightLeg.rotation.z = 0.1 * toRad;
+    }
+}
+class SpinUpAnimation extends PlayerAnimation {
+    static title = '旋转起飞';
+    static params = {
+        ...defaultParams,
+        maxHeight: {
+            value: 90,
+            desc: '最高高度'
+        },
+        rotationTurns: {
+            value: 6,
+            desc: '旋转圈数'
+        },
+        /**分头行动 */
+        headOff: {
+            value: false,
+            desc: '分头行动，为 true 时只有头飞走'
+        }
+    };
+    params = getParamsValue(SpinUpAnimation.params);
+    animate(player, progress) {
+        // --- 1. 手臂平举动画 (前 30% 时间) ---
+        const armProgress = clamp(progress / 0.3, 0, 1);
+        // 使用 sin(x * PI/2) 可以在 x=1 时精确到达 1，实现平滑过渡
+        const armSpreadFactor = Math.sin((armProgress * Math.PI) / 2);
+        player.skin.leftArm.rotation.z = armSpreadFactor * (Math.PI / 2);
+        player.skin.rightArm.rotation.z = -armSpreadFactor * (Math.PI / 2);
+        // --- 2. 身体旋转 ---
+        player.rotation.y = Math.pow(progress, 2) * (Math.PI * 2) * this.params.rotationTurns;
+        const a = Math.pow(clamp(progress * 2, 0, 1), 2);
+        player.cape.rotation.x = a * (Math.PI / 2);
+        player.elytra.rotation.x = a * (Math.PI / 2 - 0.2); // -0.2 让鞘翅看起来不偏上
+        // --- 3. 身体上升 (后 70% 时间) ---
+        const flyStartThreshold = 0.3;
+        let riseHeight = 0;
+        if (progress > flyStartThreshold) {
+            // 将 0.3 ~ 1.0 映射为 0 ~ 1
+            const flyProgress = (progress - flyStartThreshold) / (1 - flyStartThreshold);
+            riseHeight = Math.pow(flyProgress, 3) * this.params.maxHeight;
+        }
+        if (this.params.headOff)
+            player.skin.head.position.y = riseHeight;
+        else
+            player.position.y = riseHeight;
+        if (player.nameTag)
+            player.nameTag.position.y = riseHeight + 20;
+    }
+}
+class RotateAnimation extends PlayerAnimation {
+    static title = '旋转展示';
+    static params = {
+        ...defaultParams
+    };
+    params = getParamsValue(RotateAnimation.params);
+    animate(player, progress) {
+        const t = progress * 2 * Math.PI * this.params.multiple;
+        player.rotation.y = t;
+        player.skin.leftArm.rotation.z = 0.1;
+        player.skin.rightArm.rotation.z = -0.1;
+    }
+}
+class NodAnimation extends PlayerAnimation {
+    // delay = 2;
+    // amp = 0.5;
+    static title = '点头';
+    static params = {
+        ...defaultParams,
+        delay: {
+            value: 2,
+            desc: defaultParams.delay.desc
+        },
+        amp: {
+            value: 0.5,
+            desc: '点头幅度'
+        }
+    };
+    params = getParamsValue(NodAnimation.params);
+    animate(player, progress) {
+        const t = progress * 2 * Math.PI * this.params.multiple;
+        player.skin.head.rotation.x = Math.sin(t) * this.params.amp;
+    }
+}
+// 辅助函数：线性插值
+// 当 t=0 返回 start，t=1 返回 end，中间平滑过渡
+function lerp(start, end, t) {
+    return start + (end - start) * t;
+}
+class FlailAnimation extends PlayerAnimation {
+    // multiple = 2;
+    // delay = 4;
+    static title = '手舞足蹈';
+    static params = {
+        ...defaultParams,
+        multiple: {
+            value: 2,
+            desc: defaultParams.multiple.desc
+        },
+        delay: {
+            value: 4,
+            desc: defaultParams.delay.desc
+        }
+    };
+    params = getParamsValue(FlailAnimation.params);
+    animate(player, progress) {
+        // 1. 定义时间参数
+        // highFreq: 高频震动（用于手脚快速摆动）
+        const highFreq = progress * 2 * Math.PI * this.params.multiple;
+        // lowFreq: 低频变化（用于控制状态过渡），0 -> 1 -> 0
+        // 使用 Math.sin(progress * Math.PI) 可以保证首尾都是 0 (跑步态)，中间是 1 (发疯态)
+        // 这样动画循环时是完美的：跑 -> 疯 -> 跑
+        const blendFactor = Math.sin(progress * Math.PI);
+        // 基础摆动幅度
+        const swingRad = Math.sin(highFreq) * 1.9;
+        // === 2. 腿部动作 (保持一直在跑) ===
+        // 腿部不需要过渡，一直保持快速奔跑
+        player.skin.leftLeg.rotation.x = -swingRad * 0.8;
+        player.skin.rightLeg.rotation.x = swingRad * 0.8;
+        // === 3. 手臂动作 (核心修改：平滑混合) ===
+        // 状态 A: 跑步时手臂自然下垂 (Z轴接近0)
+        const armZ_Run = 0.2;
+        // 状态 B: 发疯时手臂平举 (Z轴 90度/PI/2)
+        const armZ_Flail = Math.PI / 2 + 0.3;
+        // 动态计算当前的 Z 轴角度：根据 blendFactor 在两者间平滑变化
+        const currentArmZ = lerp(armZ_Run, armZ_Flail, blendFactor);
+        player.skin.leftArm.rotation.z = currentArmZ;
+        player.skin.rightArm.rotation.z = -currentArmZ;
+        // 旋转轴混合：
+        // 当 blendFactor 为 0 时，完全使用 X 轴旋转 (跑步摆臂)
+        // 当 blendFactor 为 1 时，完全使用 Y 轴旋转 (直升机乱挥)
+        // 中间状态会自动混合两个轴的旋转
+        // X轴分量：跑步时满额，发疯时归零
+        const rotX = swingRad * (1 - blendFactor);
+        // Y轴分量：跑步时归零，发疯时满额
+        const rotY = swingRad * blendFactor;
+        player.skin.leftArm.rotation.x = rotX;
+        player.skin.rightArm.rotation.x = -rotX;
+        player.skin.leftArm.rotation.y = rotY;
+        player.skin.rightArm.rotation.y = rotY;
+        // === 4. 头部动作 (视线画圆) ===
+        // 原理：X轴管上下，Y轴管左右。
+        // 一个用 sin，一个用 cos，频率一致，就会形成圆周运动
+        // 稍微降低一点频率(highFreq / 2)，不要晃得太晕
+        const headSpeed = highFreq * 0.5;
+        const headAmp = 0.8; // 晃动幅度
+        player.skin.head.rotation.y = Math.sin(headSpeed) * headAmp; // 左右
+        player.skin.head.rotation.x = Math.cos(headSpeed) * headAmp; // 上下
+        // 稍微加一点 Z 轴歪头，看起来更疯癫
+        player.skin.head.rotation.z = Math.sin(headSpeed * 0.5) * 0.1;
+        // === 5. 身体位移 ===
+        // 上下跳动
+        player.position.y = Math.sin(highFreq * 2) * 2;
+        // 左右胡乱位移
+        player.position.x = Math.cos(highFreq * 0.5) * 0.5;
+        // 身体稍微前倾一点
+        player.rotation.x = 0.15;
+        player.cape.rotation.x = Math.sin(highFreq * 2) * 0.2 + Math.PI * 0.3;
+        if (player.nameTag)
+            player.nameTag.position.y = player.position.y + 20;
+    }
+}
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+FontLibrary.use([join(__dirname, '../assets/minecraft.woff2')]);
+
+export { BodyPart, CapeObject, CrouchAnimation, EarsObject, ElytraObject, FlailAnimation, FlyingAnimation, FunctionAnimation, HitAnimation, IdleAnimation, NameTagObject, NodAnimation, PlayerAnimation, PlayerObject, RotateAnimation, RunningAnimation, SkinObject, SkinViewer, SpinUpAnimation, SwimAnimation, WalkingAnimation, WaveAnimation };