Wearables system for AltspaceVR
This app provides a main app that outfits users with fashion accessories, and a menu app that allows users to choose their accessories. It is designed for maximum reuse, so the addition of new items, or even whole new categories, should be relatively simple. To add a new item, you will need three things: an OBJ model of the accessory in meter scale, a PNG or JPG texture to go with the model, and a thumbnail image of the resulting accessory (optional). Models or textures can and should be reused between accessories.
Adding items to an existing group
- Add a list item
<li>to the desired group's list in
menu.html. Groups are defined by an
<ol>element with a
- Add a
data-wearableattribute to your new item with the names of the model and texture needed for your item, separated by a slash character. So if you wanted to use the "sword" model and the "valyrian" texture, you might add
- Add a label/description inside your list item. Typically this would be a thumbnail image, but text can be used as a placeholder.
index.html, add the references to your new model and/or texture to
<a-assets>. Assign them the class corresponding to their type (
texture), and another class corresponding to the asset's name used in step 2. Example:
<a-asset-item class='model sword-2h' src='models/sword.obj'></a-asset-item>or
<img class='texture valyrian' src='textures/valyrian.png'/>
That's it! Clicking on the new item in the menu should bring up your new model/texture combo on your avatar.
Adding a new group
- Add a new unordered list to
menu.html. Give it the class
data-wearable-groupattribute with the value being the group name.
- Add new items to the group as described above.
index.html, create a new mixin for items in this new group. You should copy/paste the "tie" mixin, and edit it to your needs. You'll probably want to change the
n-skeleton-parentcomponent to attach to a different body part, and the
wearablecomponent to use the new group.
- Add a new entity to the bottom of the scene with a
mixinargument references the mixin you created above.
- (Optional) Add per-avatar position customizations to the object at the bottom of
wearable-aframe.js, in a new object named for your new group.