minecraft-skin-render
Version:
我的世界皮肤渲染插件, 需要Three.js 作为前置支持, 兼容人类浏览器+IE11
54 lines (51 loc) • 2.41 kB
HTML
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="./css/theme.css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.122.0/build/three.min.js"></script>
<script src="../index.min.js"></script>
<title>在 Vue.js 中使用</title>
</head>
<body>
<div id="app" class="container">
<fieldset>
<legend>渲染头像</legend>
<canvas ref="avatar" data-skin="./imgs/skin.png" width="128" height="128"></canvas>
</fieldset>
<fieldset>
<legend>渲染2D皮肤</legend>
<canvas ref="skin2d" data-skin="./imgs/skin.png" width="240" height="320"></canvas>
</fieldset>
<fieldset>
<legend>渲染3D皮肤静态效果</legend>
<canvas ref="skin3d" data-skin="./imgs/skin.png" width="240" height="320"></canvas>
</fieldset>
<fieldset>
<legend>渲染3D皮肤可操作</legend>
<canvas ref="skin3d_use" data-skin="./imgs/skin.png" data-animate="true" data-rotate="true" width="240" height="320"></canvas>
</fieldset>
</div>
<script>
var app = new Vue({
el: "#app",
mounted: function () {
var avatar = this.$refs.avatar;
var skin2d = this.$refs.skin2d;
var skin3d = this.$refs.skin3d;
var skin3d2 = this.$refs.skin3d2;
var skin3d_use = this.$refs.skin3d_use;
// 所有 API 都是Promise, 都可以通过 then 来获取传递的数据
this.skinRender.avatar(avatar);
this.skinRender.skin2d(skin2d);
this.skinRender.skin3d(skin3d);
this.skinRender.skin3d(skin3d_use);
this.skinRender.skin3dImage("./imgs/skin.png");
},
});
</script>
</body>
</html>