Ubujira
/
skinview3d
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update three.js version. Add new lines to end of files and include new misc example

This commit is contained in:
Hacksore 2018-02-05 08:14:42 -06:00
parent 9262218f73
commit f19557ac75
7 changed files with 71 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
examples/hd.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>skinpreview3d.js example using jQuery</title> <title>skinview3d example using Javascript</title>
<style> <style>
body, html{ body, html{
background: #444444; background: #444444;
@ -16,8 +16,7 @@
<h2>HD</h2> <h2>HD</h2>
<div id="skin_container"></div> <div id="skin_container"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<script type="text/javascript" src="../js/skinview3d.min.js"></script> <script type="text/javascript" src="../js/skinview3d.min.js"></script>
<script> <script>
let skinViewer = new skinview3d.SkinViewer({ let skinViewer = new skinview3d.SkinViewer({

6
examples/javascript.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>skinpreview3d.js example using pure javascript</title> <title>skinview3d example using Javascript</title>
<style> <style>
body, html{ body, html{
background: #444444; background: #444444;
@ -12,10 +12,10 @@
</style> </style>
</head> </head>
<body> <body>
<h2>pure javascript</h2> <h2>Native Javascript</h2>
<div id="skin_container"></div> <div id="skin_container"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
<script type="text/javascript" src="../js/skinview3d.min.js"></script> <script type="text/javascript" src="../js/skinview3d.min.js"></script>
<script> <script>
let skinViewer = new skinview3d.SkinViewer({ let skinViewer = new skinview3d.SkinViewer({

58
examples/jquery.html
View File

@ -1,58 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>skinpreview3d.js example using jQuery</title>
<style>
body, html{
background: #444444;
color: #fff;
}
</style>
</head>
<body>
<h2>jQuery</h2>
<div id="skin_container"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<script type="text/javascript" src="../js/skinview3d.min.js"></script>
<script>
let skinViewer = new skinview3d.SkinViewer({
domElement: $("#skin_container")[0],
slim: false,
width: 600,
height: 600,
skinUrl: "../img/Hacksore.png",
capeUrl: "../img/mojang_cape.png"
});
// change the skin and cape
// skinViewer.skinUrl = "img/skin.png";
// skinViewer.capeUrl = "img/cape.png";
// change the width and height
// skinViewer.width = 300;
// skinViewer.height = 400;
// enable the mouse control feature
let control = new skinview3d.SkinControl(skinViewer);
// disable the 'right click to play/pause' feature
// control.enableAnimationControl = false;
skinViewer.animation = new skinview3d.CompositeAnimation();
// add an animation
let walk = skinViewer.animation.add(skinview3d.WalkAnimation);
// set its speed and some others
walk.speed = 1.5;
// walk.paused = true;
</script>
</body>
</html>

56
examples/misc.html Normal file
View File

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>skinview3d Advanced example</title>
<style>
body, html{
background: #444444;
color: #fff;
}
</style>
</head>
<body>
<h2>Miscellaneous example</h2>
<div id="skin_container"></div>
<h3>Hover the avatars</h3>
<div class="skins">
<img class="skin" onmouseover="setSkin('../img/haka.png')" src="https://crafatar.com/avatars/708b4298c9cd41fb8590aaf8297a9cb0?size=64"/>
<img class="skin" onmouseover="setSkin('../img/Hacksore.png')" src="https://crafatar.com/avatars/7fc5534623394276bc489fd0d0d9f142?size=64"/>
<img class="skin" onmouseover="setSkin('../img/sethbling.png')" src="https://crafatar.com/avatars/55a2e72e01614c85b191a0b227ff758a?size=64"/>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
<script type="text/javascript" src="../js/skinview3d.min.js"></script>
<script>
let skinViewer = new skinview3d.SkinViewer({
domElement: document.getElementById("skin_container"),
slim: false,
width: 600,
height: 600,
skinUrl: "../img/1_8_texturemap_redux.png"
});
// enable the mouse control feature
let control = new skinview3d.SkinControl(skinViewer);
// setup the animation on the skinViewer object
skinViewer.animation = new skinview3d.CompositeAnimation();
// add an animation
let walk = skinViewer.animation.add(skinview3d.WalkAnimation);
// set its speed and some others
walk.speed = 1.5;
// custom skin change code on mouseover
function setSkin(url){
skinViewer.skinUrl = url;
}
</script>
</body>
</html>

BIN
img/haka.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
img/sethbling.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

12
index.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>skinpreview3d.js examples</title> <title>skinview3d examples</title>
<style> <style>
body, html{ body, html{
background: #444444; background: #444444;
@ -51,17 +51,17 @@
<a target="_blank" href="https://github.com/to2mbn/skinview3d">skinview3d</a> lets you display Minecraft charecters on the web with Three.js. <a target="_blank" href="https://github.com/to2mbn/skinview3d">skinview3d</a> lets you display Minecraft charecters on the web with Three.js.
</div> </div>
<a href="examples/jquery.html" class="btn">
jQuery
</a>
<a href="examples/javascript.html" class="btn"> <a href="examples/javascript.html" class="btn">
Native javascript Basic example
</a> </a>
<a href="examples/hd.html" class="btn"> <a href="examples/hd.html" class="btn">
HD Skin HD Skin example
</a> </a>
<a href="examples/misc.html" class="btn">
Miscellaneous example
</a>
</body> </body>