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

Merge branch 'control'

This commit is contained in:
yushijinhun 2017-09-02 20:47:51 +08:00
parent cb00cd4067 cf8cbf3cc9
commit 8f8b7061ba
No known key found for this signature in database
GPG Key ID: 5BC167F73EA558E4
4 changed files with 1167 additions and 430 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -1,16 +1,17 @@
# skinpreview3d.js # skinpreview3d.js
This is a Three.js powered Minecraft skin renderer packaged as a jQuery plugin. A Three.js powered Minecraft skin viewer.
The code was originally created by [Kent Rasmussen](https://github.com/earthiverse). You can find out more about his project [here](https://github.com/earthiverse/3D-Minecraft-Skin-Viewer). The code was originally created by [Kent Rasmussen](https://github.com/earthiverse). You can find out more about his project [here](https://github.com/earthiverse/3D-Minecraft-Skin-Viewer).
# Features # Features
* 1.8 Skins * 1.8 Skins
* HD Skins
* Capes * Capes
* Slim arms * Slim arms
# Dependencies # Dependencies
* [Three.js](https://github.com/mrdoob/three.js/) * [Three.js](https://github.com/mrdoob/three.js/)
* [jQuery](https://jquery.com/) * [jQuery](https://jquery.com/) (Optional)
# Usage # Usage
HTML HTML
@ -30,6 +31,7 @@ $(() => {
}); });
}); });
``` ```
See `example_jquery.html` and `example_purejs.html` for more examples.
# License # License
* `/img/mojang_cape.png` Copyright Mojang AB. [Link](https://minecraft.gamepedia.com/File:MojangCape2016.png) * `/img/mojang_cape.png` Copyright Mojang AB. [Link](https://minecraft.gamepedia.com/File:MojangCape2016.png)

7
example.html → example_jquery.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>skinpreview3d.js</title> <title>skinpreview3d.js example using jquery</title>
</head> </head>
<body> <body>
@ -12,11 +12,12 @@
<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/87/three.min.js"></script>
<script type="text/javascript" src="js/skinpreview3d.js"></script> <script type="text/javascript" src="js/skinpreview3d.js"></script>
<script> <script>
$(function() { $(() => {
$("#skin_container").skinPreview3D({ $("#skin_container").skinPreview3d({
skinUrl: 'img/hatsune_miku.png', skinUrl: 'img/hatsune_miku.png',
capeUrl: 'img/mojang_cape.png', capeUrl: 'img/mojang_cape.png',
slim: true, slim: true,
// disableControl: true, // This disables the mouse control feature
width: 600, width: 600,
height: 600 height: 600
}); });

31
example_purejs.html Normal file
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>skinpreview3d.js example using pure javascript</title>
</head>
<body>
<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="js/skinpreview3d.js"></script>
<script>
var skinViewer = new skinpreview3d.SkinViewer(document.getElementById('skin_container'), 600, 600, true);
skinViewer.skinUrl = 'img/hatsune_miku.png';
skinViewer.capeUrl = 'img/mojang_cape.png';
// this enables the mouse control feature
var control = new skinpreview3d.SkinControl(skinViewer);
// this makes the animation paused
// skinViewer.animationPaused = true;
// this changes the animation speed
// skinViewer.animationSpeed = 8;
// this disables the 'right click to play/pause' feature
// control.enableAnimationControl = false;
</script>
</body>
</html>

1409
js/skinpreview3d.js
View File

File diff suppressed because it is too large Load Diff