xravatar

Avatar Creation/Sharing Site

This will be 100% client side only.

Deliverables

• Avatar editor which for the user to build an xravatar
• API to expose the xravatar in a JSON or Binary format via postmessage through an iframe
• Pack of assets in glb format
• Sprite Sheet + JSON for image assets
• 3rd party library for turning the xravatar string into a THREEjs model (other implementations to come later)

gltf format

• The editor is designed using the custom properties on the GLTF model's extras property
• You can set these using the Custom Properties in Blender.

Custom Property	What it Controls	Default Value
xravatar_index	Order of the items in the interface	0
xravatar_minCount	Minimum number of children allowed	0
xravatar_maxCount	Max number of children allowed	1
xravatar_canMove	Whether an object can be moved	0.0
xravatar_minR	Minimum Radius an object can be placed	0
xravatar_maxR	Maximum Radius an object can be placed	0.7
xravatar_minScale	Minimum Scale an object can be scaled	0
xravatar_maxScale	Maximum Scale an object can be scaled	0.7
xravatar_canMirror	Whether an object can be mirrored.	0
xravatar_defaultMirror	Whether an object defaults to being mirrored	1

Notes

• When exporting a new GLTF remember to check 'Custom Properties' in the exporter.
• If you add new npm dependencies for the client side project add them to the repo using

git add -f node_modules/path/to/file.js 

This is because node_modules is under gitignore and we only want to include the files which we are using on the client

Attributions

Part of the dummy 3D model is from https://poly.google.com/view/549TcOnfEOC by Wuttidech Tarbsuntea