skinview3d/index.html

140 lines
4.3 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>
<input type="checkbox" id="rotate" checked="checked" onclick="control.enableRotate = this.checked"><label for="rotate">Enable
Rotate</label>
<input type="checkbox" id="zoom" checked="checked" onclick="control.enableZoom = this.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>
Width: <input type="text" id="width" value="600" size="5" />
Height: <input type="text" id="height" value="600" size="5" />
<button type="button" onclick="resizeSkinViewer()">Change Size</button>
</div>
<div>
<h4>Layers</h4>
<input id="head" type="checkbox" onclick="togglePart('head')" checked="checked" />
<label for="head">Head</label>
<input id="body" type="checkbox" onclick="togglePart('body')" checked="checked" />
<label for="body">Body</label>
<input id="leftArm" type="checkbox" onclick="togglePart('leftArm')" checked="checked" />
<label for="leftArm">LeftArm</label>
<input id="rightArm" type="checkbox" onclick="togglePart('rightArm')" checked="checked" />
<label for="rightArm">RightArm</label>
<input id="leftLeg" type="checkbox" onclick="togglePart('leftLeg')" checked="checked" />
<label for="leftLeg">LeftLeg</label>
<input id="rightLeg" type="checkbox" onclick="togglePart('rightLeg')" checked="checked" />
<label for="rightLeg">RightLeg</label>
<br />
<input id="head2" type="checkbox" onclick="togglePart('head2')" checked="checked" />
<label for="head2">Head2</label>
<input id="body2" type="checkbox" onclick="togglePart('body2')" checked="checked" />
<label for="body2">Body2</label>
<input id="leftArm2" type="checkbox" onclick="togglePart('leftArm2')" checked="checked" />
<label for="leftArm2">LeftArm2</label>
<input id="rightArm2" type="checkbox" onclick="togglePart('rightArm2')" checked="checked" />
<label for="rightArm2">RightArm2</label>
<input id="leftLeg2" type="checkbox" onclick="togglePart('leftLeg2')" checked="checked" />
<label for="leftLeg2">LeftLeg2</label>
<input id="rightLeg2" type="checkbox" onclick="togglePart('rightLeg2')" checked="checked" />
<label for="rightLeg2">RightLeg2</label>
</div>
<div>
<h4>Skin</h4>
<select id="skin_url" onchange="hotReloadTextures()">
<option value="img/1_8_texturemap_redux.png">Texture Map (64x64)</option>
<option value="img/Hacksore.png">Hacksore (64x32)</option>
<option value="img/haka.png">Haka (64x64)</option>
<option value="img/hatsune_miku.png">Hatsune Miku (64x64)</option>
<option value="img/ironman_hd.png">Ironman (256x265)</option>
<option value="img/sethbling.png">Sethbling (64x32)</option>
</select>
</div>
<div>
<h4>Cape</h4>
<select id="cape_url" onchange="hotReloadTextures()">
<option value="">None</option>
<option value="img/cape.png">Mojang Legacy</option>
<option value="img/mojang_cape.png">Mojang</option>
<option value="img/hd_cape.png">HD Cape</option>
</select>
</div>
</div>
2020-01-07 06:54:21 +01:00
<script type="text/javascript" src="https://unpkg.com/three@0.112.1/build/three.min.js"></script>
<script type="text/javascript" src="js/dist/skinview3d.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>