Merge pull request #13 from printempw/gh-pages
Update examples on GitHub Pages
This commit is contained in:
Haowei Wen
GitHub
commit
17955c18dd
|
|
@ -1,54 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>skinview3d example using Javascript</title>
|
||||
<style>
|
||||
body, html{
|
||||
background: #444444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h2>HD</h2>
|
||||
<div id="skin_container"></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: true,
|
||||
width: 600,
|
||||
height: 600,
|
||||
skinUrl: "../img/ironman_hd.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>
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>skinview3d example using Javascript</title>
|
||||
<style>
|
||||
body, html{
|
||||
background: #444444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Native Javascript</h2>
|
||||
<div id="skin_container"></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: true,
|
||||
width: 600,
|
||||
height: 600,
|
||||
skinUrl: "../img/hatsune_miku.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>
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
<!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>
|
||||
101
index.html
101
index.html
|
|
@ -4,65 +4,64 @@
|
|||
<meta charset="utf-8">
|
||||
<title>skinview3d examples</title>
|
||||
<style>
|
||||
body, html{
|
||||
background: #444444;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn{
|
||||
font-family: Verdana;
|
||||
padding: 32px 12px 32px 12px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background: #333333;
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.btn:hover{
|
||||
color: #a7c1e2;
|
||||
background: #2d2d2d;
|
||||
}
|
||||
|
||||
.description{
|
||||
margin: 24px 0 12px 0;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
color: #6a90dd;
|
||||
}
|
||||
|
||||
body, html { background: #444444; color: #fff; }
|
||||
canvas { border: 1px solid white; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<br>
|
||||
<div id="skin_container"></div>
|
||||
|
||||
<div class="description">
|
||||
<a target="_blank" href="https://github.com/to2mbn/skinview3d">skinview3d</a> lets you display Minecraft charecters on the web with Three.js.
|
||||
</div>
|
||||
<p> Animate:
|
||||
<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>
|
||||
Global Animation Speed: x<input type="text" id="speed" value="1" title="1 for default" size="5"></input>
|
||||
<button type="button" onclick="setGlobalAnimationSpeed()">Set</button>
|
||||
</p>
|
||||
|
||||
<a href="examples/javascript.html" class="btn">
|
||||
Basic example
|
||||
</a>
|
||||
<p> Animation Mouse Control:
|
||||
<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>
|
||||
</p>
|
||||
|
||||
<a href="examples/hd.html" class="btn">
|
||||
HD Skin example
|
||||
</a>
|
||||
<p> Width: <input type="text" id="width" value="600" size="5"></input>
|
||||
Height: <input type="text" id="height" value="600" size="5"></input>
|
||||
<button type="button" onclick="resizeSkinViewer()">Change Size</button>
|
||||
</p>
|
||||
|
||||
<a href="examples/misc.html" class="btn">
|
||||
Miscellaneous example
|
||||
</a>
|
||||
<p> Skin Url:
|
||||
<input type="text" id="skin_url" value="img/hatsune_miku.png"></input>
|
||||
<input type="checkbox" id="alex" checked="checked" onclick="initSkinViewer()">
|
||||
<label for="alex">Load alex(slim) model</label><br>
|
||||
Cape Url:
|
||||
<input type="text" id="cape_url" value="img/mojang_cape.png"></input>
|
||||
<button type="button" onclick="hotReloadTextures()">Load Textures</button>
|
||||
</p>
|
||||
|
||||
<p> All textures available to load:
|
||||
<ul>
|
||||
<li>img/1_8_texturemap_redux.png</li>
|
||||
<li>img/cape.png</li>
|
||||
<li>img/Hacksore.png</li>
|
||||
<li>img/haka.png</li>
|
||||
<li>img/hatsune_miku.png</li>
|
||||
<li>img/ironman_hd.png</li>
|
||||
<li>img/mojang_cape.png</li>
|
||||
<li>img/sethbling.png</li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<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/example.js"></script>
|
||||
<script>
|
||||
initSkinViewer();
|
||||
walk();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,87 @@
|
|||
// Use pure ES5 for max browser compatibility
|
||||
|
||||
var skinViewer, control, handles = {}, globalAnimationSpeed = 1;
|
||||
|
||||
function el(id) {
|
||||
return document.getElementById(id);
|
||||
}
|
||||
|
||||
function initSkinViewer() {
|
||||
if (skinViewer instanceof skinview3d.SkinViewer) {
|
||||
skinViewer.dispose();
|
||||
handles = {};
|
||||
control = undefined;
|
||||
}
|
||||
|
||||
// Reset animation speed
|
||||
el('speed').value = globalAnimationSpeed = 1;
|
||||
|
||||
skinViewer = new skinview3d.SkinViewer({
|
||||
domElement: el("skin_container"),
|
||||
slim: el('alex').checked,
|
||||
width: el('width').value,
|
||||
height: el('height').value,
|
||||
skinUrl: el('skin_url').value,
|
||||
capeUrl: el('cape_url').value
|
||||
});
|
||||
|
||||
skinViewer.camera.position.z = 70;
|
||||
skinViewer.animation = new skinview3d.CompositeAnimation();
|
||||
|
||||
control = skinview3d.createOrbitControls(skinViewer);
|
||||
}
|
||||
|
||||
function hotReloadTextures() {
|
||||
skinViewer.skinUrl = el('skin_url').value;
|
||||
skinViewer.capeUrl = el('cape_url').value;
|
||||
}
|
||||
|
||||
function resizeSkinViewer() {
|
||||
skinViewer.width = el('width').value;
|
||||
skinViewer.height = el('height').value;
|
||||
}
|
||||
|
||||
function pause() {
|
||||
skinViewer.animationPaused = !skinViewer.animationPaused;
|
||||
}
|
||||
|
||||
function walk() {
|
||||
if (handles.run) {
|
||||
handles.run.remove();
|
||||
delete handles.run;
|
||||
}
|
||||
|
||||
handles.walk = handles.walk || skinViewer.animation.add(skinview3d.WalkingAnimation);
|
||||
handles.walk.speed = globalAnimationSpeed;
|
||||
}
|
||||
|
||||
function run() {
|
||||
if (handles.walk) {
|
||||
handles.walk.remove();
|
||||
delete handles.walk;
|
||||
}
|
||||
|
||||
handles.run = handles.run || skinViewer.animation.add(skinview3d.RunningAnimation);
|
||||
handles.run.speed = globalAnimationSpeed;
|
||||
}
|
||||
|
||||
function rotate() {
|
||||
if (handles.rotate) {
|
||||
handles.rotate.paused = !handles.rotate.paused;
|
||||
} else {
|
||||
handles.rotate = skinViewer.animation.add(skinview3d.RotatingAnimation);
|
||||
handles.rotate.speed = globalAnimationSpeed;
|
||||
}
|
||||
}
|
||||
|
||||
function setGlobalAnimationSpeed() {
|
||||
var currentSpeed = el('speed').value;
|
||||
|
||||
if (! isNaN(currentSpeed)) {
|
||||
globalAnimationSpeed = currentSpeed;
|
||||
|
||||
for (var key in handles) {
|
||||
handles[key].speed = currentSpeed;
|
||||
}
|
||||
}
|
||||
}
|
||||
1252
js/skinview3d.js
1252
js/skinview3d.js
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue