Update three.js version. Add new lines to end of files and include new misc example
This commit is contained in:
Hacksore
parent
9262218f73
commit
f19557ac75
|
|
@ -2,7 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>skinpreview3d.js example using jQuery</title>
|
||||
<title>skinview3d example using Javascript</title>
|
||||
<style>
|
||||
body, html{
|
||||
background: #444444;
|
||||
|
|
@ -16,8 +16,7 @@
|
|||
<h2>HD</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="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({
|
||||
|
|
@ -52,4 +51,4 @@
|
|||
// walk.paused = true;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>skinpreview3d.js example using pure javascript</title>
|
||||
<title>skinview3d example using Javascript</title>
|
||||
<style>
|
||||
body, html{
|
||||
background: #444444;
|
||||
|
|
@ -12,10 +12,10 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>pure javascript</h2>
|
||||
<h2>Native Javascript</h2>
|
||||
<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>
|
||||
let skinViewer = new skinview3d.SkinViewer({
|
||||
|
|
@ -51,4 +51,4 @@
|
|||
// walk.paused = true;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
16
index.html
16
index.html
|
|
@ -2,7 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>skinpreview3d.js examples</title>
|
||||
<title>skinview3d examples</title>
|
||||
<style>
|
||||
body, html{
|
||||
background: #444444;
|
||||
|
|
@ -51,18 +51,18 @@
|
|||
<a target="_blank" href="https://github.com/to2mbn/skinview3d">skinview3d</a> lets you display Minecraft charecters on the web with Three.js.
|
||||
</div>
|
||||
|
||||
<a href="examples/jquery.html" class="btn">
|
||||
jQuery
|
||||
</a>
|
||||
<a href="examples/javascript.html" class="btn">
|
||||
Native javascript
|
||||
Basic example
|
||||
</a>
|
||||
|
||||
<a href="examples/hd.html" class="btn">
|
||||
HD Skin
|
||||
HD Skin example
|
||||
</a>
|
||||
|
||||
<a href="examples/misc.html" class="btn">
|
||||
Miscellaneous example
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue