bs-community / skinview3d Goto Github PK

i'm new to html, and i have no idea how to put this in a website. Do i just paste in the whole folder? I dont really know what else i would do...

The hat overlay area seems have rendering issues when viewed in certain angles. As you can see when my headphones render the underside of the headphone is see through. Some type of blending or culling issue possibly?

Is it possible to flip the character and controls? I'm trying to flip the character and controls for dinnerbone.

Hi! I've came up with idea to improve skinview3d. Many custom Minecraft clients added wings mod so it would be awesome to show them on the web like cape or elytra.

Here is Wings mod: https://www.curseforge.com/minecraft/mc-mods/wings
Here is Cosmetic Wings mod: http://www.9minecraft.net/cosmetic-wings-mod/
Here is for example Badlion Client Store where players can buy wings: https://store.badlion.net/
In Poland we have for example Blazingpack (https://blazingpack.pl/) where some players are awarded with wings.

2D example images (all contain 2 wings): https://imgur.com/a/vFXZ6eY
2D example image (contains 1 wing): https://imgur.com/a/wUdNy3o
Both of these versions should be supported.

I needed a function where the skin would look at the mouse. I tried to do this by editing the code, but I couldn't :(

Seems like only the new style capes are loading (64x32). There are some needs to load a cape from Mojang where the cape size will not be converted to the new dimensions. Could we have maybe a config flag to ignore cape aspect ratio?

https://github.com/to2mbn/skinview3d/blob/master/src/viewer.js#L135``

At present, this module directly imports Three.js:

import * as THREE from 'three'

So the bundle files contains about 500kb of Three.js codes. It is too huge.

So you can reduce the bundling size by this ways:

• Tree Shaking.
• Import Three.js by this way:

import Vector2 from 'three/src/math/Vector2'

当前模块由于直接引入了 Three.js , 导致打包大小贼大 (大约 500kb ):

import * as THREE from 'three'

这些是一些解决方法:

• 使用 Tree Shaking (首先得改文件里导入 Three.js 的写法, 最好用 bili 或者 rollup 弄个包含了 Tree Shaking 后的 Three.js 源码的模块)
• 单独导入子模块:

import Vector2 from 'three/src/math/Vector2'

There needs to be a check for the hat layer before it's applied. Otherwise, it will draw the hat layer when we know that the skin did not intend for that.

Use tslint to check typescript definitions (in types/).

how to change the pose of the hands and head?

When applying a normal skin to a slim model, incorrect overlay of pixels on the hands occurs.

viewer.detectModel = false;
viewer.playerObject.skin.slim = true;

Skin:

As in #20 (comment)

Could we implement an npm script like this for real-time transpilation? This would also require an html file with the basic construct of the skin viewer.

Something like :
npm run watch

rollup -c tools/rollup.browser.min.js -w

We can discuss this more detail and figure out what works best. Currently, I have a local branch and it's working well to play around with the animation system.

I ran into this issue and it's also noted here. When we set the cape to null it should automatically hide the cape, then when setting it again it will unhide it.

It should be about 2 "pixels" lower.

Since @g-plane removed Travis and added the GitHub pipeline we need to update readme to include the new badge.

https://github.com/bs-community/skinview3d/runs/218531219

Browsers that i tested and it's not working:

• Edge

Error:
SCRIPT5009: SCRIPT5009: 'ImageBitmap' is not defined

When using the module from npm I ran into the .add method not being found on IAnimation. Although this is not breaking anything in the codebase I do receive typescript errors as the method can't be found.

export interface IAnimation {
	play(player: PlayerObject, time: number): void;

	// this defintion is missing or is not being inherited correctly 
	add(animation: AnimationFn): AnimationHandle; 
}

https://github.com/to2mbn/skinview3d/blob/master/types/animation.d.ts#L4

Let me know what the issue is here or if I'm doing something wrong. For now I've manually edited the typings file but obviously, that is a hacky workaround.

the canvas has tabindex="0" but why? it's not keyboard accessible by default

Currently models are very sharp, is it possible to add some kind of AA or SSAA?

If i upload cape normally it works, but if i'm trying to load it from link (ie. imgur (with .png added) it doesn't work

How can I make it to work properly?

(sorry for my english man)

When creating the instance of WebGLRenderer we should pass in preserveDrawingBuffer set to true which will make taking image captures of the canvas easier as well as rendering to a different canvas.

Add something like skinViewer.capeTexture.onBadCapeSize or something similar. Since I want to be able to resize the cape texture if the cape size isn’t compatible. I want to be able to do something like skinViewer.capeTexture.onBadCapeSize = function() { something };

Hi,

How do I use this library with webpack?
I used npx creacte-next-app and I'm constantly getting this error

Error: Must use import to load ES Module node_modules/skinview3d/libs/skinview3d.js
require() of ES modules is not supported.
require() of node_modules/skinview3d/libs/skinview3d.js from /SSD/projects/auraside/mantle/mantle-ui/.next/server/static/development/pages/admin/capes.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename skinview3d.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /node_modules/skinview3d/package.json.

Code:

import * as skinview3d from 'skinview3d';
...
useEffect(() => {
  const skinViewer = new skinview3d.FXAASkinViewer({
    width,
    height,
    renderPaused: true,
  });
  },[])
...

when alpha is set to true with anti-aliasing turned on there are weird black borders

new skinview3d.FXAASkinViewer({
    alpha: true
});

the title ^

I want to pause rendering, but not dispose.

e.g.

const viewer = new Viewer(...)

// whem modal window close:
modal.on('off', () => viewer.pauseRender()) // or viewer.pauseDraw()

// open:
modal.on('open', () => viewer.continueRender()) // or viewer.draw()

But now, when I call viewer.dispose(), the instance is destroyed.

When I call viewer.disposed = false, it can't be restored from pausing.

I want to interrupt the execution of window.requestAnimationFrame() , but also can be restored.

Can you expose the draw method?

These two methods can also be named pauseDraw and draw.

Working on this now and am almost done. Do I have commit rights on this repo?

The current owner of the repository is @to2mbn, an organization created by @Darkyoooooo and me years ago. The organization was aimed to gather Minecraft lovers in China and build things together.

But in fact it didn't go this way. I have discussed with @Darkyoooooo recently, and we are going to dissolve this organization. So we have to find a successor owner.

Currently, I feel like transfering the ownership to @bs-community. The organization is run by multiple persons. The Blessing Skin Server project, maintained by this organization, is also a major user of skinview3d. This is the reason why I choose it.

I'm leaving this issue open to collect comments about the ownership transfer. If there is no objection, I will perform the ownership transfer in July.

BTW, I'm coming back to the development this July, planning to add some wonderful features.

Seems this is a common practice among other big repositories. More so in order to support this project on cdnjs I think we will need to do this.

See the related PR to track this effort on the cdnjs side cdnjs/packages#334

Code:

import { Skin } from './Skin';

<Skin skinUrl={`${config.cdnUrl}skins/steve.png`} capeUrl={`${config.cdnUrl}cloaks/steve.png`} />

Skin.tsx:

import * as SkinViewer from 'skinview3d';
import { useEffect, FC } from 'react';

interface IProps {
    skinUrl: string;
    capeUrl: string;
}

export const Skin: FC<IProps> = ({ skinUrl, capeUrl }) => {
    useEffect(() => {
        let viewer = new SkinViewer.SkinViewer({
            domElement: document.getElementById('skin_view'),
            width: 256,
            height: 256,
            skinUrl,
            capeUrl
        });
        
        let control = SkinViewer.createOrbitControls(viewer);
        control.enableRotate = true;
        control.enableZoom = false;
        control.enablePan = false;

        viewer.animation = new SkinViewer.CompositeAnimation() as any;
        (viewer.animation as any).add(SkinViewer.WalkingAnimation);
    });

    return (
        <div id='skin_view' />
    )
}

Getting this error:

Access to image at 'https://cdn.miforix.site/skins/steve.png' from origin 'http://localhost:5000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
GET https://cdn.miforix.site/skins/steve.png net::ERR_FAILED
Failed loading https://cdn.miforix.site/skins/steve.png

@yushijinhun @g-plane

I think it's safe to drop the alpha suffix and publish 1.2.0, thoughts?

Yarn is another JavaScript package manager which is faster than npm.
I'd like to migrate to Yarn but I still want to listen to any opinion, if someone disagree.

If everyone agree, this should be done after typescript branch merged.

We could use storybook-deployer to deploy a static version to gh-pages.

https://github.com/storybookjs/storybook-deployer

At the moment, when using a large number of skinview3d instances, we will get the error: Too many active WebGL contexts. Oldest context will be lost.

Is there a way to optimize the WebGL contexts on the library side?

I am working on a project, and would like to be able to send rendered images from this to clients.

I have tried to modify it to use three-software-renderer, rather than WebGLRenderer, and I cant see to get that to work.

Do you have any example code of this project being used server-side?

Any reason for this?

this.skinImg.crossOrigin = "";

https://github.com/to2mbn/skinview3d/blob/master/src/viewer.js#L97

Hey. I want to show only the head of the skin. I made this code

const parts = viewer.playerObject.skin;
const invisible = ['body', 'leftArm', 'rightArm', 'leftLeg', 'rightLeg'];
            
for(const part of invisible) {
      parts[part].visible = false;
}

But it just hides other parts of the skin and the head does not get the entire area of the canvas.
I get this:

But i need something like this:

I would love to see this project completely written in typescript. If I have time I can start working on a typescript branch.

It would make things a lot nicer not having to depend on type definition files. Furthermore, since I'm always writing typescript now it just feels more natural.

What is everyone else's thoughts on this?

This was a question asked by @johnrippus over on gitter.

Right now we don't have a way to access body part references easily. I'm working on a branch for this so that it would be possible to get the reference to a part via a lookup method.

However, this does require some more boilerplate code to manage all the parts.

@yushijinhun @g-plane What are your thoughts on this?

Would you please tell me the steps to run this project please?
I have done "npm install" and then I run "npm run build". Some errors happen.

src/skinview3d.ts → bundles/skinview3d.bundle.js...
[!] (plugin at position 1) TypeError: code.matchAll(...) is not a function or its return value is not iterable

I need some help ;(

Hat layer overlaps cape.

https://github.com/to2mbn/skinview3d/blob/master/src/model.js#L69
I've changed renderOrder to 1, thats sloves a problem.

Also, how to remove cape in runtime?
I have trying set capeUrl to null or false, but script translates these to string and trying loads image.

Hello, do you have plans about support hd capes?

When using a skin with translucent parts on layer 2, on the model they look completely transparent

Skin: http://textures.minecraft.net/texture/f7058bfcbde8f50af98f7ca7ed02c6f72dfb4138ad9eff05bf264aa9e3ceca4f

new skinview3d.SkinViewer(el("skin_container"), {
		skin: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAilBMVEUAAACUkveZkveUkveSlfeSo/f+/fD+99n56cWn+Pr/yfH325Lw17eb8vXu07iS9Pfy0o3wzIr/sOuJ6/CO6O7oxK7qwIN93+jnuH991NyQwfKZtvhyzNaTrfaRrPWPqfNwv8n8f0lis7/3ekT1eEKtiorwcz3mZjWce4GMcnrbWSp3Y216XG5oWGSkm1OgAAAABnRSTlMAPFpzqtwj/aFFAAAEVklEQVR42q1WDXvjJgxm/gjqriHrMMdyR64LrNBzl///9/ZIAhsnTnNppzbGgHnRtyREpjSmlOgxjuOYkjinFIWIl8vzfooxRISg8+PlfsqPK0QM8PVE5/sxzs91DiJRGkdjjLkEuEkphnAMMY1GKaXMRwAyBwpAgrofYNKBIvogB2n8x5i3t7c3Y9bsxJrB/eUy2z8G1MA0LX4hJsvFL3+k6dD8i+gAEZ3gGNSY6JXWmCX8y+e/xvQ1FXYTreMjxBhCiCEGKUEmfA20hmOIIYWsohgTmoodISReD0kc8eoQAeRmIzcSgM15POaxOPqY2JEufJRvVHCSL6d/X+QJFHNUKLthEuKF/i/ChGUGpX6+vr6+/lQKik5QB5njGITg/SmgijZQiSmNyhh1+vP3E46kftIkDvmaymyTHvmRw8cU+xuen4d1Gtn+c5CQpfK21dZZa93sVKi0mHDdWW3LupQAoFa8UO+0c9b5ya299+hSeqet1Ttd1gEUKLMGQBzMAN57haLsNALo3cQBKAlrAHi4FsF5B4o4QBFmDlZFsHiLdd47hx/bccQ3KyFnp6IPCVIigMJwl4vbrSVlee+9swjgHWJQdiJDeJ/SKOVGyg0DbGoARRlIGSJMBKN31tmnv2yIyePl3jkfEzD/6CgKoAIABVDtQPJoOP3lSUdkCsPH2YjODtU9FQDLNgknSQ60nbYJzemPwblw9Fc5YNkKwEaiJhwpJuslBPrtif4m2u9rERB55gAiKROlouMYU0rFGAYihNjvh+GcA1l4kzLwuJFAAodjwCQdjlsihBiG7facA1COPEEBRNISLhkEjSEoSjLb7cN2+8AADzUA+rBjacmZSIfkWDRiyDmXot8OVzhAL8qORJHnrNaao5BHtIVLbthf0YF1k8ZZ+2jBHAMUjSOHNNarVTNWrKwt/nplclZ8juxnAf4HhHXqFwO/9/07+SBrxJVU3tHHfVcd6br+tkafhOCi1ODXfddUu+1tAKvFU/1137XVbvMrADutBdXRru36rmsXIvS3LTI7Ud+0bds2PecDXlrkg5tWaJvmt6bNl1IsPN9nxq5tmrbrOR/w2uFwBwDqoO/arsoHP74fljHgnCj5QLgcougTs9H7rqvywbfDe/ngQoR+fgrOB8/DRRgWB/xUPFSHXW4Yqrz5uJ5ElghzddY7jQVuKn8KzCPcwQLmwzmwhFAgDcg7RMDDHxChBHJO6ZqtU2om1VA4M1DP7QyZL5dDfz7PDQHVr80ZQNetcFD6BMWNgyllf6W9WQb53HDwAeDGQRVAbg/OAJoVgEnm3BS9w8Ey0S0BitASckOQ2wNRopqpv87B9MvFMLcHQuzr/uL5qg4kcyBB5XKc24P8Ec/W00LpE0rfkBsCzAbbh4ECsswP33+wH1AecMJWeQF7Te4bJg4G5qCeH76VGzknLPJCmU862Fc6yKIMz3UcYPBZK6Y+gRsH92jMI0kE663+fwoSvZEDBUlSAAAAAElFTkSuQmCC",
		width: el('width').value,
		height: el('height').value
	});

This is a feature request for a way to set a skin's modelType directly from the SkinViewer constructor inside the SkinViewerOptions object.

who is requesting this feature and why:

me (Nate Stringham) I am a contributor to SkyCrypt and realized that solving SkyCryptWebsite/SkyCrypt#455 would be much easier if skinview3d allowed a model to be passed into the constructor

the problem that this feature would solve:

currently, it seems difficult to initialize a viewer with a model. the following code doesn't work because the auto-detect feature overrides modelType as soon as the skin is loaded.

skinViewer = new skinview3d.SkinViewer({
    skin: skin_data.skinurl,
    cape: skin_data.capeurl
});
skinViewer.playerObject.skin.modelType = skin_data.model;

the following code does work but requires an extra step and it would be nice if it could be done directly in the constructor

skinViewer = new skinview3d.SkinViewer({
    cape: skin_data.capeurl
});
skinViewer.loadSkin(skin_data.skinurl, skin_data.model);

why not just use the auto-detected model:

because some users use an incorrect model with their skin intentionally and we would like to respect that desition

what would this feature look like if added:

it would look something like this:

skinViewer = new skinview3d.SkinViewer({
    skin: skin_data.skinurl,
    cape: skin_data.capeurl,
    modelType: skin_data.model
});

I'd like to create a script to update the s3 bucket code for this demo on https://skinview3d.com/

Not sure where I should run this script but it should run at least once a week to check for newer versions of the skiview3d code. If it finds a new version it will download the source and compile then upload to s3.