实现 3D Minecraft 角色展示只需要 skinview3d

添加自定义JS就可以显示我的3D人物了。

需要文件skinview3d.bundle.js：

npm i skinview3d

<script src="skinview3d.bundle.js"></script> //下载JS到本地

<script>
document.addEventListener("DOMContentLoaded", function () {
  const canvas = document.getElementById("skinview3d-canvas");
  const skinViewer = new skinview3d.SkinViewer({
    canvas,
    width: canvas.clientWidth,
    height: canvas.clientHeight,
    skin: "", // 替换为你的皮肤地址
  });
    // Zoom out
    skinViewer.zoom = 0.7;

    // Rotate the player
    skinViewer.autoRotate = true;
  // 应用奔跑动画
  skinViewer.animation = new skinview3d.RunningAnimation();

  // 调整奔跑动画速度
  skinViewer.animation.speed = 1.0;

  skinViewer.nameTag = "时光流·言";
});
</script>

在需要的地方插入容器：

    <!-- 3D 角色容器 开始 -->
    <div id="skinview3d-wrapper" style="width:100%; padding-top:150%; position:relative; border:1px solid #ccc; box-sizing:border-box; margin-bottom:1em;">
      <canvas id="skinview3d-canvas" style="position:absolute; top:0; left:0; width:100%; height:100%;"></canvas>
    </div>
    <!-- 3D 角色容器 结束 -->