MediaWiki:Gadget-SkinViewer.js

var skinContainer = document.getElementById('mw-skinviewer-container');
if (skinContainer !== null) { mw.loader.getScript("https://bs-community.github.io/skinview3d/js/skinview3d.bundle.js").then(function () {

skinContainer.innerHTML = '<canvas id="skinviewer-canvas"></canvas>';

var skinParts = ["head", "body", "rightArm", "leftArm", "rightLeg", "leftLeg"];
var skinLayers = ["innerLayer", "outerLayer"];
var availableAnimations = {
  idle: new skinview3d.IdleAnimation(),
  walk: new skinview3d.WalkingAnimation(),
  run: new skinview3d.RunningAnimation(),
  fly: new skinview3d.FlyingAnimation()
};
var skinViewer;

function reloadSkin() {
  var url = skinContainer.dataset.skin; 
  if (url === "") {
    skinViewer.loadSkin(null);
  } else {
    skinViewer.loadSkin(url, {
      model: "auto-detect",
      ears: "none"
    });
  }
}

function initializeViewer() {
  skinViewer = new skinview3d.SkinViewer({
    canvas: document.getElementById("skinviewer-canvas")
  });
  skinViewer.width = skinContainer.dataset.width;
  skinViewer.height = skinContainer.dataset.height;
  skinViewer.fov = 70;
  skinViewer.zoom = 0.9;
  skinViewer.globalLight.intensity = 3;
  skinViewer.cameraLight.intensity = 0.6;
  skinViewer.autoRotate = false;
  skinViewer.autoRotateSpeed = 2;
  var animationName = "";
  if (animationName !== "") {
    skinViewer.animation = availableAnimations[animationName];
    skinViewer.animation.speed = 1;
  }
  skinViewer.controls.enableRotate = true;
  skinViewer.controls.enableZoom = true;
  skinViewer.controls.enablePan = true;
  for (var i = 0; i < skinParts.length; i++) {
    var part = skinParts[i];
    for (var j = 0; j < skinLayers.length; j++) {
      var layer = skinLayers[j];
      skinViewer.playerObject.skin[part][layer].visible = true; 
    }
  }
  reloadSkin();
}
initializeViewer();

}); }