bs-community / skinview3d Goto Github PK
View Code? Open in Web Editor NEWThree.js powered Minecraft skin viewer.
Home Page: https://bs-community.github.io/skinview3d
License: MIT License
Three.js powered Minecraft skin viewer.
Home Page: https://bs-community.github.io/skinview3d
License: MIT License
how to change the pose of the hands and head?
Use tslint to check typescript definitions (in types/
).
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?
0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 silly lifecycle [email protected]~prebuild: no script for prebuild, continuing
7 info lifecycle [email protected]~build: [email protected]
8 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~build: PATH: /usr/share/npm/bin/node-gyp-bin:/mnt/i/GitHub/GAMAI_SERVER/skinview3d/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/snap/bin
10 verbose lifecycle [email protected]~build: CWD: /mnt/i/GitHub/GAMAI_SERVER/skinview3d
11 silly lifecycle [email protected]~build: Args: [ '-c', 'npm run build:modules && npm run build:bundles' ]
12 silly lifecycle [email protected]~build: Returned: code: 1 signal: null
13 info lifecycle [email protected]~build: Failed to exec build script
14 verbose stack Error: [email protected] build: `npm run build:modules && npm run build:bundles`
14 verbose stack Exit status 1
14 verbose stack at EventEmitter.<anonymous> (/usr/share/npm/lib/utils/lifecycle.js:232:16)
14 verbose stack at emitTwo (events.js:126:13)
14 verbose stack at EventEmitter.emit (events.js:214:7)
14 verbose stack at ChildProcess.<anonymous> (/usr/share/npm/lib/utils/spawn.js:24:14)
14 verbose stack at emitTwo (events.js:126:13)
14 verbose stack at ChildProcess.emit (events.js:214:7)
14 verbose stack at maybeClose (internal/child_process.js:925:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
15 verbose pkgid [email protected]
16 verbose cwd /mnt/i/GitHub/GAMAI_SERVER/skinview3d
17 error Linux 4.4.0-19041-Microsoft
18 error argv "/usr/bin/node" "/usr/bin/npm" "run" "build"
19 error node v8.10.0
20 error npm v3.5.2
21 error code ELIFECYCLE
22 error [email protected] build: `npm run build:modules && npm run build:bundles`
22 error Exit status 1
23 error Failed at the [email protected] build script 'npm run build:modules && npm run build:bundles'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the skinview3d package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error npm run build:modules && npm run build:bundles
23 error You can get information on how to open an issue for this project with:
23 error npm bugs skinview3d
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls skinview3d
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]
the canvas has tabindex="0"
but why? it's not keyboard accessible by default
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?
Working on this now and am almost done. Do I have commit rights on this repo?
We could use storybook-deployer
to deploy a static version to gh-pages.
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
Currently models are very sharp, is it possible to add some kind of AA or SSAA?
Is it possible to flip the character and controls? I'm trying to flip the character and controls for dinnerbone.
I think it's safe to drop the alpha suffix and publish 1.2.0
, thoughts?
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:
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'
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
.
This is a feature request for a way to set a skin's modelType directly from the SkinViewer constructor inside the SkinViewerOptions object.
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
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);
because some users use an incorrect model with their skin intentionally and we would like to respect that desition
it would look something like this:
skinViewer = new skinview3d.SkinViewer({
skin: skin_data.skinurl,
cape: skin_data.capeurl,
modelType: skin_data.model
});
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``
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,
});
},[])
...
Hello, do you have plans about support hd capes?
Since @g-plane removed Travis and added the GitHub pipeline we need to update readme to include the new badge.
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.
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.
Lines 58 to 64 in b3858b5
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.
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
the title ^
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 :(
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?
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...
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.
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:
Browsers that i tested and it's not working:
Error:
SCRIPT5009: SCRIPT5009: 'ImageBitmap' is not defined
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.
As in #20 (comment)
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)
Any reason for this?
this.skinImg.crossOrigin = "";
https://github.com/to2mbn/skinview3d/blob/master/src/viewer.js#L97
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.
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! 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.
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.
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 ;(
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.
When using a skin with translucent parts on layer 2, on the model they look completely transparent
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
});
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.