minecraft-skin-render
Version:
我的世界皮肤渲染插件, 需要Three.js 作为前置支持, 兼容人类浏览器+IE11
41 lines (39 loc) • 1.82 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/three@0.122.0/build/three.min.js"></script>
<script src="../index.min.js"></script>
<title>在原生js中使用</title>
</head>
<body>
<div id="app" class="container">
<fieldset>
<legend>渲染头像</legend>
<canvas id="avatar" data-skin="./imgs/skin.png" data-model="classic" width="128" height="128"></canvas>
</fieldset>
<fieldset>
<legend>渲染2D皮肤</legend>
<canvas id="skin2d" data-skin="./imgs/skin.png" data-model="classic" width="240" height="320"></canvas>
</fieldset>
<fieldset>
<legend>渲染3D皮肤静态效果</legend>
<canvas id="skin3d" data-skin="./imgs/skin.png" data-model="classic" width="240" height="320"></canvas>
</fieldset>
<fieldset>
<legend>渲染3D皮肤可操作</legend>
<canvas id="skin3d_use" data-skin="./imgs/skin.png" data-model="classic" data-animate="true" data-rotate="true" width="240" height="320"></canvas>
</fieldset>
</div>
<script>
skinRender.avatar(avatar);
skinRender.skin2d(skin2d);
skinRender.skin3d(skin3d);
skinRender.skin3d(skin3d_use);
skinRender.skin3dImage("./imgs/skin.png");
</script>
</body>
</html>