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

Add storybook

This commit is contained in:
Sean Boult 2020-03-13 21:52:20 -05:00
parent 26c3f3d382
commit 8e0f9959b1
15 changed files with 13069 additions and 3126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -62,3 +62,4 @@ libs/
_ignore/
.DS_Store
.rpt2_cache
dist/

4
.storybook/main.js Normal file
View File

@ -0,0 +1,4 @@
module.exports = {
stories: ['../stories/**/*.stories.js'],
addons: ['@storybook/addon-knobs/register']
};

45
examples/index.html
View File

@ -1,45 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>skinview3d</title>
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
<style>
html,
body {
margin: 0;
padding: 0;
background-color: #1e1e1e;
}
</style>
</head>
<body>
<div id="skin_container"></div>
<script type="text/javascript" src="../bundles/skinview3d.bundle.js"></script>
<script>
let skinViewer = new skinview3d.SkinViewer({
domElement: document.getElementById("skin_container"),
width: 900,
height: 900,
skinUrl: "./1_8_texturemap_redux.png"
});
// By default, the skin model is automatically detected. You can turn it off in this way:
// skinViewer.detectModel = false;
// skinViewer.playerObject.skin.slim = true;
let control = new skinview3d.createOrbitControls(skinViewer);
skinViewer.animations.add(skinview3d.WalkingAnimation);
skinViewer.animations.speed = 1.5;
</script>
</body>
</html>

15953
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

118
package.json
View File

@ -1,58 +1,64 @@
{
"name": "skinview3d",
"version": "2.0.0-alpha.1",
"description": "Three.js powered Minecraft skin viewer",
"main": "libs/skinview3d.js",
"type": "module",
"scripts": {
"clean": "rimraf libs bundles",
"build:modules": "tsc -p .",
"build:bundles": "rollup -c",
"build": "npm run build:modules && npm run build:bundles",
"test:lint": "eslint --ext .ts src",
"test": "npm run test:lint",
"dev:watch:modules": "tsc -w -p .",
"dev:watch:bundles": "rollup -w -c",
"dev:serve": "ws",
"dev": "npm-run-all --parallel dev:watch:modules dev:watch:bundles dev:serve",
"prepublishOnly": "npm run clean && npm run build"
},
"repository": {
"type": "git",
"url": "git+https://github.com/bs-community/skinview3d.git"
},
"author": "Haowei Wen <yushijinhun@gmail.com> (https://github.com/yushijinhun)",
"contributors": [
"Sean Boult <hacksore@mcskinsearch.com> (https://github.com/Hacksore)",
"Pig Fang <g-plane@hotmail.com> (https://github.com/g-plane)",
"printempw <h@prinzeugen.net> (https://github.com/printempw)",
"Kent Rasmussen <hyprkookeez@gmail.com> (https://github.com/earthiverse)"
],
"license": "MIT",
"bugs": {
"url": "https://github.com/bs-community/skinview3d/issues"
},
"homepage": "https://github.com/bs-community/skinview3d",
"files": [
"libs",
"bundles"
],
"dependencies": {
"three": "^0.112.1",
"skinview-utils": "^0.2.0"
},
"devDependencies": {
"@rollup/plugin-node-resolve": "^7.0.0",
"@rollup/plugin-typescript": "^2.1.0",
"@typescript-eslint/eslint-plugin": "^2.17.0",
"@typescript-eslint/parser": "^2.17.0",
"@yushijinhun/three-minifier-rollup": "^0.1.4",
"eslint": "^6.8.0",
"local-web-server": "^3.0.7",
"npm-run-all": "^4.1.5",
"rimraf": "^3.0.0",
"rollup": "^1.29.1",
"rollup-plugin-terser": "^5.2.0",
"typescript": "^3.7.5"
}
"name": "skinview3d",
"version": "2.0.0-alpha.1",
"description": "Three.js powered Minecraft skin viewer",
"main": "libs/skinview3d.js",
"type": "module",
"scripts": {
"clean": "rimraf libs bundles",
"build:modules": "tsc -p .",
"build:bundles": "rollup -c",
"build": "npm run build:modules && npm run build:bundles",
"test:lint": "eslint --ext .ts src",
"test": "npm run test:lint",
"dev:watch:modules": "tsc -w -p .",
"dev:watch:bundles": "rollup -w -c",
"dev:serve": "ws",
"dev": "npm-run-all --parallel dev:watch:modules dev:watch:bundles dev:serve",
"prepublishOnly": "npm run clean && npm run build",
"storybook": "start-storybook -s ./public -p 6006",
"build-storybook": "build-storybook"
},
"repository": {
"type": "git",
"url": "git+https://github.com/bs-community/skinview3d.git"
},
"author": "Haowei Wen <yushijinhun@gmail.com> (https://github.com/yushijinhun)",
"contributors": [
"Sean Boult <hacksore@mcskinsearch.com> (https://github.com/Hacksore)",
"Pig Fang <g-plane@hotmail.com> (https://github.com/g-plane)",
"printempw <h@prinzeugen.net> (https://github.com/printempw)",
"Kent Rasmussen <hyprkookeez@gmail.com> (https://github.com/earthiverse)"
],
"license": "MIT",
"bugs": {
"url": "https://github.com/bs-community/skinview3d/issues"
},
"homepage": "https://github.com/bs-community/skinview3d",
"files": [
"libs",
"bundles"
],
"dependencies": {
"skinview-utils": "^0.2.0",
"three": "^0.112.1"
},
"devDependencies": {
"@babel/core": "^7.8.7",
"@rollup/plugin-node-resolve": "^7.0.0",
"@rollup/plugin-typescript": "^2.1.0",
"@storybook/html": "^5.3.14",
"@typescript-eslint/eslint-plugin": "^2.17.0",
"@typescript-eslint/parser": "^2.17.0",
"@yushijinhun/three-minifier-rollup": "^0.1.4",
"babel-loader": "^8.0.6",
"eslint": "^6.8.0",
"local-web-server": "^3.0.7",
"npm-run-all": "^4.1.5",
"rimraf": "^3.0.0",
"rollup": "^1.29.1",
"rollup-plugin-terser": "^5.2.0",
"typescript": "^3.7.5",
"@storybook/addon-knobs": "^5.3.14"
}
}

0
examples/1_8_texturemap_redux.png → public/texture/1_8_texturemap_redux.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
public/texture/Hacksore.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 689 B

BIN
public/texture/cape.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 589 B

BIN
public/texture/haka.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
public/texture/hatsune_miku.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
public/texture/hd_cape.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 278 KiB

BIN
public/texture/ironman_hd.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

BIN
public/texture/mojang_cape.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
public/texture/sethbling.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

74
stories/index.stories.js Normal file
View File

@ -0,0 +1,74 @@
/* eslint-disable */
import * as skinview3d from '../libs/skinview3d';
import { withKnobs, radios, number } from "@storybook/addon-knobs";
export default {
title: 'Skinview3d',
decorators: [withKnobs]
};
const createViewer = () => {
const element = document.createElement('div');
element.style.width = '400px';
element.style.height = '500px';
let viewer = new skinview3d.SkinViewer({
domElement: element,
width: 600,
height: 600,
skinUrl: "texture/1_8_texturemap_redux.png",
});
let control = skinview3d.createOrbitControls(viewer);
control.enableRotate = true;
control.enableZoom = false;
control.enablePan = false;
return { viewer, element };
}
const { viewer, element } = createViewer();
export const NoAnimation = () => {
return element;
};
export const WithAnimation = () => {
let walk = viewer.animations.add(skinview3d.WalkingAnimation);
const label = 'Speed';
const defaultValue = 1;
const options = {
range: true,
min: 0.1,
max: 3,
step: 0.01,
};
const groupId = 'GROUP-ANIMATION';
const value = number(label, defaultValue, options, groupId);
walk.speed = value;
return element;
};
export const TestSkins = () => {
const label = 'Skin Textures';
const options = {
'1.8 Skin': '1_8_texturemap_redux',
'Classic Skin': 'Hacksore',
'HD Skin': 'ironman_hd',
};
const defaultValue = '1_8_texturemap_redux';
const groupId = 'SKIN-GROUP';
const skinUrl = radios(label, options, defaultValue, groupId);
viewer.skinUrl = `texture/${skinUrl}.png`;
return element;
};