ability to have image previews for models

[kfarr]

ability to have image previews for models

[Algorush]

We can try to generate model images automatically. Write a function that will take images of all models. If all models are already loaded into page memory, then this should not take up many resources?? But I'm not sure if this is a good idea.
Maybe It might be better to have such a generator as a separate script, which will create images of models and place them in a separate folder. The downside here is that we will have to load all images of models onto the page from the server

[kfarr]

@Algorush we already have a script that can generate jpegs from gltf, see https://github.com/3DStreet/citybuilderjr

this task is the ability for the add entity panel to reference some sort of json like catalog.json for the image file. How we create the image file is a task for another ticket (or to be done manually)

[Algorush]

this task is the ability for the add entity panel to reference some sort of json like catalog.json for the image file.

Ok, got it.
Now there is a file cardsData.js, where img, icon, name for each mixinId can be stored. It is better to rename it to mixinsData.js, because there will be only mixins data now. Use this data in the getGroupedMixinOptions function in addLayerPanel:

3dstreet/src/editor/components/components/AddLayerPanel/AddLayerPanel.component.jsx

Lines 52 to 58 in 95b81ab

	groupedObject[categoryName].push({
	// here could be data from dataCards JSON file
	img: '',
	icon: '',
	mixinId: mixinId,
	name: mixinId,
	id: index

We can also remove the grouping logic from this function and instead divide the mixins into groups inside mixinsData.js. Like in src/assets.js.

[kfarr]

@Algorush I tried adding an image to Bicycle_1 mixin in this branch: #683 but I was not able to make it work. Can you check it out and suggest what I might be doing wrong?

[Algorush]

@Algorush I tried adding an image to Bicycle_1 mixin in this branch: #683 but I was not able to make it work. Can you check it out and suggest what I might be doing wrong?

also need to import mixinsData from cardsData.js file in AddLayerPanel.component.js and add img: mixinsData[mixinId] here:

3dstreet/src/editor/components/components/AddLayerPanel/AddLayerPanel.component.jsx

Lines 52 to 58 in 95b81ab

	groupedObject[categoryName].push({
	// here could be data from dataCards JSON file
	img: '',
	icon: '',
	mixinId: mixinId,
	name: mixinId,
	id: index

same for description. I was mention here about it: #632 (comment)

[kfarr]

@Algorush since this is not implemented yet per se, instead of using cardsData.js I'd like to use the catalog.json file. I have uploaded this in the PR here: #683

Please add support in the AddLayerPanel.component.jsx file to reference catalog.json and use the id, img, name and description fields (if existing) to match with mixins in the add layer panel to provide preview image, display name, and description.

[Algorush]

@Algorush since this is not implemented yet per se, instead of using cardsData.js I'd like to use the catalog.json file. I have uploaded this in the PR here: #683

Please add support in the AddLayerPanel.component.jsx file to reference catalog.json and use the id, img, name and description fields (if existing) to match with mixins in the add layer panel to provide preview image, display name, and description.

So far I've done it with what I have. But I think that for better performance, it is better to store mixins divided into groups in catalog.json. And if later use the code from citybuilderjr, then adapt it a little for groups.
Since there are quite a lot of calculations in the addLayerPanel component