Load armors (solve #110 , part of #196)

[undefined303]

See README.MD for instructions.

[vercel]

@undefined303 is attempting to deploy a commit to the Hacksore's Team Team on Vercel.

A member of the Team first needs to authorize it.

[undefined303]

oh i found @Vatten has already finished the armors loading method in their private rep after i make this pr.........

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
skinview3d	Ready	Preview, Comment	Mar 5, 2026 0:38am
skinview3d-docs	Ready	Preview, Comment	Mar 5, 2026 0:38am

[Hacksore]

I'm thinking that the current implementation skinViewer.loadArmors is a bit wonky as it is ordered args and you have to respect the order.

One option is to use an object.

skinViewer.loadArmors({
  chestplate: "<texture>"
)}

then you are able to have them in any order and load multiple at once.

skinViewer.loadArmors({
  chestplate: "<texture>",
  helm: "<texture>"
)}

Also how would enchantments work in the future it we wanted a modifier to say "run some shader over it"?

PS i also can tell if it should be loadArmors or loadArmor 😂

[Hacksore]

i know @james090500 has done this in his fork so if there are any inputs from his side (no pressure though)

[james090500]

i know @james090500 has done this in his fork so if there are any inputs from his side (no pressure though)

Not in my fork sadly. The only additions I made were animated capes and ears back in the day!

[undefined303]

I'm thinking that the current implementation skinViewer.loadArmors is a bit wonky as it is ordered args and you have to respect the order.

One option is to use an object.

skinViewer.loadArmors({
  chestplate: "<texture>"
)}

then you are able to have them in any order and load multiple at once.

skinViewer.loadArmors({
  chestplate: "<texture>",
  helm: "<texture>"
)}

Also how would enchantments work in the future it we wanted a modifier to say "run some shader over it"?

PS i also can tell if it should be loadArmors or loadArmor 😂

i used to think about use object like this to load armor，and i found vatten's api just like this.But i think it is a bit troublesome.U need to input the name of armor,helmet,chestplate,leggings,boots.So i use the order to load it.And the most advantage is that u can only use 2 args to load a whole armor (1 main texture,1 leggings texture and the method will automaticly detect the type.) If 1 texture provided,this method can also load armor that all this texture can be load as armor.
for and load multiple at once. now u can also load multiple at once.

[undefined303]

I'm thinking that the current implementation skinViewer.loadArmors is a bit wonky as it is ordered args and you have to respect the order.

One option is to use an object.

skinViewer.loadArmors({
  chestplate: "<texture>"
)}

then you are able to have them in any order and load multiple at once.

skinViewer.loadArmors({
  chestplate: "<texture>",
  helm: "<texture>"
)}

Also how would enchantments work in the future it we wanted a modifier to say "run some shader over it"?

PS i also can tell if it should be loadArmors or loadArmor 😂

I can see what you're saying. Using objects can make the meaning clearer and make it easier to expand in the future. So, should we just directly change it to an object-based calling method, or keep the existing method with arguments passing and support both?
about loadArmor/Armors,since support multiple armors loading，so use armors？
and for object,i think

{
main:<texture>,
legs:<texture>
 } 

can also been used

[Hacksore]

Yeah pretty much. also thinking if we had enchantment glint animation how would that work?

skinViewer.loadArmor({
  chestplate: { texture: "<texture>", enchanted: true } // optional param and default is false?
)}

[undefined303]

Yeah pretty much. also thinking if we had enchantment glint animation how would that work?

skinViewer.loadArmor({
  chestplate: { texture: "<texture>", enchanted: true } // optional param and default is false?
)}

so，keep the previous arguments and support object or just object？

[Hacksore]

Let's only support an object as it will be easier maintain and expand going forward.

type ArmorInput = {
  helmet: RemoteImage | TextureSource;
  chestplate: RemoteImage | TextureSource;
  leggings: RemoteImage | TextureSource;
  boots: RemoteImage | TextureSource;
}

[undefined303]

Let's only support an object as it will be easier maintain and expand going forward.

type ArmorInput = {
  helmet: RemoteImage | TextureSource;
  chestplate: RemoteImage | TextureSource;
  leggings: RemoteImage | TextureSource;
  boots: RemoteImage | TextureSource;
}

OK should

{
main:RemoteImage | TextureSource,
legs:RemoteImage | TextureSource;
}

added so that can use only 2 textures to load a whole armors.

[Hacksore]

How would you load only the helm for example?

[undefined303]

How would you load only the helm for example?

i mean

type ArmorTexture = Partial<{
	helmet: TextureSource | RemoteImage | null;
	chestplate: TextureSource | RemoteImage | null;
	leggings: TextureSource | RemoteImage | null;
	boots: TextureSource | RemoteImage | null;
	main: TextureSource | RemoteImage | null;
	legs: TextureSource | RemoteImage | null;
}>;

u can set each texture of each parts of armors,and also use two textures to load a whole armor

[undefined303]

How would you load only the helm for example?

as the same,i wrote the new method to use in readme.md

[Vatten]

I thought I'd chime in since I've got an alternative solution in my fork that was made to my liking, that I definitely did not forget to open a PR for...

My solution was to have an ArmorType object that takes in paths to both the layer1 and layer2 textures, and "compiles" them into an armor type. You would then use skinview3d.loadArmor with the armor types to place them on different armor slots.
This is the example from the README:

// Initialize armor types using their layer textures (as found in resource packs)
let diamondArmor = new skinview3d.ArmorType("img/armor/diamond_layer_1.png", "img/armor/diamond_layer_2.png");
let turtleHelmet = new skinview3d.ArmorType("img/armor/turtle_layer_1.png");
// Load the armor types on armor slots (in this case, a turtle helmet with diamond armor)
skinViewer.loadArmor({
	helmet: turtleHelmet,
	chestplate: diamondArmor,
	leggings: diamondArmor,
	boots: diamondArmor
});

You would initialize these armor types once, and reuse them everywhere, essentially only loading the textures once.

Although I do think the fallback textures ("main" and "legs" of loadArmors) in this PR is pretty useful. Would probably be something like skinview3d.fallbackArmor(#ArmorType) in my version.

Figured this was worth putting out there, I'd be happy to open a PR if it helps with comparing!

[james090500]

Yeah pretty much. also thinking if we had enchantment glint animation how would that work?

skinViewer.loadArmor({
  chestplate: { texture: "<texture>", enchanted: true } // optional param and default is false?
)}

You can achieve glint with a shader. I did that in my own implementation here.

Feel free to use the shader if useful

https://github.com/MinecraftCapes/minecraft-skin-viewer/blob/main/src/enchantment.js

https://minecraft-skin-viewer.james090500.workers.dev/

[undefined303]

I thought I'd chime in since I've got an alternative solution in my fork that was made to my liking, that I definitely did not forget to open a PR for...

My solution was to have an ArmorType object that takes in paths to both the layer1 and layer2 textures, and "compiles" them into an armor type. You would then use skinview3d.loadArmor with the armor types to place them on different armor slots. This is the example from the README:

// Initialize armor types using their layer textures (as found in resource packs)
let diamondArmor = new skinview3d.ArmorType("img/armor/diamond_layer_1.png", "img/armor/diamond_layer_2.png");
let turtleHelmet = new skinview3d.ArmorType("img/armor/turtle_layer_1.png");
// Load the armor types on armor slots (in this case, a turtle helmet with diamond armor)
skinViewer.loadArmor({
	helmet: turtleHelmet,
	chestplate: diamondArmor,
	leggings: diamondArmor,
	boots: diamondArmor
});

You would initialize these armor types once, and reuse them everywhere, essentially only loading the textures once.

Although I do think the fallback textures ("main" and "legs" of loadArmors) in this PR is pretty useful. Would probably be something like skinview3d.fallbackArmor(#ArmorType) in my version.

Figured this was worth putting out there, I'd be happy to open a PR if it helps with comparing!

looks good，i can try to improve the pr.

[undefined303]

I thought I'd chime in since I've got an alternative solution in my fork that was made to my liking, that I definitely did not forget to open a PR for...

My solution was to have an ArmorType object that takes in paths to both the layer1 and layer2 textures, and "compiles" them into an armor type. You would then use skinview3d.loadArmor with the armor types to place them on different armor slots. This is the example from the README:

// Initialize armor types using their layer textures (as found in resource packs)
let diamondArmor = new skinview3d.ArmorType("img/armor/diamond_layer_1.png", "img/armor/diamond_layer_2.png");
let turtleHelmet = new skinview3d.ArmorType("img/armor/turtle_layer_1.png");
// Load the armor types on armor slots (in this case, a turtle helmet with diamond armor)
skinViewer.loadArmor({
	helmet: turtleHelmet,
	chestplate: diamondArmor,
	leggings: diamondArmor,
	boots: diamondArmor
});

You would initialize these armor types once, and reuse them everywhere, essentially only loading the textures once.

Although I do think the fallback textures ("main" and "legs" of loadArmors) in this PR is pretty useful. Would probably be something like skinview3d.fallbackArmor(#ArmorType) in my version.

Figured this was worth putting out there, I'd be happy to open a PR if it helps with comparing!

maybe u can open a pr？it's right to change skinview-utils so that many methods can be used.(I wanted to change it too, but I wasn't really sure how to run it and check the preview after editing the utils and skinview).But if you bring up PRs, you'll probably need to submit both skinview and skinview-utils at the same time.I took a look at your method and it seems like you converted the armor textures into single-file skin textures for 1.8, which is definitely more reasonable.