Merge pull request #3 from yushijinhun/master
Support zooming and rotating
This commit is contained in:
commit
71583ec3b5
10
README.md
10
README.md
|
@ -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)
|
||||
|
|
|
@ -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
|
||||
});
|
|
@ -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>
|
1553
js/skinpreview3d.js
1553
js/skinpreview3d.js
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue