Merge pull request #3 from yushijinhun/master

Support zooming and rotating
This commit is contained in:
Sean Boult 2017-09-02 10:14:14 -05:00 committed by GitHub
commit 71583ec3b5
4 changed files with 1169 additions and 432 deletions

View File

@ -1,16 +1,17 @@
# 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).
# Features
* 1.8 Skins
* HD Skins
* Capes
* Slim arms
# Dependencies
* [Three.js](https://github.com/mrdoob/three.js/)
* [jQuery](https://jquery.com/)
* [jQuery](https://jquery.com/) (Optional)
# Usage
HTML
@ -21,15 +22,16 @@ HTML
JS
```js
$(() => {
$("#skin_container").skinPreview3D({
$("#skin_container").skinPreview3d({
skinUrl: 'img/hatsune_miku.png',
capeUrl: 'img/cape.png',
capeUrl: 'img/mojang_cape.png',
slim: true,
width: 600,
height: 600
});
});
```
See `example_jquery.html` and `example_purejs.html` for more examples.
# License
* `/img/mojang_cape.png` Copyright Mojang AB. [Link](https://minecraft.gamepedia.com/File:MojangCape2016.png)

View File

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

File diff suppressed because it is too large Load Diff