Adding models to your inventory

Adding models

The original project uses JSON format to be loaded as a furniture item to the scene. The problem was that this format kept changing and over few releases later the JSON loader in the code of the original project started throwing errors with the newly exported JSON models from Blender. In the current version I am focusing on using the GLTF format as it is more or less becoming the standard of mesh format for web. One can argue that obj format is cool and has been there for a long time in the industry. But the problem is that the obj format lacks a way to express deep material properties or animations. Hence the industry one day decided to sit, drink a drink of their choice and came up with a format that expresses the required properties. Thus GLTF was born. It can explain the nuances of a material like the obj and express the most dramatic animations like the collada.

Before you start exporting

The blueprint-js project has some constants that classify a mesh as the type of furniture. Certain furnitures move along the wall, others move along the floor, and some along both wall and floor. Given below is a list of numbers that map to a type of furniture

• 1: FloorItem
• 2: WallItem
• 3: InWallItem
• 7: InWallFloorItem
• 8: OnFloorItem
• 9: WallFloorItem

The first thing you have to focus is exporting the model or mesh to gltf format. To do this I recommend Blender and a gltf exporter. They have there required add-on to export a model from Blender as gltf. However from my experience I found that the Blender Internal render materials does not require any node. So export your mesh as it is. Otherwise if you are planning to use Blender cycles materials then use their nodes. Check out their documentation for more details.

Creating items.js

When I first started using the items.js from the original project it was cumbersome to generate if had a lot of items. So I have a short python script that will do this for you. If you navigate inside models folder you will find a file gltf_inventory.py. There are some variables inside that are folder paths in which meshes can be found. The whole idea is to have a folder with sub-folders named based on the item type numbers. An example can be seen inside models/gltf/.

Remember that all the path variables in the python script (gltf_inentory.py) are in relative path. So you should execute the python script from where_repository_cloned/models/. To run the script use python gltf_inventory.py. This will do the following,

• Find gltf and it's thumbnail
• Create the items JSON object
• Copy the GLTF and thumbnails to the build folder: build/models/gltf and build/models/thumbnails_new
• Copy items_gltf.js to build/js/items_gltf.js

You have to ensure that the thumbnails are 300x225 in size. Also there is a function inside the python script that can do this for you. It will scale the images proportionally to 300x225.

Lastly, add the generated items.js to the index.html

<script src="js/items_gltf.js"></script>

This is it for now. Soon I will post a screenshot of the GLTF export options to be used in Blender.

Regards,

#0K