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

Update stories

This commit is contained in:
Sean Boult 2020-03-13 23:40:36 -05:00
parent 8e0f9959b1
commit 01ff365fd6
1 changed files with 35 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
stories/index.stories.js
View File

@ -1,12 +1,14 @@
/* eslint-disable */ /* eslint-disable */
import * as skinview3d from '../libs/skinview3d'; import * as skinview3d from '../libs/skinview3d';
import { withKnobs, radios, number } from "@storybook/addon-knobs"; import { withKnobs, radios, number } from '@storybook/addon-knobs';
export default { export default {
title: 'Skinview3d', title: 'Skinview3d',
decorators: [withKnobs] decorators: [withKnobs]
}; };
let currentAnimation;
const createViewer = () => { const createViewer = () => {
const element = document.createElement('div'); const element = document.createElement('div');
element.style.width = '400px'; element.style.width = '400px';
@ -16,7 +18,7 @@ const createViewer = () => {
domElement: element, domElement: element,
width: 600, width: 600,
height: 600, height: 600,
skinUrl: "texture/1_8_texturemap_redux.png", skinUrl: 'texture/1_8_texturemap_redux.png',
}); });
let control = skinview3d.createOrbitControls(viewer); let control = skinview3d.createOrbitControls(viewer);
@ -27,19 +29,34 @@ const createViewer = () => {
return { viewer, element }; return { viewer, element };
} }
const { viewer, element } = createViewer(); let { viewer, element } = createViewer();
export const NoAnimation = () => { export const NoAnimation = () => {
if (currentAnimation) {
currentAnimation.remove();
}
return element; return element;
}; };
export const WithAnimation = () => { export const WithAnimation = () => {
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]);
let walk = viewer.animations.add(skinview3d.WalkingAnimation);
const label = 'Speed'; const label = 'Speed';
const defaultValue = 1; const defaultValue = 1;
const options = { const options = {
range: true, range: true,
@ -47,28 +64,33 @@ export const WithAnimation = () => {
max: 3, max: 3,
step: 0.01, step: 0.01,
}; };
const groupId = 'GROUP-ANIMATION'; const value = number(label, defaultValue, options);
const value = number(label, defaultValue, options, groupId);
walk.speed = value; currentAnimation.speed = value;
return element; return element;
}; };
export const TestSkins = () => { export const TestTextures = () => {
const label = 'Skin Textures'; const skinOptions = {
const options = {
'1.8 Skin': '1_8_texturemap_redux', '1.8 Skin': '1_8_texturemap_redux',
'Classic Skin': 'Hacksore', 'Classic Skin': 'Hacksore',
'HD Skin': 'ironman_hd', 'HD Skin': 'ironman_hd',
}; };
const defaultValue = '1_8_texturemap_redux'; const skinUrl = radios('Skin Textures', skinOptions, '1_8_texturemap_redux');
const groupId = 'SKIN-GROUP';
const skinUrl = radios(label, options, defaultValue, groupId); const capeOptions = {
'None': 'none',
'Classic Cape': 'cape',
'HD Cape': 'hd_cape',
};
const capeUrl = radios('Cape Textures', capeOptions, 'none');
viewer.skinUrl = `texture/${skinUrl}.png`; viewer.skinUrl = `texture/${skinUrl}.png`;
// Will fix with #48
viewer.capeUrl = capeUrl !== 'none' ? `texture/${capeUrl}.png` : null;
return element; return element;
}; };