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

update example pages

This commit is contained in:
printempw 2018-02-12 00:01:28 +08:00
parent f46821a5d5
commit 93066807f3
10 changed files with 472 additions and 386 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
examples/hd.html
View File

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

54
examples/javascript.html
View File

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

56
examples/misc.html
View File

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

177
index.html
View File

@ -7,62 +7,149 @@
body, html{ body, html{
background: #444444; background: #444444;
color: #fff; color: #fff;
margin: 0;
padding: 0;
overflow: hidden;
} }
.btn{ canvas {
font-family: Verdana; border: 1px solid white;
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;
}
</style> </style>
</head> </head>
<body> <body>
<br>
<div id="skin_container"></div>
<div class="description"> <p> Animate:
<a target="_blank" href="https://github.com/to2mbn/skinview3d">skinview3d</a> lets you display Minecraft charecters on the web with Three.js. <button type="button" onclick="walk()">Walk</button>
</div> <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"> <p> Animation Mouse Control:
Basic example <input type="checkbox" id="rotate" checked="checked" onclick="control.rotation = this.checked"><label for="rotate">Enable Rotate</label>
</a> <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>
</p>
<a href="examples/hd.html" class="btn"> <p> Width: <input type="text" id="width" value="600" size="5"></input>
HD Skin example Height: <input type="text" id="height" value="600" size="5"></input>
</a> <button type="button" onclick="resizeSkinViewer()">Change Size</button>
</p>
<a href="examples/misc.html" class="btn"> <p> Skin Url:
Miscellaneous example <input type="text" id="skin_url" value="img/hatsune_miku.png"></input>
</a> <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>
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.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>
</body> </body>
</html> </html>

230
js/skinview3d.js
View File

@ -1,3 +1,30 @@
/**
* skinview3d (https://github.com/to2mbn/skinview3d)
*
* MIT License
*
* Original work Copyright (c) 2014-2018 Kent Rasmussen
* Modified work Copyright (c) 2017-2018 Haowei Wen, Sean Boult, Pig Fang and contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
(function (global, factory) { (function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('three')) : typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('three')) :
typeof define === 'function' && define.amd ? define(['exports', 'three'], factory) : typeof define === 'function' && define.amd ? define(['exports', 'three'], factory) :
@ -103,12 +130,14 @@
var SkinObject = function (_THREE$Group) { var SkinObject = function (_THREE$Group) {
inherits(SkinObject, _THREE$Group); inherits(SkinObject, _THREE$Group);
function SkinObject(isSlim, layer1Material, layer2Material) { function SkinObject(slim, layer1Material, layer2Material) {
classCallCheck(this, SkinObject); classCallCheck(this, SkinObject);
// Head
var _this = possibleConstructorReturn(this, (SkinObject.__proto__ || Object.getPrototypeOf(SkinObject)).call(this)); var _this = possibleConstructorReturn(this, (SkinObject.__proto__ || Object.getPrototypeOf(SkinObject)).call(this));
_this.slim = slim;
// Head
_this.head = new THREE.Group(); _this.head = new THREE.Group();
var headBox = new THREE.BoxGeometry(8, 8, 8, 0, 0, 0); var headBox = new THREE.BoxGeometry(8, 8, 8, 0, 0, 0);
@ -144,8 +173,8 @@
_this.rightArm = new THREE.Group(); _this.rightArm = new THREE.Group();
var rightArmPivot = new THREE.Group(); var rightArmPivot = new THREE.Group();
var rightArmBox = new THREE.BoxGeometry((isSlim ? 3 : 4) - esp, 12 - esp, 4 - esp, 0, 0, 0); var rightArmBox = new THREE.BoxGeometry((slim ? 3 : 4) - esp, 12 - esp, 4 - esp, 0, 0, 0);
if (isSlim) { if (slim) {
addVertices(rightArmBox, toSkinVertices(44, 16, 47, 20), toSkinVertices(47, 16, 50, 20), toSkinVertices(40, 20, 44, 32), toSkinVertices(44, 20, 47, 32), toSkinVertices(47, 20, 51, 32), toSkinVertices(51, 20, 54, 32)); addVertices(rightArmBox, toSkinVertices(44, 16, 47, 20), toSkinVertices(47, 16, 50, 20), toSkinVertices(40, 20, 44, 32), toSkinVertices(44, 20, 47, 32), toSkinVertices(47, 20, 51, 32), toSkinVertices(51, 20, 54, 32));
} else { } else {
addVertices(rightArmBox, toSkinVertices(44, 16, 48, 20), toSkinVertices(48, 16, 52, 20), toSkinVertices(40, 20, 44, 32), toSkinVertices(44, 20, 48, 32), toSkinVertices(48, 20, 52, 32), toSkinVertices(52, 20, 56, 32)); addVertices(rightArmBox, toSkinVertices(44, 16, 48, 20), toSkinVertices(48, 16, 52, 20), toSkinVertices(40, 20, 44, 32), toSkinVertices(44, 20, 48, 32), toSkinVertices(48, 20, 52, 32), toSkinVertices(52, 20, 56, 32));
@ -153,8 +182,8 @@
var rightArmMesh = new THREE.Mesh(rightArmBox, layer1Material); var rightArmMesh = new THREE.Mesh(rightArmBox, layer1Material);
rightArmPivot.add(rightArmMesh); rightArmPivot.add(rightArmMesh);
var rightArm2Box = new THREE.BoxGeometry((isSlim ? 3.375 : 4.5) - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0); var rightArm2Box = new THREE.BoxGeometry((slim ? 3.375 : 4.5) - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0);
if (isSlim) { if (slim) {
addVertices(rightArm2Box, toSkinVertices(44, 32, 47, 36), toSkinVertices(47, 32, 50, 36), toSkinVertices(40, 36, 44, 48), toSkinVertices(44, 36, 47, 48), toSkinVertices(47, 36, 51, 48), toSkinVertices(51, 36, 54, 48)); addVertices(rightArm2Box, toSkinVertices(44, 32, 47, 36), toSkinVertices(47, 32, 50, 36), toSkinVertices(40, 36, 44, 48), toSkinVertices(44, 36, 47, 48), toSkinVertices(47, 36, 51, 48), toSkinVertices(51, 36, 54, 48));
} else { } else {
addVertices(rightArm2Box, toSkinVertices(44, 32, 48, 36), toSkinVertices(48, 32, 52, 36), toSkinVertices(40, 36, 44, 48), toSkinVertices(44, 36, 48, 48), toSkinVertices(48, 36, 52, 48), toSkinVertices(52, 36, 56, 48)); addVertices(rightArm2Box, toSkinVertices(44, 32, 48, 36), toSkinVertices(48, 32, 52, 36), toSkinVertices(40, 36, 44, 48), toSkinVertices(44, 36, 48, 48), toSkinVertices(48, 36, 52, 48), toSkinVertices(52, 36, 56, 48));
@ -166,15 +195,15 @@
rightArmPivot.position.y = -6; rightArmPivot.position.y = -6;
_this.rightArm.add(rightArmPivot); _this.rightArm.add(rightArmPivot);
_this.rightArm.position.y = -4; _this.rightArm.position.y = -4;
_this.rightArm.position.x = isSlim ? -5.5 : -6; _this.rightArm.position.x = slim ? -5.5 : -6;
_this.add(_this.rightArm); _this.add(_this.rightArm);
// Left Arm // Left Arm
_this.leftArm = new THREE.Group(); _this.leftArm = new THREE.Group();
var leftArmPivot = new THREE.Group(); var leftArmPivot = new THREE.Group();
var leftArmBox = new THREE.BoxGeometry((isSlim ? 3 : 4) - esp, 12 - esp, 4 - esp, 0, 0, 0); var leftArmBox = new THREE.BoxGeometry((slim ? 3 : 4) - esp, 12 - esp, 4 - esp, 0, 0, 0);
if (isSlim) { if (slim) {
addVertices(leftArmBox, toSkinVertices(36, 48, 39, 52), toSkinVertices(39, 48, 42, 52), toSkinVertices(32, 52, 36, 64), toSkinVertices(36, 52, 39, 64), toSkinVertices(39, 52, 43, 64), toSkinVertices(43, 52, 46, 64)); addVertices(leftArmBox, toSkinVertices(36, 48, 39, 52), toSkinVertices(39, 48, 42, 52), toSkinVertices(32, 52, 36, 64), toSkinVertices(36, 52, 39, 64), toSkinVertices(39, 52, 43, 64), toSkinVertices(43, 52, 46, 64));
} else { } else {
addVertices(leftArmBox, toSkinVertices(36, 48, 40, 52), toSkinVertices(40, 48, 44, 52), toSkinVertices(32, 52, 36, 64), toSkinVertices(36, 52, 40, 64), toSkinVertices(40, 52, 44, 64), toSkinVertices(44, 52, 48, 64)); addVertices(leftArmBox, toSkinVertices(36, 48, 40, 52), toSkinVertices(40, 48, 44, 52), toSkinVertices(32, 52, 36, 64), toSkinVertices(36, 52, 40, 64), toSkinVertices(40, 52, 44, 64), toSkinVertices(44, 52, 48, 64));
@ -182,8 +211,8 @@
var leftArmMesh = new THREE.Mesh(leftArmBox, layer1Material); var leftArmMesh = new THREE.Mesh(leftArmBox, layer1Material);
leftArmPivot.add(leftArmMesh); leftArmPivot.add(leftArmMesh);
var leftArm2Box = new THREE.BoxGeometry((isSlim ? 3.375 : 4.5) - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0); var leftArm2Box = new THREE.BoxGeometry((slim ? 3.375 : 4.5) - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0);
if (isSlim) { if (slim) {
addVertices(leftArm2Box, toSkinVertices(52, 48, 55, 52), toSkinVertices(55, 48, 58, 52), toSkinVertices(48, 52, 52, 64), toSkinVertices(52, 52, 55, 64), toSkinVertices(55, 52, 59, 64), toSkinVertices(59, 52, 62, 64)); addVertices(leftArm2Box, toSkinVertices(52, 48, 55, 52), toSkinVertices(55, 48, 58, 52), toSkinVertices(48, 52, 52, 64), toSkinVertices(52, 52, 55, 64), toSkinVertices(55, 52, 59, 64), toSkinVertices(59, 52, 62, 64));
} else { } else {
addVertices(leftArm2Box, toSkinVertices(52, 48, 56, 52), toSkinVertices(56, 48, 60, 52), toSkinVertices(48, 52, 52, 64), toSkinVertices(52, 52, 56, 64), toSkinVertices(56, 52, 60, 64), toSkinVertices(60, 52, 64, 64)); addVertices(leftArm2Box, toSkinVertices(52, 48, 56, 52), toSkinVertices(56, 48, 60, 52), toSkinVertices(48, 52, 52, 64), toSkinVertices(52, 52, 56, 64), toSkinVertices(56, 52, 60, 64), toSkinVertices(60, 52, 64, 64));
@ -195,7 +224,7 @@
leftArmPivot.position.y = -6; leftArmPivot.position.y = -6;
_this.leftArm.add(leftArmPivot); _this.leftArm.add(leftArmPivot);
_this.leftArm.position.y = -4; _this.leftArm.position.y = -4;
_this.leftArm.position.x = isSlim ? 5.5 : 6; _this.leftArm.position.x = slim ? 5.5 : 6;
_this.add(_this.leftArm); _this.add(_this.leftArm);
// Right Leg // Right Leg
@ -275,8 +304,6 @@
var _this3 = possibleConstructorReturn(this, (PlayerObject.__proto__ || Object.getPrototypeOf(PlayerObject)).call(this)); var _this3 = possibleConstructorReturn(this, (PlayerObject.__proto__ || Object.getPrototypeOf(PlayerObject)).call(this));
_this3.slim = slim;
_this3.skin = new SkinObject(slim, layer1Material, layer2Material); _this3.skin = new SkinObject(slim, layer1Material, layer2Material);
_this3.skin.visible = false; _this3.skin.visible = false;
_this3.add(_this3.skin); _this3.add(_this3.skin);
@ -874,6 +901,7 @@
this.speed = this._speed = 1.0; this.speed = this._speed = 1.0;
this._lastChange = null; this._lastChange = null;
this._lastChangeX = null; this._lastChangeX = null;
this._animationNaturalSpeed = animation.naturalSpeed;
} }
createClass(AnimationHandle, [{ createClass(AnimationHandle, [{
@ -893,7 +921,7 @@
} }
if (this.paused === false) { if (this.paused === false) {
var _dt = time - this._lastChange; var _dt = time - this._lastChange;
var x = this._lastChangeX + this.speed * _dt; var x = this._lastChangeX + this.speed * this._animationNaturalSpeed * _dt;
invokeAnimation(this.animation, player, x); invokeAnimation(this.animation, player, x);
} }
} }
@ -936,19 +964,70 @@
return CompositeAnimation; return CompositeAnimation;
}(); }();
var WalkAnimation = function WalkAnimation(player, time) { var WalkingAnimation = function WalkingAnimation(player, time) {
var skin = player.skin; var skin = player.skin;
var angleRot = time + Math.PI / 2;
// Leg Swing // Leg swing
skin.leftLeg.rotation.x = Math.cos(angleRot); skin.leftLeg.rotation.x = Math.sin(time) * 0.3;
skin.rightLeg.rotation.x = Math.cos(angleRot + Math.PI); skin.rightLeg.rotation.x = Math.sin(time + Math.PI) * 0.3;
// Arm Swing // Arm swing
skin.leftArm.rotation.x = Math.cos(angleRot + Math.PI); skin.leftArm.rotation.x = Math.sin(time + Math.PI) * 0.5;
skin.rightArm.rotation.x = Math.cos(angleRot); skin.rightArm.rotation.x = Math.sin(time) * 0.5;
var basicArmRotationZ = Math.PI * 0.02;
skin.leftArm.rotation.z = Math.cos(time) * 0.03 + basicArmRotationZ;
skin.rightArm.rotation.z = Math.cos(time + Math.PI) * 0.03 - basicArmRotationZ;
// Head shaking with different frequency & amplitude
skin.head.rotation.y = Math.sin(time / 2) * 0.2;
skin.head.rotation.x = Math.sin(time / 3) * 0.15;
// Always add an angle for cape around the x axis
var basicCapeRotationX = Math.PI * 0.06;
player.cape.rotation.x = Math.sin(time / 1.5) * 0.06 + basicCapeRotationX;
}; };
WalkingAnimation.naturalSpeed = 5;
var RunningAnimation = function RunningAnimation(player, time) {
var skin = player.skin;
// Leg swing with larger amplitude
skin.leftLeg.rotation.x = Math.cos(time + Math.PI) * 1.3;
skin.rightLeg.rotation.x = Math.cos(time) * 1.3;
// Arm swing
skin.leftArm.rotation.x = Math.cos(time) * 1.5;
skin.rightArm.rotation.x = Math.cos(time + Math.PI) * 1.5;
var basicArmRotationZ = Math.PI * 0.1;
skin.leftArm.rotation.z = Math.cos(time) * 0.1 + basicArmRotationZ;
skin.rightArm.rotation.z = Math.cos(time + Math.PI) * 0.1 - basicArmRotationZ;
// Jumping
player.position.y = Math.cos(time * 2);
// Dodging when running
player.position.x = Math.cos(time) * 0.15;
// Slightly tilting when running
player.rotation.z = Math.cos(time + Math.PI) * 0.01;
// Apply higher swing frequency, lower amplitude,
// and greater basic rotation around x axis,
// to cape when running.
var basicCapeRotationX = Math.PI * 0.3;
player.cape.rotation.x = Math.sin(time * 2) * 0.1 + basicCapeRotationX;
// What about head shaking?
// You shouldn't glance right and left when running dude :P
};
RunningAnimation.naturalSpeed = 13;
var RotatingAnimation = function RotatingAnimation(player, time) {
player.rotation.y = time;
};
RotatingAnimation.naturalSpeed = 1;
function copyImage(context, sX, sY, w, h, dX, dY, flipHorizontal) { function copyImage(context, sX, sY, w, h, dX, dY, flipHorizontal) {
var imgData = context.getImageData(sX, sY, w, h); var imgData = context.getImageData(sX, sY, w, h);
if (flipHorizontal) { if (flipHorizontal) {
@ -1033,9 +1112,10 @@
// scene // scene
this.scene = new THREE.Scene(); this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(75); // Use smaller fov to avoid distortion
this.camera = new THREE.PerspectiveCamera(40);
this.camera.position.y = -12; this.camera.position.y = -12;
this.camera.position.z = 30; this.camera.position.z = 60;
this.renderer = new THREE.WebGLRenderer({ angleRot: true, alpha: true, antialias: false }); this.renderer = new THREE.WebGLRenderer({ angleRot: true, alpha: true, antialias: false });
this.renderer.setSize(300, 300); // default size this.renderer.setSize(300, 300); // default size
@ -1090,16 +1170,28 @@
return console.error("Failed loading " + _this.capeImg.src); return console.error("Failed loading " + _this.capeImg.src);
}; };
this.capeImg.onload = function () { this.capeImg.onload = function () {
var isOldFormat = false;
if (_this.capeImg.width !== 2 * _this.capeImg.height) { if (_this.capeImg.width !== 2 * _this.capeImg.height) {
console.error("Bad cape size"); if (_this.capeImg.width * 17 == _this.capeImg.height * 22) {
return; // width/height = 22/17
isOldFormat = true;
} else {
console.error("Bad cape size");
return;
}
} }
_this.capeCanvas.width = _this.capeImg.width;
_this.capeCanvas.height = _this.capeImg.height;
var capeContext = _this.capeCanvas.getContext("2d"); var capeContext = _this.capeCanvas.getContext("2d");
if (isOldFormat) {
var width = _this.capeImg.width * 64 / 22;
_this.capeCanvas.width = width;
_this.capeCanvas.height = width / 2;
} else {
_this.capeCanvas.width = _this.capeImg.width;
_this.capeCanvas.height = _this.capeImg.height;
}
capeContext.clearRect(0, 0, _this.capeCanvas.width, _this.capeCanvas.height); capeContext.clearRect(0, 0, _this.capeCanvas.width, _this.capeCanvas.height);
capeContext.drawImage(_this.capeImg, 0, 0, _this.capeCanvas.width, _this.capeCanvas.height); capeContext.drawImage(_this.capeImg, 0, 0, _this.capeImg.width, _this.capeImg.height);
_this.capeTexture.needsUpdate = true; _this.capeTexture.needsUpdate = true;
_this.capeMaterial.needsUpdate = true; _this.capeMaterial.needsUpdate = true;
@ -1178,13 +1270,10 @@
return SkinViewer; return SkinViewer;
}(); }();
var SkinControl = function () { var MouseControl = function () {
function SkinControl(skinViewer) { function MouseControl(skinViewer) {
var _this2 = this; classCallCheck(this, MouseControl);
classCallCheck(this, SkinControl);
this.enableAnimationControl = true;
this.skinViewer = skinViewer; this.skinViewer = skinViewer;
this.orbitControls = new OrbitControls(skinViewer.camera, skinViewer.renderer.domElement); this.orbitControls = new OrbitControls(skinViewer.camera, skinViewer.renderer.domElement);
@ -1193,58 +1282,51 @@
this.orbitControls.minDistance = 10; this.orbitControls.minDistance = 10;
this.orbitControls.maxDistance = 256; this.orbitControls.maxDistance = 256;
this.orbitControls.update(); this.orbitControls.update();
this.animationPauseListener = function (e) {
if (_this2.enableAnimationControl) {
e.preventDefault();
_this2.skinViewer.animationPaused = !_this2.skinViewer.animationPaused;
}
};
this.skinViewer.domElement.addEventListener("contextmenu", this.animationPauseListener, false);
} }
createClass(SkinControl, [{ createClass(MouseControl, [{
key: "dispose", key: "dispose",
value: function dispose() { value: function dispose() {
this.skinViewer.domElement.removeEventListener("contextmenu", this.animationPauseListener, false);
this.orbitControls.dispose(); this.orbitControls.dispose();
} }
}, {
key: "rotation",
get: function get$$1() {
return this.orbitControls.enableRotate;
},
set: function set$$1(value) {
this.orbitControls.enableRotate = value;
}
}, {
key: "zoom",
get: function get$$1() {
return this.orbitControls.enableZoom;
},
set: function set$$1(value) {
this.orbitControls.enableZoom = value;
}
}, {
key: "pan",
get: function get$$1() {
return this.orbitControls.enablePan;
},
set: function set$$1(value) {
this.orbitControls.enablePan = value;
}
}]); }]);
return SkinControl; return MouseControl;
}(); }();
/**
* @license
* skinview3d <https://github.com/to2mbn/skinview3d>
*
* Copyright (C) 2017 the original author or authors
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*
* @author yushijinhun <https://github.com/yushijinhun>
* @author Hacksore <https://github.com/Hacksore>
* @author Kent Rasmussen <https://github.com/earthiverse>
*/
exports.SkinObject = SkinObject; exports.SkinObject = SkinObject;
exports.CapeObject = CapeObject; exports.CapeObject = CapeObject;
exports.PlayerObject = PlayerObject; exports.PlayerObject = PlayerObject;
exports.SkinViewer = SkinViewer; exports.SkinViewer = SkinViewer;
exports.SkinControl = SkinControl; exports.MouseControl = MouseControl;
exports.invokeAnimation = invokeAnimation;
exports.CompositeAnimation = CompositeAnimation; exports.CompositeAnimation = CompositeAnimation;
exports.WalkAnimation = WalkAnimation; exports.WalkingAnimation = WalkingAnimation;
exports.RunningAnimation = RunningAnimation;
exports.RotatingAnimation = RotatingAnimation;
Object.defineProperty(exports, '__esModule', { value: true }); Object.defineProperty(exports, '__esModule', { value: true });

2
js/skinview3d.js.map
View File

File diff suppressed because one or more lines are too long

56
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

225
js/skinview3d.module.js
View File

@ -1,3 +1,30 @@
/**
* skinview3d (https://github.com/to2mbn/skinview3d)
*
* MIT License
*
* Original work Copyright (c) 2014-2018 Kent Rasmussen
* Modified work Copyright (c) 2017-2018 Haowei Wen, Sean Boult, Pig Fang and contributors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
import { Vector2, Group, BoxGeometry, Mesh, Texture, NearestFilter, NearestMipMapNearestFilter, MeshBasicMaterial, FrontSide, DoubleSide, Scene, PerspectiveCamera, WebGLRenderer, Vector3, MOUSE, Quaternion, Spherical, OrthographicCamera, EventDispatcher } from 'three'; import { Vector2, Group, BoxGeometry, Mesh, Texture, NearestFilter, NearestMipMapNearestFilter, MeshBasicMaterial, FrontSide, DoubleSide, Scene, PerspectiveCamera, WebGLRenderer, Vector3, MOUSE, Quaternion, Spherical, OrthographicCamera, EventDispatcher } from 'three';
var classCallCheck = function (instance, Constructor) { var classCallCheck = function (instance, Constructor) {
@ -99,12 +126,14 @@ var esp = 0.002;
var SkinObject = function (_THREE$Group) { var SkinObject = function (_THREE$Group) {
inherits(SkinObject, _THREE$Group); inherits(SkinObject, _THREE$Group);
function SkinObject(isSlim, layer1Material, layer2Material) { function SkinObject(slim, layer1Material, layer2Material) {
classCallCheck(this, SkinObject); classCallCheck(this, SkinObject);
// Head
var _this = possibleConstructorReturn(this, (SkinObject.__proto__ || Object.getPrototypeOf(SkinObject)).call(this)); var _this = possibleConstructorReturn(this, (SkinObject.__proto__ || Object.getPrototypeOf(SkinObject)).call(this));
_this.slim = slim;
// Head
_this.head = new Group(); _this.head = new Group();
var headBox = new BoxGeometry(8, 8, 8, 0, 0, 0); var headBox = new BoxGeometry(8, 8, 8, 0, 0, 0);
@ -140,8 +169,8 @@ var SkinObject = function (_THREE$Group) {
_this.rightArm = new Group(); _this.rightArm = new Group();
var rightArmPivot = new Group(); var rightArmPivot = new Group();
var rightArmBox = new BoxGeometry((isSlim ? 3 : 4) - esp, 12 - esp, 4 - esp, 0, 0, 0); var rightArmBox = new BoxGeometry((slim ? 3 : 4) - esp, 12 - esp, 4 - esp, 0, 0, 0);
if (isSlim) { if (slim) {
addVertices(rightArmBox, toSkinVertices(44, 16, 47, 20), toSkinVertices(47, 16, 50, 20), toSkinVertices(40, 20, 44, 32), toSkinVertices(44, 20, 47, 32), toSkinVertices(47, 20, 51, 32), toSkinVertices(51, 20, 54, 32)); addVertices(rightArmBox, toSkinVertices(44, 16, 47, 20), toSkinVertices(47, 16, 50, 20), toSkinVertices(40, 20, 44, 32), toSkinVertices(44, 20, 47, 32), toSkinVertices(47, 20, 51, 32), toSkinVertices(51, 20, 54, 32));
} else { } else {
addVertices(rightArmBox, toSkinVertices(44, 16, 48, 20), toSkinVertices(48, 16, 52, 20), toSkinVertices(40, 20, 44, 32), toSkinVertices(44, 20, 48, 32), toSkinVertices(48, 20, 52, 32), toSkinVertices(52, 20, 56, 32)); addVertices(rightArmBox, toSkinVertices(44, 16, 48, 20), toSkinVertices(48, 16, 52, 20), toSkinVertices(40, 20, 44, 32), toSkinVertices(44, 20, 48, 32), toSkinVertices(48, 20, 52, 32), toSkinVertices(52, 20, 56, 32));
@ -149,8 +178,8 @@ var SkinObject = function (_THREE$Group) {
var rightArmMesh = new Mesh(rightArmBox, layer1Material); var rightArmMesh = new Mesh(rightArmBox, layer1Material);
rightArmPivot.add(rightArmMesh); rightArmPivot.add(rightArmMesh);
var rightArm2Box = new BoxGeometry((isSlim ? 3.375 : 4.5) - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0); var rightArm2Box = new BoxGeometry((slim ? 3.375 : 4.5) - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0);
if (isSlim) { if (slim) {
addVertices(rightArm2Box, toSkinVertices(44, 32, 47, 36), toSkinVertices(47, 32, 50, 36), toSkinVertices(40, 36, 44, 48), toSkinVertices(44, 36, 47, 48), toSkinVertices(47, 36, 51, 48), toSkinVertices(51, 36, 54, 48)); addVertices(rightArm2Box, toSkinVertices(44, 32, 47, 36), toSkinVertices(47, 32, 50, 36), toSkinVertices(40, 36, 44, 48), toSkinVertices(44, 36, 47, 48), toSkinVertices(47, 36, 51, 48), toSkinVertices(51, 36, 54, 48));
} else { } else {
addVertices(rightArm2Box, toSkinVertices(44, 32, 48, 36), toSkinVertices(48, 32, 52, 36), toSkinVertices(40, 36, 44, 48), toSkinVertices(44, 36, 48, 48), toSkinVertices(48, 36, 52, 48), toSkinVertices(52, 36, 56, 48)); addVertices(rightArm2Box, toSkinVertices(44, 32, 48, 36), toSkinVertices(48, 32, 52, 36), toSkinVertices(40, 36, 44, 48), toSkinVertices(44, 36, 48, 48), toSkinVertices(48, 36, 52, 48), toSkinVertices(52, 36, 56, 48));
@ -162,15 +191,15 @@ var SkinObject = function (_THREE$Group) {
rightArmPivot.position.y = -6; rightArmPivot.position.y = -6;
_this.rightArm.add(rightArmPivot); _this.rightArm.add(rightArmPivot);
_this.rightArm.position.y = -4; _this.rightArm.position.y = -4;
_this.rightArm.position.x = isSlim ? -5.5 : -6; _this.rightArm.position.x = slim ? -5.5 : -6;
_this.add(_this.rightArm); _this.add(_this.rightArm);
// Left Arm // Left Arm
_this.leftArm = new Group(); _this.leftArm = new Group();
var leftArmPivot = new Group(); var leftArmPivot = new Group();
var leftArmBox = new BoxGeometry((isSlim ? 3 : 4) - esp, 12 - esp, 4 - esp, 0, 0, 0); var leftArmBox = new BoxGeometry((slim ? 3 : 4) - esp, 12 - esp, 4 - esp, 0, 0, 0);
if (isSlim) { if (slim) {
addVertices(leftArmBox, toSkinVertices(36, 48, 39, 52), toSkinVertices(39, 48, 42, 52), toSkinVertices(32, 52, 36, 64), toSkinVertices(36, 52, 39, 64), toSkinVertices(39, 52, 43, 64), toSkinVertices(43, 52, 46, 64)); addVertices(leftArmBox, toSkinVertices(36, 48, 39, 52), toSkinVertices(39, 48, 42, 52), toSkinVertices(32, 52, 36, 64), toSkinVertices(36, 52, 39, 64), toSkinVertices(39, 52, 43, 64), toSkinVertices(43, 52, 46, 64));
} else { } else {
addVertices(leftArmBox, toSkinVertices(36, 48, 40, 52), toSkinVertices(40, 48, 44, 52), toSkinVertices(32, 52, 36, 64), toSkinVertices(36, 52, 40, 64), toSkinVertices(40, 52, 44, 64), toSkinVertices(44, 52, 48, 64)); addVertices(leftArmBox, toSkinVertices(36, 48, 40, 52), toSkinVertices(40, 48, 44, 52), toSkinVertices(32, 52, 36, 64), toSkinVertices(36, 52, 40, 64), toSkinVertices(40, 52, 44, 64), toSkinVertices(44, 52, 48, 64));
@ -178,8 +207,8 @@ var SkinObject = function (_THREE$Group) {
var leftArmMesh = new Mesh(leftArmBox, layer1Material); var leftArmMesh = new Mesh(leftArmBox, layer1Material);
leftArmPivot.add(leftArmMesh); leftArmPivot.add(leftArmMesh);
var leftArm2Box = new BoxGeometry((isSlim ? 3.375 : 4.5) - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0); var leftArm2Box = new BoxGeometry((slim ? 3.375 : 4.5) - esp, 13.5 - esp, 4.5 - esp, 0, 0, 0);
if (isSlim) { if (slim) {
addVertices(leftArm2Box, toSkinVertices(52, 48, 55, 52), toSkinVertices(55, 48, 58, 52), toSkinVertices(48, 52, 52, 64), toSkinVertices(52, 52, 55, 64), toSkinVertices(55, 52, 59, 64), toSkinVertices(59, 52, 62, 64)); addVertices(leftArm2Box, toSkinVertices(52, 48, 55, 52), toSkinVertices(55, 48, 58, 52), toSkinVertices(48, 52, 52, 64), toSkinVertices(52, 52, 55, 64), toSkinVertices(55, 52, 59, 64), toSkinVertices(59, 52, 62, 64));
} else { } else {
addVertices(leftArm2Box, toSkinVertices(52, 48, 56, 52), toSkinVertices(56, 48, 60, 52), toSkinVertices(48, 52, 52, 64), toSkinVertices(52, 52, 56, 64), toSkinVertices(56, 52, 60, 64), toSkinVertices(60, 52, 64, 64)); addVertices(leftArm2Box, toSkinVertices(52, 48, 56, 52), toSkinVertices(56, 48, 60, 52), toSkinVertices(48, 52, 52, 64), toSkinVertices(52, 52, 56, 64), toSkinVertices(56, 52, 60, 64), toSkinVertices(60, 52, 64, 64));
@ -191,7 +220,7 @@ var SkinObject = function (_THREE$Group) {
leftArmPivot.position.y = -6; leftArmPivot.position.y = -6;
_this.leftArm.add(leftArmPivot); _this.leftArm.add(leftArmPivot);
_this.leftArm.position.y = -4; _this.leftArm.position.y = -4;
_this.leftArm.position.x = isSlim ? 5.5 : 6; _this.leftArm.position.x = slim ? 5.5 : 6;
_this.add(_this.leftArm); _this.add(_this.leftArm);
// Right Leg // Right Leg
@ -271,8 +300,6 @@ var PlayerObject = function (_THREE$Group3) {
var _this3 = possibleConstructorReturn(this, (PlayerObject.__proto__ || Object.getPrototypeOf(PlayerObject)).call(this)); var _this3 = possibleConstructorReturn(this, (PlayerObject.__proto__ || Object.getPrototypeOf(PlayerObject)).call(this));
_this3.slim = slim;
_this3.skin = new SkinObject(slim, layer1Material, layer2Material); _this3.skin = new SkinObject(slim, layer1Material, layer2Material);
_this3.skin.visible = false; _this3.skin.visible = false;
_this3.add(_this3.skin); _this3.add(_this3.skin);
@ -870,6 +897,7 @@ var AnimationHandle = function () {
this.speed = this._speed = 1.0; this.speed = this._speed = 1.0;
this._lastChange = null; this._lastChange = null;
this._lastChangeX = null; this._lastChangeX = null;
this._animationNaturalSpeed = animation.naturalSpeed;
} }
createClass(AnimationHandle, [{ createClass(AnimationHandle, [{
@ -889,7 +917,7 @@ var AnimationHandle = function () {
} }
if (this.paused === false) { if (this.paused === false) {
var _dt = time - this._lastChange; var _dt = time - this._lastChange;
var x = this._lastChangeX + this.speed * _dt; var x = this._lastChangeX + this.speed * this._animationNaturalSpeed * _dt;
invokeAnimation(this.animation, player, x); invokeAnimation(this.animation, player, x);
} }
} }
@ -932,19 +960,70 @@ var CompositeAnimation = function () {
return CompositeAnimation; return CompositeAnimation;
}(); }();
var WalkAnimation = function WalkAnimation(player, time) { var WalkingAnimation = function WalkingAnimation(player, time) {
var skin = player.skin; var skin = player.skin;
var angleRot = time + Math.PI / 2;
// Leg Swing // Leg swing
skin.leftLeg.rotation.x = Math.cos(angleRot); skin.leftLeg.rotation.x = Math.sin(time) * 0.3;
skin.rightLeg.rotation.x = Math.cos(angleRot + Math.PI); skin.rightLeg.rotation.x = Math.sin(time + Math.PI) * 0.3;
// Arm Swing // Arm swing
skin.leftArm.rotation.x = Math.cos(angleRot + Math.PI); skin.leftArm.rotation.x = Math.sin(time + Math.PI) * 0.5;
skin.rightArm.rotation.x = Math.cos(angleRot); skin.rightArm.rotation.x = Math.sin(time) * 0.5;
var basicArmRotationZ = Math.PI * 0.02;
skin.leftArm.rotation.z = Math.cos(time) * 0.03 + basicArmRotationZ;
skin.rightArm.rotation.z = Math.cos(time + Math.PI) * 0.03 - basicArmRotationZ;
// Head shaking with different frequency & amplitude
skin.head.rotation.y = Math.sin(time / 2) * 0.2;
skin.head.rotation.x = Math.sin(time / 3) * 0.15;
// Always add an angle for cape around the x axis
var basicCapeRotationX = Math.PI * 0.06;
player.cape.rotation.x = Math.sin(time / 1.5) * 0.06 + basicCapeRotationX;
}; };
WalkingAnimation.naturalSpeed = 5;
var RunningAnimation = function RunningAnimation(player, time) {
var skin = player.skin;
// Leg swing with larger amplitude
skin.leftLeg.rotation.x = Math.cos(time + Math.PI) * 1.3;
skin.rightLeg.rotation.x = Math.cos(time) * 1.3;
// Arm swing
skin.leftArm.rotation.x = Math.cos(time) * 1.5;
skin.rightArm.rotation.x = Math.cos(time + Math.PI) * 1.5;
var basicArmRotationZ = Math.PI * 0.1;
skin.leftArm.rotation.z = Math.cos(time) * 0.1 + basicArmRotationZ;
skin.rightArm.rotation.z = Math.cos(time + Math.PI) * 0.1 - basicArmRotationZ;
// Jumping
player.position.y = Math.cos(time * 2);
// Dodging when running
player.position.x = Math.cos(time) * 0.15;
// Slightly tilting when running
player.rotation.z = Math.cos(time + Math.PI) * 0.01;
// Apply higher swing frequency, lower amplitude,
// and greater basic rotation around x axis,
// to cape when running.
var basicCapeRotationX = Math.PI * 0.3;
player.cape.rotation.x = Math.sin(time * 2) * 0.1 + basicCapeRotationX;
// What about head shaking?
// You shouldn't glance right and left when running dude :P
};
RunningAnimation.naturalSpeed = 13;
var RotatingAnimation = function RotatingAnimation(player, time) {
player.rotation.y = time;
};
RotatingAnimation.naturalSpeed = 1;
function copyImage(context, sX, sY, w, h, dX, dY, flipHorizontal) { function copyImage(context, sX, sY, w, h, dX, dY, flipHorizontal) {
var imgData = context.getImageData(sX, sY, w, h); var imgData = context.getImageData(sX, sY, w, h);
if (flipHorizontal) { if (flipHorizontal) {
@ -1029,9 +1108,10 @@ var SkinViewer = function () {
// scene // scene
this.scene = new Scene(); this.scene = new Scene();
this.camera = new PerspectiveCamera(75); // Use smaller fov to avoid distortion
this.camera = new PerspectiveCamera(40);
this.camera.position.y = -12; this.camera.position.y = -12;
this.camera.position.z = 30; this.camera.position.z = 60;
this.renderer = new WebGLRenderer({ angleRot: true, alpha: true, antialias: false }); this.renderer = new WebGLRenderer({ angleRot: true, alpha: true, antialias: false });
this.renderer.setSize(300, 300); // default size this.renderer.setSize(300, 300); // default size
@ -1086,16 +1166,28 @@ var SkinViewer = function () {
return console.error("Failed loading " + _this.capeImg.src); return console.error("Failed loading " + _this.capeImg.src);
}; };
this.capeImg.onload = function () { this.capeImg.onload = function () {
var isOldFormat = false;
if (_this.capeImg.width !== 2 * _this.capeImg.height) { if (_this.capeImg.width !== 2 * _this.capeImg.height) {
console.error("Bad cape size"); if (_this.capeImg.width * 17 == _this.capeImg.height * 22) {
return; // width/height = 22/17
isOldFormat = true;
} else {
console.error("Bad cape size");
return;
}
} }
_this.capeCanvas.width = _this.capeImg.width;
_this.capeCanvas.height = _this.capeImg.height;
var capeContext = _this.capeCanvas.getContext("2d"); var capeContext = _this.capeCanvas.getContext("2d");
if (isOldFormat) {
var width = _this.capeImg.width * 64 / 22;
_this.capeCanvas.width = width;
_this.capeCanvas.height = width / 2;
} else {
_this.capeCanvas.width = _this.capeImg.width;
_this.capeCanvas.height = _this.capeImg.height;
}
capeContext.clearRect(0, 0, _this.capeCanvas.width, _this.capeCanvas.height); capeContext.clearRect(0, 0, _this.capeCanvas.width, _this.capeCanvas.height);
capeContext.drawImage(_this.capeImg, 0, 0, _this.capeCanvas.width, _this.capeCanvas.height); capeContext.drawImage(_this.capeImg, 0, 0, _this.capeImg.width, _this.capeImg.height);
_this.capeTexture.needsUpdate = true; _this.capeTexture.needsUpdate = true;
_this.capeMaterial.needsUpdate = true; _this.capeMaterial.needsUpdate = true;
@ -1174,13 +1266,10 @@ var SkinViewer = function () {
return SkinViewer; return SkinViewer;
}(); }();
var SkinControl = function () { var MouseControl = function () {
function SkinControl(skinViewer) { function MouseControl(skinViewer) {
var _this2 = this; classCallCheck(this, MouseControl);
classCallCheck(this, SkinControl);
this.enableAnimationControl = true;
this.skinViewer = skinViewer; this.skinViewer = skinViewer;
this.orbitControls = new OrbitControls(skinViewer.camera, skinViewer.renderer.domElement); this.orbitControls = new OrbitControls(skinViewer.camera, skinViewer.renderer.domElement);
@ -1189,50 +1278,40 @@ var SkinControl = function () {
this.orbitControls.minDistance = 10; this.orbitControls.minDistance = 10;
this.orbitControls.maxDistance = 256; this.orbitControls.maxDistance = 256;
this.orbitControls.update(); this.orbitControls.update();
this.animationPauseListener = function (e) {
if (_this2.enableAnimationControl) {
e.preventDefault();
_this2.skinViewer.animationPaused = !_this2.skinViewer.animationPaused;
}
};
this.skinViewer.domElement.addEventListener("contextmenu", this.animationPauseListener, false);
} }
createClass(SkinControl, [{ createClass(MouseControl, [{
key: "dispose", key: "dispose",
value: function dispose() { value: function dispose() {
this.skinViewer.domElement.removeEventListener("contextmenu", this.animationPauseListener, false);
this.orbitControls.dispose(); this.orbitControls.dispose();
} }
}, {
key: "rotation",
get: function get$$1() {
return this.orbitControls.enableRotate;
},
set: function set$$1(value) {
this.orbitControls.enableRotate = value;
}
}, {
key: "zoom",
get: function get$$1() {
return this.orbitControls.enableZoom;
},
set: function set$$1(value) {
this.orbitControls.enableZoom = value;
}
}, {
key: "pan",
get: function get$$1() {
return this.orbitControls.enablePan;
},
set: function set$$1(value) {
this.orbitControls.enablePan = value;
}
}]); }]);
return SkinControl; return MouseControl;
}(); }();
/** export { SkinObject, CapeObject, PlayerObject, SkinViewer, MouseControl, invokeAnimation, CompositeAnimation, WalkingAnimation, RunningAnimation, RotatingAnimation };
* @license
* skinview3d <https://github.com/to2mbn/skinview3d>
*
* Copyright (C) 2017 the original author or authors
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*
* @author yushijinhun <https://github.com/yushijinhun>
* @author Hacksore <https://github.com/Hacksore>
* @author Kent Rasmussen <https://github.com/earthiverse>
*/
export { SkinObject, CapeObject, PlayerObject, SkinViewer, SkinControl, CompositeAnimation, WalkAnimation };
//# sourceMappingURL=skinview3d.module.js.map //# sourceMappingURL=skinview3d.module.js.map

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

File diff suppressed because one or more lines are too long