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

Update stories

This commit is contained in:
Sean Boult 2020-07-10 08:52:13 -05:00
parent e885a68731
commit 4d6e8b3459
1 changed files with 46 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
stories/index.stories.js
View File

@ -1,37 +1,41 @@
/* 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; let currentAnimation;
const createViewer = () => { const createViewer = () => {
const element = document.createElement('div'); const element = document.createElement("div");
element.style.width = '400px'; const viewer = new skinview3d.SkinViewer(element, {
element.style.height = '500px'; width: 300,
height: 400,
let viewer = new skinview3d.SkinViewer({ skin: "texture/1_8_texturemap_redux.png",
domElement: element,
width: 600,
height: 600,
skinUrl: 'texture/1_8_texturemap_redux.png',
}); });
let control = skinview3d.createOrbitControls(viewer); console.log(viewer);
// Control objects with your mouse!
const control = skinview3d.createOrbitControls(viewer);
control.enableRotate = true; control.enableRotate = true;
control.enableZoom = false; control.enableZoom = false;
control.enablePan = false; control.enablePan = false;
// Add an animation
currentAnimation = viewer.animations.add(skinview3d.WalkingAnimation);
return { viewer, element }; return { viewer, element };
} };
let { viewer, element } = createViewer(); let { viewer, element } = createViewer();
export const NoAnimation = () => { export const Basic = () => {
// reset
let { viewer, element } = createViewer();
if (currentAnimation) { if (currentAnimation) {
currentAnimation.remove(); currentAnimation.remove();
} }
@ -39,30 +43,28 @@ export const NoAnimation = () => {
return element; return element;
}; };
export const WithAnimation = () => { export const Animation = () => {
if (currentAnimation) { if (currentAnimation) {
currentAnimation.remove(); currentAnimation.remove();
} }
const animationMap = { const animationMap = {
'Walk': skinview3d.WalkingAnimation, Walk: skinview3d.WalkingAnimation,
'Run': skinview3d.RunningAnimation, Run: skinview3d.RunningAnimation,
'Rotate': skinview3d.RotatingAnimation, Rotate: skinview3d.RotatingAnimation,
}; };
const animationKey = radios('Animations', Object.keys(animationMap), 'Run'); const animationKey = radios("Animations", Object.keys(animationMap), "Run");
currentAnimation = viewer.animations.add(animationMap[animationKey]); currentAnimation = viewer.animations.add(animationMap[animationKey]);
const label = "Speed";
const label = 'Speed'; const defaultValue = 0.5;
const defaultValue = 1;
const options = { const options = {
range: true, range: true,
min: 0.1, min: 0.1,
max: 3, max: 2,
step: 0.01, step: 0.01,
}; };
const value = number(label, defaultValue, options); const value = number(label, defaultValue, options);
@ -71,26 +73,28 @@ export const WithAnimation = () => {
return element; return element;
}; };
export const TestTextures = () => { export const Textures = () => {
const skinOptions = { const skinOptions = {
'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 skinUrl = radios('Skin Textures', skinOptions, '1_8_texturemap_redux'); const skinUrl = radios("Skin Textures", skinOptions, "1_8_texturemap_redux");
const capeOptions = { const capeOptions = {
'None': 'none', None: "none",
'Classic Cape': 'cape', "Classic Cape": "cape",
'HD Cape': 'hd_cape', "HD Cape": "hd_cape",
}; };
const capeUrl = radios('Cape Textures', capeOptions, 'none'); const capeUrl = radios("Cape Textures", capeOptions, "none");
viewer.skinUrl = `texture/${skinUrl}.png`; viewer.loadSkin(`texture/${skinUrl}.png`);
// Will fix with #48 if (capeUrl === "none") {
viewer.capeUrl = capeUrl !== 'none' ? `texture/${capeUrl}.png` : null; viewer.loadCape(null);
}
viewer.loadCape(`texture/${capeUrl}.png`);
return element; return element;
}; };