EmoteCraft TS Viewer

Online EmoteCraft viewer — preview Minecraft .emotecraft / JSON emotes in the browser (Three.js). Free demo, embed, npm package js-emote-anim v0.2.

Live demo: https://makarworld.github.io/EmoteCraftTSViewer/
How to: https://makarworld.github.io/EmoteCraftTSViewer/about.html

GitHub topics (set on the repo): emotecraft, emotecraft-viewer, threejs, minecraft-emotes, minecraft, json

Браузерный плеер эмоций EmoteCraft (.emotecraft / JSON) на Three.js.

Как пользоваться (demo)

1. Открой сайт или npm run dev.
2. Разделы: Viewer | Editor | Video (отдельные страницы).
3. Emote: Browse / drag-drop (.emotecraft / .json). Skin: Browse или Skin URL / NameMC / UUID… (mc-heads).
4. Viewport chrome: play/pause, scrubber, скорость. Space = play/pause.
5. Orbit = ЛКМ, Pan = СКМ / Shift+ЛКМ. Wheel zoom вкл по умолчанию (?zoom=0 или Settings → Scroll zoom выкл).
6. [R] reset camera, [H] hide UI.
7. Settings: theme OLED/Clay, slim arms, overlays, wireframe, grid + size, camera presets, loop mode, Screenshot PNG, Export WebM, Copy share link, Recent count.
8. Recent — локальные файлы в IndexedDB (SHA-256, без дублей).

Editor (editor.html)

Legacy moves[] (тики) + PAL-поля: player_animation_library, model/parents, MoLang в значениях, bezier easingArgs. Timeline + graph, undo/redo, export JSON / simplified .emotecraft, attach .nbs.

Video → animation (video.html)

MediaPipe Pose в браузере (без сервера) → draft keyframes → Open in Editor. Качество: простые жесты, анфас, хороший свет. Не Blockbench / не Bedrock JSON.

Share URL (публичные emote/skin только):

https://makarworld.github.io/EmoteCraftTSViewer/?emote=https://…/x.emotecraft&skin=Steve&zoom=0

Embed-параметры (embed=1): ещё tick, theme, speed.

Embed на свой сайт

iframe

<iframe
  src="https://makarworld.github.io/EmoteCraftTSViewer/?embed=1&emote=https://example.com/dance.emotecraft&skin=https://example.com/skin.png&tick=0&theme=oled"
  width="640"
  height="480"
  allow="fullscreen"
  style="border:0;border-radius:16px;overflow:hidden"
></iframe>

embed=1 прячет сайдбар — viewport + chrome.

npm / CDN

npm i js-emote-anim

import { mountEmotePlayer } from "js-emote-anim";
import "js-emote-anim/style.css";

const { viewer, chrome, dispose } = mountEmotePlayer(document.getElementById("box"), {
  emote: "https://example.com/hi.emotecraft",
  skin: "Notch", // URL / nick / UUID / File
  tick: 0,
  speed: 1,
  theme: "oled" // или "clay"
});

// viewer.setAfterRenderHook((renderer, scene, camera) => { /* post-process */ });

CDN (после npm run build:lib):

<script src="https://cdn.jsdelivr.net/gh/makarworld/EmoteCraftTSViewer@main/dist/lib/emote-player.iife.js"></script>

Глобал: EmoteCraftViewer.mountEmotePlayer (или свой хостинг dist/lib/emote-player.iife.js).

Сборка

npm install
npm run dev          # demo :5174
npm run build        # app (Pages) + lib
npm run build:app    # только demo
npm run build:lib    # npm/CDN бандл

PWA: manifest.webmanifest + sw.js (register в demo).

Лимиты

• Удалённые emote/skin требуют CORS.
• Server-side preview PNG на GitHub Pages нет — только client Screenshot / WebM.
• Локальные файлы в IndexedDB (Recent); в share URL не попадают.
• Ears (unascribed): ears / snout / tail из magic pixels скина (без claws/wings/анимации).

Loop / ping-pong

• once — стоп на конце.
• loop — прыжок на loop start.
• ping-pong — вперёд-назад.

Advanced: post-process hooks

viewer.setAfterRenderHook(fn) — после каждого renderer.render. EffectComposer / fullscreen shader без форка. Готовых шейдеров в v0.2 нет — только hook.

Debug

Wireframe (Settings) — контуры боксов частей тела.

TODO

• Мобильная вёрстка (touch chrome, bottom-sheet sidebar)
• Compare A/B: две эмоции split-view
• Опциональный Worker для server preview PNG
• Editor + Video pages (legacy + PAL fields, client MediaPipe)

License

См. репозиторий.