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

Update storybook

This commit is contained in:
Sean Boult 2020-07-15 20:56:05 -05:00
parent c10bb34fcd
commit bd5ccdf6b1
6 changed files with 194 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.storybook/main.js
View File

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

49
examples/stories/animation.story.js Normal file
View File

@ -0,0 +1,49 @@
/* eslint-disable */
import { createViewer } from "./util";
import { withKnobs, number } from "@storybook/addon-knobs";
import * as skinview3d from "../..";
import { radios } from "@storybook/addon-knobs";
let { viewer, element, defaultAnimation } = createViewer();
let currentAnimation = defaultAnimation;
export default {
title: "Skinview3d",
name: "Animation",
decorators: [withKnobs],
};
export const Animation = () => {
if (currentAnimation) {
currentAnimation.remove();
}
const animationMap = {
Walk: skinview3d.WalkingAnimation,
Run: skinview3d.RunningAnimation,
Rotate: skinview3d.RotatingAnimation,
};
const animationKey = radios("Animations", Object.keys(animationMap), "Run");
if (currentAnimation) {
currentAnimation.resetAndRemove();
}
currentAnimation = viewer.animations.add(animationMap[animationKey]);
const label = "Speed";
const defaultValue = 0.5;
const options = {
range: true,
min: 0.1,
max: 2,
step: 0.01,
};
const value = number(label, defaultValue, options);
currentAnimation.speed = value;
return element;
};

19
examples/stories/basic.story.js Normal file
View File

@ -0,0 +1,19 @@
/* eslint-disable */
import { createViewer } from "./util";
import { withKnobs, number } from "@storybook/addon-knobs";
let { viewer, element } = createViewer();
export default {
title: "Skinview3d",
name: "Basic",
decorators: [withKnobs],
};
export const Basic = () => {
const width = number("Canvas Width", 300);
const height = number("Canvas Height", 400);
viewer.setSize(width, height);
return element;
};

100
examples/stories/index.stories.js
View File

@ -1,100 +0,0 @@
/* eslint-disable */
import * as skinview3d from "../..";
import { withKnobs, radios, number } from "@storybook/addon-knobs";
export default {
title: "Skinview3d",
decorators: [withKnobs],
};
let currentAnimation;
const createViewer = () => {
const element = document.createElement("div");
const viewer = new skinview3d.SkinViewer(element, {
width: 300,
height: 400,
skin: "textures/1_8_texturemap_redux.png",
});
console.log(viewer);
// Control objects with your mouse!
const control = skinview3d.createOrbitControls(viewer);
control.enableRotate = true;
control.enableZoom = false;
control.enablePan = false;
// Add an animation
currentAnimation = viewer.animations.add(skinview3d.WalkingAnimation);
return { viewer, element };
};
let { viewer, element } = createViewer();
export const Basic = () => {
// reset
let { viewer, element } = createViewer();
if (currentAnimation) {
currentAnimation.remove();
}
return element;
};
export const Animation = () => {
if (currentAnimation) {
currentAnimation.remove();
}
const animationMap = {
Walk: skinview3d.WalkingAnimation,
Run: skinview3d.RunningAnimation,
Rotate: skinview3d.RotatingAnimation,
};
const animationKey = radios("Animations", Object.keys(animationMap), "Run");
currentAnimation = viewer.animations.add(animationMap[animationKey]);
const label = "Speed";
const defaultValue = 0.5;
const options = {
range: true,
min: 0.1,
max: 2,
step: 0.01,
};
const value = number(label, defaultValue, options);
currentAnimation.speed = value;
return element;
};
export const Textures = () => {
const skinOptions = {
"1.8 Skin": "1_8_texturemap_redux",
"Classic Skin": "Hacksore",
"HD Skin": "ironman_hd",
};
const skinUrl = radios("Skin Textures", skinOptions, "1_8_texturemap_redux");
const capeOptions = {
None: "none",
"Classic Cape": "cape",
"HD Cape": "hd_cape",
};
const capeUrl = radios("Cape Textures", capeOptions, "none");
viewer.loadSkin(`textures/${skinUrl}.png`);
if (capeUrl === "none") {
viewer.loadCape(null);
} else {
viewer.loadCape(`textures/${capeUrl}.png`);
}
return element;
};

103
examples/stories/textures.story.js Normal file
View File

@ -0,0 +1,103 @@
/* eslint-disable */
import { createViewer } from "./util";
import { radios, withKnobs, optionsKnob } from "@storybook/addon-knobs";
let { viewer, element } = createViewer();
const bodyParts = viewer.playerObject.skin;
const skinParts = {};
// set inner parts
skinParts.head = bodyParts.head.innerLayer;
skinParts.body = bodyParts.body.innerLayer;
skinParts.leftArm = bodyParts.leftArm.innerLayer;
skinParts.rightArm = bodyParts.rightArm.innerLayer;
skinParts.leftLeg = bodyParts.leftLeg.innerLayer;
skinParts.rightLeg = bodyParts.rightLeg.innerLayer;
// set outter parts
skinParts.head2 = bodyParts.head.outerLayer;
skinParts.body2 = bodyParts.body.outerLayer;
skinParts.leftArm2 = bodyParts.leftArm.outerLayer;
skinParts.rightArm2 = bodyParts.rightArm.outerLayer;
skinParts.leftLeg2 = bodyParts.leftLeg.outerLayer;
skinParts.rightLeg2 = bodyParts.rightLeg.outerLayer;
export default {
title: "Skinview3d",
name: "Textures",
decorators: [withKnobs],
};
export const Textures = () => {
const skinOptions = {
"1.8 Skin": "1_8_texturemap_redux",
"Classic Skin": "Hacksore",
"HD Skin": "ironman_hd",
};
const skinUrl = radios("Skin Textures", skinOptions, "1_8_texturemap_redux");
const capeOptions = {
None: "none",
"Classic Cape": "cape",
"HD Cape": "hd_cape",
};
const capeUrl = radios("Cape Textures", capeOptions, "none");
viewer.loadSkin(`textures/${skinUrl}.png`);
if (capeUrl === "none") {
viewer.loadCape(null);
} else {
viewer.loadCape(`textures/${capeUrl}.png`);
}
// bottom layers
const valuesBottomLayer = {
Head: "head",
Body: "body",
LeftArm: "leftArm",
RightArm: "rightArm",
RightLeg: "rightLeg",
LeftLeg: "leftLeg",
};
const optionsBottomLayer = optionsKnob(
"Bottom Layer",
valuesBottomLayer,
Object.values(valuesBottomLayer),
{
display: "inline-check",
}
);
// bottom layers
const valuesTopLayer = {
Head2: "head2",
Body2: "body2",
LeftArm2: "leftArm2",
RightArm2: "rightArm2",
RightLeg2: "rightLeg2",
LeftLeg2: "leftLeg2",
};
const optionsTopLayer = optionsKnob(
"Top Layer",
valuesTopLayer,
Object.values(valuesTopLayer),
{
display: "inline-check",
}
);
// toggle parts
console.log(skinParts);
for (let partName in skinParts) {
const visible = optionsBottomLayer
.concat(optionsTopLayer)
.includes(partName);
skinParts[partName].visible = visible;
}
return element;
};

21
examples/stories/util.js Normal file
View File

@ -0,0 +1,21 @@
/* eslint-disable */
import * as skinview3d from "../..";
export const createViewer = (config) => {
const width = config?.width || 300;
const height = config?.height || 400;
const element = document.createElement("div");
const viewer = new skinview3d.SkinViewer(element, {
width: width,
height: height,
skin: "textures/1_8_texturemap_redux.png",
});
const control = skinview3d.createOrbitControls(viewer);
control.enableRotate = true;
control.enableZoom = true;
control.enablePan = true;
return { viewer, element };
};