How to add new models to the project ?

[CanKavaloglu]

Hi, Congrats on your outstanding work, it really is amazing. However, I could not figure out how to add more models to the project. I know that the models are stored in the file system and read through the items.js file. Now, I would like to add some other blender 3d objects such as: https://free3d.com/3d-model/toilet-lavatory-loo-38457.html

As you can see the model includes ".obj" extension which I intend to use, in this case should I convert this object file to json file ? If yes, how ? I have seen some python scripts but I do not know how to use them. If no, which instructions should I follow for the algorithm to handle the .obj files.

Cheers.

[aalavandhaann]

Thanks you for the compliments. Regarding the loading of models you should use gltf files. Anyways as we are speaking there is a wiki page in progress to show how to use the model loading feature. It will be there in a few hours. Will keep you posted.

Regards,

0K

[CanKavaloglu]

Thanks for the quick reply, I will be waiting for the wiki link.

Cheers.

[aalavandhaann]

Hi,

Here is the [link] (https://github.com/aalavandhaann/blueprint-js/wiki/Adding-models-to-your-inventory) to the wiki. If you still have questions I will be glad to answer.

Regards,

0K

[CanKavaloglu]

@aalavandhaann I have just checked the wiki and the instructions. The idea of having sub-folders is great ! However, I tried to add more models but had no luck. What I have done was to add more .glb files in the "models/gltf/0" folder and also a corresponding thumbnail in "models/thumbnails" folder. Finally, run the python script but it is giving me the error below:

Traceback (most recent call last): File "gltf_inventory.py", line 152, in createItemsJSON(gltf_mesh_files, thumbail_files); File "gltf_inventory.py", line 77, in createItemsJSON thumbnail_path = thumbnail_map['filepath']; TypeError: 'NoneType' object is not subscriptable

P.S.: I am trying to add some of the objects from here : https://github.com/KhronosGroup/glTF-Sample-Models

For example, if you check this link: https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/Corset

I tried all the extensions of the Corset object but had no luck. Could you give me a hand to do it properly ?

Thank you very much.

[aalavandhaann]

Firstly, there were couple of mistakes in the gltf_inventory.py. This is fixed now and has been committed, so kindly update the script. Next ensure that the thumbnail matches the name of the GLTF. Check it and let me know if you still have problems.

Regards,

0K

[CanKavaloglu]

Thank you for the fix, now the script works. However, now I have two different questions.

1) It is giving me error that it is looking for the .bin file such that:

GET http://localhost.../...//models/gltf/Box0.bin 404 (Not Found) Uncaught (in promise) Error: THREE.GLTFLoader: Failed to load buffer "Box0.bin". It works when I also put the .bin file into the build/mdoels/gltf/ folder. Is there any straightforward way to do it because I did not see any .bin files for the models that you already have in that folder.

2) I also applied the script to models/objs folder and it does the converting. Then, I include the items_objs.js in the html file. However, when I click on the item to add to the scene, it gives me the error below related with parsing:

SyntaxError: Unexpected token # in JSON at position 0 at JSON.parse (<anonymous>)

So isn't there any way to use .obj files too ?

Thank you for the help in advance.

[aalavandhaann]

Dear Calvin,

Yes, I don't have the .bin files for my examples. Maybe the python should do that too. But you can embed the buffers when exporting to gltf. I have added a screenshot to the wiki that shows the Blender settings for GLTF export.

There straightforward way to do this will be edit the items.js manually and add your entry. If you are going to add only few items (<5) this approach is fine. But when you have a ton of items is better to use the python script.

Regarding the obj files, yes I am planning to include and other formats as well. It's only a matter of time.

Regards,

0K

[aalavandhaann]

Hi Calvin,

Did you try the latest script and the Blender options to export GLTF as show in the wiki? If you still have problems kindly let me know otherwise we can close this issue.

Regards,

0K

[CanKavaloglu]

Hi,

Yes I tried to export models in gltf format in Blender and then just directly adding the gltf object and a thumbnail and lastly add the model in items_gltf.js suffice. I did not even use the python script and without it the gltf format also works. For this end, I am not sure if there is a need for the script to be used ?

P.S: Most of the models that I found so far are without textures, therefore when I import the models into Blender, they are without textures, so as the output (gltf). In this case, is there any public dataset that you know they are with textures ? Or is there any way in the code like TextutreLoader so that I can apply some texture (maybe different than original) to the object back in JS part ?

Cheers !

[aalavandhaann]

Hi Calvin,

Yes you are right. It's not necessary to use the script if you have fewer items. The script is useful only if you want to create an inventory list filled with lot of items.

For GLTF models with textures? I am not really optimistic about finding them online. GLTF is relatively a new player in the field. Hence it's necessary to convert existing ones and export then to GLTF. Soon I am planning to write a Blender plugin that will automatically replace the materials with textures of the model to the PBR nodes provided by Kronos group and then export them.

This is necessary as I am focusing on writing a server layer using DJango to deliver a SAAS app for blueprint-js. Will keep everyone posted on it. Meanwhile if you find any good models online with good textures (can be any format) let me know. I can help you with exporting it to GLTF.

Regards,

0K

[CanKavaloglu]

I see, I will be following the updates. I will also inform you on the model datasets that I come across with.

Cheers!

[sylvaincordiere]

This is necessary as I am focusing on writing a server layer using DJango to deliver a SAAS app for blueprint-js.

Hi Srinivasan Ramachandran For your saas app don't you think that node for the backend would be more efficient ? and would you keep blueprint with pure javascript or would you use a framework like react. Actually I don't know if in this case react is more efficient than pure javascript since you're using three.js and I think it render 60 frame per second so it make the react virtual dom useless. What do you think about that ? Would node and react bring better perfomance in your saas app ?

[aalavandhaann]

Hi Silvain,

Thanks for the input. ROFLOL, the reason I didn't think about using node or react but using DJango is for one simple reason. I am not experienced in either node or react. But having a background in Python helps me start with DJango or flask. Maybe you are right about node or react. I will give it a look into it soon.

But my sincere thanks to you for having thrown your useful viewpoints. Kindly let me know if you have any more inputs. I would be glad to do something collaborative.

Regards,

0K

[sylvaincordiere]

In blueprint js there is a delete wall but I haven't seen any undo or redo action which could be useful in a saas app. This would be easier to manage with redux . A state manager like redux would make this saas app easier to manage in the long term. I think a MERN stack (consists of MongoDB, Express, React / Redux, and Node.js) would be a good option But since I have a very limited experience with flask or django maybe I underestimated them

[aalavandhaann]

Sylvian,

Thanks for the whole insight about undo/redo using redux. In some part of my mind this was something I wanted to implement for a long time now. One idea that came from the top of my mind was to utilize the JSON file format of the layout to implement history functionality. But this was the last resort if I cannot implement a proper way to undo/redo. Redux looks promising as far as I read it.

Regarding the MERN stack perspective I don't have prior experience or exposure. As for myself I am quite an old school type stack developer using JavaScript, Php, Apache. Having come from this vintage background (lol) I always wondered about the efficiency of the while loop listening to http request offered by python or node. But now I see that these frameworks have come a long way in offering a robust solution.

BTW you speak of interesting things, what is your background? And how did you stumble upon this repository?

Regards,

0K

[sylvaincordiere]

I work as a developer mainly with Java, Java EE, Spring and Hibernate but I have some interest about webgl and I found babylon.js and three.js I try to find some use case exemple about three.js or babylon.js and I found blueprint3d and in its issue section I found your link