Add storybook
Sean Boult
|
|
@ -62,3 +62,4 @@ libs/
|
||||||
_ignore/
|
_ignore/
|
||||||
.DS_Store
|
.DS_Store
|
||||||
.rpt2_cache
|
.rpt2_cache
|
||||||
|
dist/
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
module.exports = {
|
||||||
|
stories: ['../stories/**/*.stories.js'],
|
||||||
|
addons: ['@storybook/addon-knobs/register']
|
||||||
|
};
|
||||||
|
|
@ -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>
|
|
||||||
14
package.json
|
|
@ -15,7 +15,9 @@
|
||||||
"dev:watch:bundles": "rollup -w -c",
|
"dev:watch:bundles": "rollup -w -c",
|
||||||
"dev:serve": "ws",
|
"dev:serve": "ws",
|
||||||
"dev": "npm-run-all --parallel dev:watch:modules dev:watch:bundles dev:serve",
|
"dev": "npm-run-all --parallel dev:watch:modules dev:watch:bundles dev:serve",
|
||||||
"prepublishOnly": "npm run clean && npm run build"
|
"prepublishOnly": "npm run clean && npm run build",
|
||||||
|
"storybook": "start-storybook -s ./public -p 6006",
|
||||||
|
"build-storybook": "build-storybook"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
|
@ -38,21 +40,25 @@
|
||||||
"bundles"
|
"bundles"
|
||||||
],
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"three": "^0.112.1",
|
"skinview-utils": "^0.2.0",
|
||||||
"skinview-utils": "^0.2.0"
|
"three": "^0.112.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.8.7",
|
||||||
"@rollup/plugin-node-resolve": "^7.0.0",
|
"@rollup/plugin-node-resolve": "^7.0.0",
|
||||||
"@rollup/plugin-typescript": "^2.1.0",
|
"@rollup/plugin-typescript": "^2.1.0",
|
||||||
|
"@storybook/html": "^5.3.14",
|
||||||
"@typescript-eslint/eslint-plugin": "^2.17.0",
|
"@typescript-eslint/eslint-plugin": "^2.17.0",
|
||||||
"@typescript-eslint/parser": "^2.17.0",
|
"@typescript-eslint/parser": "^2.17.0",
|
||||||
"@yushijinhun/three-minifier-rollup": "^0.1.4",
|
"@yushijinhun/three-minifier-rollup": "^0.1.4",
|
||||||
|
"babel-loader": "^8.0.6",
|
||||||
"eslint": "^6.8.0",
|
"eslint": "^6.8.0",
|
||||||
"local-web-server": "^3.0.7",
|
"local-web-server": "^3.0.7",
|
||||||
"npm-run-all": "^4.1.5",
|
"npm-run-all": "^4.1.5",
|
||||||
"rimraf": "^3.0.0",
|
"rimraf": "^3.0.0",
|
||||||
"rollup": "^1.29.1",
|
"rollup": "^1.29.1",
|
||||||
"rollup-plugin-terser": "^5.2.0",
|
"rollup-plugin-terser": "^5.2.0",
|
||||||
"typescript": "^3.7.5"
|
"typescript": "^3.7.5",
|
||||||
|
"@storybook/addon-knobs": "^5.3.14"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 689 B |
|
After Width: | Height: | Size: 589 B |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 278 KiB |
|
After Width: | Height: | Size: 109 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -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;
|
||||||
|
};
|
||||||