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

update examples and separate js code

This commit is contained in:
printempw 2018-02-12 14:02:47 +08:00
parent a014a0168b
commit 36e11efb5d
4 changed files with 96 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
index.html
View File

@ -4,14 +4,8 @@
<meta charset="utf-8">
<title>skinview3d examples</title>
<style>
body, html{
background: #444444;
color: #fff;
}
canvas {
border: 1px solid white;
}
body, html { background: #444444; color: #fff; }
canvas { border: 1px solid white; }
</style>
</head>
<body>
@ -30,9 +24,9 @@
</p>
<p> Animation Mouse Control:
<input type="checkbox" id="rotate" checked="checked" onclick="control.rotation = this.checked"><label for="rotate">Enable Rotate</label>
<input type="checkbox" id="zoom" checked="checked" onclick="control.zoom = this.checked"><label for="zoom">Enable Zoom</label>
<input type="checkbox" id="pan" onclick="control.pan = this.checked"><label for="pan">Enable Pan</label>
<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>
<p> Width: <input type="text" id="width" value="600" size="5"></input>
@ -64,91 +58,8 @@
<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>
var skinViewer, control, handles = {};
var globalAnimationSpeed = 1;
function initSkinViewer() {
if (skinViewer instanceof skinview3d.SkinViewer) {
skinViewer.dispose();
handles = {};
control = undefined;
}
// Reset animation speed
document.getElementById('speed').value = globalAnimationSpeed = 1;
skinViewer = new skinview3d.SkinViewer({
domElement: document.getElementById("skin_container"),
slim: document.getElementById('alex').checked,
width: document.getElementById('width').value,
height: document.getElementById('height').value,
skinUrl: document.getElementById('skin_url').value,
capeUrl: document.getElementById('cape_url').value
});
skinViewer.camera.position.z = 70;
skinViewer.animation = new skinview3d.CompositeAnimation();
control = new skinview3d.MouseControl(skinViewer);
}
function hotReloadTextures() {
skinViewer.skinUrl = document.getElementById('skin_url').value;
skinViewer.capeUrl = document.getElementById('cape_url').value;
}
function resizeSkinViewer() {
skinViewer.width = document.getElementById('width').value;
skinViewer.height = document.getElementById('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 = document.getElementById('speed').value;
if (! isNaN(currentSpeed)) {
globalAnimationSpeed = currentSpeed;
for (let key in handles) {
handles[key].speed = currentSpeed;
}
}
}
initSkinViewer();
walk();
</script>

87
js/example.js Normal file
View File

@ -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;
}
}
}

4
js/skinview3d.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
js/skinview3d.min.js.map
View File

File diff suppressed because one or more lines are too long