skinview3d/index.html

150 lines
4.1 KiB
HTML
Raw Normal View History

2018-02-05 16:16:41 +01:00
<!DOCTYPE html>
<html>
2018-02-05 16:16:41 +01:00
<head>
<meta charset="utf-8">
<title>skinview3d examples</title>
<style>
body, html {
background: #ffffff;
color: #000000;
padding: 0;
margin: 0;
}
canvas {
background: #5a76f3;
}
.controls {
padding: 0 12px 0 12px;
}
.controls div {
margin: 6px 0 6px;
}
h4{
padding: 0;
margin: 0 0 4px 0;
}
2018-02-11 17:01:28 +01:00
</style>
</head>
2018-02-11 17:01:28 +01:00
<body>
2018-02-11 17:01:28 +01:00
<div id="skin_container"></div>
2018-02-05 16:16:41 +01:00
<div class="controls">
<div>
<h4>Animate</h4>
<button type="button" onclick="walk()">Walk</button>
<button type="button" onclick="run()">Run!</button>
<button type="button" onclick="rotate()">Rotate</button>
<button type="button" onclick="pause()">Pause / Resume</button>
<button type="button" onclick="initSkinViewer()">Reset</button>
<br>
</div>
Global Animation Speed: x<input type="text" id="speed" value="1" title="1 for default" size="5" />
2018-02-11 17:01:28 +01:00
<button type="button" onclick="setGlobalAnimationSpeed()">Set</button>
<div>
<h4> Animation Mouse Control</h4>
2020-08-02 15:22:58 +02:00
<input type="checkbox" id="rotate" onclick="control.enableRotate = this.checked" checked>
<label for="rotate">Enable Rotate</label>
<input type="checkbox" id="zoom" onclick="control.enableZoom = this.checked" checked>
<label for="zoom">Enable Zoom</label>
<input type="checkbox" id="pan" onclick="control.enablePan = this.checked">
<label for="pan">Enable Pan</label>
</div>
<div>
<h4>Canvas Size</h4>
2020-08-02 15:22:58 +02:00
<label for="width">Width:</label>
<input type="text" id="width" value="600" size="5">
<label for="height">Height:</label>
<input type="text" id="height" value="600" size="5">
<button type="button" onclick="resizeSkinViewer()">Apply</button>
</div>
<div>
<h4>Layers</h4>
2020-08-02 15:22:58 +02:00
<input id="head" type="checkbox" onclick="togglePart('head')" checked>
<label for="head">Head</label>
2020-08-02 15:22:58 +02:00
<input id="body" type="checkbox" onclick="togglePart('body')" checked>
<label for="body">Body</label>
2020-08-02 15:22:58 +02:00
<input id="leftArm" type="checkbox" onclick="togglePart('leftArm')" checked>
<label for="leftArm">LeftArm</label>
2020-08-02 15:22:58 +02:00
<input id="rightArm" type="checkbox" onclick="togglePart('rightArm')" checked>
<label for="rightArm">RightArm</label>
2020-08-02 15:22:58 +02:00
<input id="leftLeg" type="checkbox" onclick="togglePart('leftLeg')" checked>
<label for="leftLeg">LeftLeg</label>
2020-08-02 15:22:58 +02:00
<input id="rightLeg" type="checkbox" onclick="togglePart('rightLeg')" checked>
<label for="rightLeg">RightLeg</label>
<br />
2020-08-02 15:22:58 +02:00
<input id="head2" type="checkbox" onclick="togglePart('head2')" checked>
<label for="head2">Head2</label>
2020-08-02 15:22:58 +02:00
<input id="body2" type="checkbox" onclick="togglePart('body2')" checked>
<label for="body2">Body2</label>
2020-08-02 15:22:58 +02:00
<input id="leftArm2" type="checkbox" onclick="togglePart('leftArm2')" checked>
<label for="leftArm2">LeftArm2</label>
2020-08-02 15:22:58 +02:00
<input id="rightArm2" type="checkbox" onclick="togglePart('rightArm2')" checked>
<label for="rightArm2">RightArm2</label>
2020-08-02 15:22:58 +02:00
<input id="leftLeg2" type="checkbox" onclick="togglePart('leftLeg2')" checked>
<label for="leftLeg2">LeftLeg2</label>
2020-08-02 15:22:58 +02:00
<input id="rightLeg2" type="checkbox" onclick="togglePart('rightLeg2')" checked>
<label for="rightLeg2">RightLeg2</label>
</div>
<div>
2020-08-02 15:13:13 +02:00
<label for="skin_url">Skin URL:</label>
2020-08-02 15:22:58 +02:00
<input id="skin_url" type="text" value="img/1_8_texturemap_redux.png" list="default_skins" onchange="reloadTextures()">
2020-08-02 15:13:13 +02:00
<datalist id="default_skins">
<option value="img/1_8_texturemap_redux.png">
<option value="img/Hacksore.png">
<option value="img/haka.png">
<option value="img/hatsune_miku.png">
<option value="img/ironman_hd.png">
<option value="img/sethbling.png">
</datalist>
</div>
<div>
2020-08-02 15:13:13 +02:00
<label for="cape_url">Cape URL:</label>
2020-08-02 15:22:58 +02:00
<input id="cape_url" type="text" value="" list="default_capes" onchange="reloadTextures()">
2020-08-02 15:13:13 +02:00
<datalist id="default_capes">
<option value="">
<option value="img/cape.png">
<option value="img/mojang_cape.png">
<option value="img/hd_cape.png">
</datalist>
</div>
</div>
2020-01-31 16:35:42 +01:00
<script type="text/javascript" src="js/dist/skinview3d.bundle.js"></script>
2018-02-12 07:02:47 +01:00
<script type="text/javascript" src="js/example.js"></script>
2018-02-11 17:01:28 +01:00
<script>
initSkinViewer();
walk();
</script>
2018-02-05 16:16:41 +01:00
</body>
2020-01-07 06:54:21 +01:00
</html>