Configurator development suggestion

Help & Support
1

Hi all
I’m a PlayCanvas newbie but I have a good knowledge of javascript.

I have to develop a configurator accordingly in my scenario there are multiple 3d models and for everyone of it there are multiple textures. It’s gonna like this project
https://playcanvas.com/project/554111/overview/conf-bag-3

In my case the requirements are:

  1. Change the 3d Model at runtime
  2. Change the textures / material and color of the groups of 3d Model at runtime
  3. Change a 3d scene enviroment that can change when 3d model is loaded
  4. External UI component allow to change 3d Model and textures

I started my javascript project and I loaded playcanvas engine lib in tag. I’m showing a rotating cube and untill here works fine.

What type of JSON I’ve to load at runtime and how can I export it? I exported json of the bag in the example above and in the zip folder I saw this
06

What are these files for?

Could you give me general tips or suggestion to develop it?

Thanks
Claudio

2

You can download the model JSON from the editor itself. Select the JSON and click download in the inspector panel on the right.

This should download a zip with the model JSON, the materials, textures and the mapping JSON file as you have shown from the screenshot above.

This package includes the JSON for the model, JSON for the material mapping to the mesh instances in the model and all the relevant textures used for the materials used.

You can host those files (keep the directory structure) somewhere and load them at runtime as shown here: Load 3D models at run time from a PlayCanvas application

3

Hi @yaustar
Thanks for support!
I have few questions I hope in your help again

  1. For showing only 3d model without texture and material can I load only SAC_02.json? Is it possible with API AssetRegistry?

  2. What does this follow files used for?
    (I figure out to understand if these files are mandatory for show the 3d model.)

  • .mapping.json
  • JACK_CUIR_NOIR.JSON,
  • JACK_METAL_NOIR.json,
  • LOGO.json
  1. What API allow me to traverse all groups of 3d model in order to set and apply the textures for a specific group of the model?
    This because I will need to switch materials of each group of the 3d model. It could be nice to have a public method in my main javascript class that accept a list of images textures, type of materials and the name of the group that they have to be assigned
    So I will implement a loader asset (probably with AssetRegistry) and then when all assets are loaded I can create material and set them on right group.
    Does it make sense?

Thanks so much!

4

  1. Yes. assertRegistery.load will attempt to load an asset which contains a URL reference. So you would create a new asset object and then load it via the registry.

  2. Without being able to look at the project, this is going to be my rough guess as JSON files can be anything.
    .mapping.json - Contains mapping of material to meshInstance (open it in a text editor for a better look)
    JACK_CUIR_NOIR.JSON - Guessing that is a material
    JACK_METAL_NOIR.json - Guessing that is a material
    LOGO.json - Guessing that is a material

  3. I don’t believe there is one. You would have to create you own system of being able to map sets of materials to the relevant meshInstances. I’ve done something similar in the past where I created my own JSON file that maps assets to a group and then mapped each material in that group to a meshInstance name. This helped make the customisation a lot simpler as I could look at each material in a group and look for the matching meshInstance name in the model and apply it.