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 */
import * as skinview3d from '../libs/skinview3d';
import { withKnobs, radios, number } from '@storybook/addon-knobs';
import * as skinview3d from "../libs/skinview3d";
import { withKnobs, radios, number } from "@storybook/addon-knobs";
export default {
title: 'Skinview3d',
decorators: [withKnobs]
title: "Skinview3d",
decorators: [withKnobs],
};
let currentAnimation;
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',
const element = document.createElement("div");
const viewer = new skinview3d.SkinViewer(element, {
width: 300,
height: 400,
skin: "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.enableZoom = false;
control.enablePan = false;
// Add an animation
currentAnimation = viewer.animations.add(skinview3d.WalkingAnimation);
return { viewer, element };
}
};
let { viewer, element } = createViewer();
export const NoAnimation = () => {
export const Basic = () => {
// reset
let { viewer, element } = createViewer();
if (currentAnimation) {
currentAnimation.remove();
}
@ -39,30 +43,28 @@ export const NoAnimation = () => {
return element;
};
export const WithAnimation = () => {
export const Animation = () => {
if (currentAnimation) {
currentAnimation.remove();
}
const animationMap = {
'Walk': skinview3d.WalkingAnimation,
'Run': skinview3d.RunningAnimation,
'Rotate': skinview3d.RotatingAnimation,
Walk: skinview3d.WalkingAnimation,
Run: skinview3d.RunningAnimation,
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]);
const label = "Speed";
const label = 'Speed';
const defaultValue = 1;
const defaultValue = 0.5;
const options = {
range: true,
min: 0.1,
max: 3,
step: 0.01,
range: true,
min: 0.1,
max: 2,
step: 0.01,
};
const value = number(label, defaultValue, options);
@ -71,26 +73,28 @@ export const WithAnimation = () => {
return element;
};
export const TestTextures = () => {
export const Textures = () => {
const skinOptions = {
'1.8 Skin': '1_8_texturemap_redux',
'Classic Skin': 'Hacksore',
'HD Skin': 'ironman_hd',
"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 skinUrl = radios("Skin Textures", skinOptions, "1_8_texturemap_redux");
const capeOptions = {
'None': 'none',
'Classic Cape': 'cape',
'HD Cape': 'hd_cape',
None: "none",
"Classic Cape": "cape",
"HD Cape": "hd_cape",
};
const capeUrl = radios('Cape Textures', capeOptions, 'none');
viewer.skinUrl = `texture/${skinUrl}.png`;
const capeUrl = radios("Cape Textures", capeOptions, "none");
viewer.loadSkin(`texture/${skinUrl}.png`);
// Will fix with #48
viewer.capeUrl = capeUrl !== 'none' ? `texture/${capeUrl}.png` : null;
if (capeUrl === "none") {
viewer.loadCape(null);
}
viewer.loadCape(`texture/${capeUrl}.png`);
return element;
};