aframearchilogic3d.io

Archilogic material preset choices in 3d.io viewer


I would like to create a web app that lets the user choose between different presets for floors and walls in an archilogic 3D scene.

https://spaces.archilogic.com/model/template/new?modelResourceId=f67ffde0-278e-11e4-9f8c-7dda0d61ae4a&mode=edit&view-menu=camera-bookmarks&main-menu=interior&logo=false

Just like in this editor, however, I need the materials menu to be simpler (user chooses from different preset textures which were uploaded earlier by the admin with the corresponding diffuse, spec, normal, and alpha maps).

I was browsing through all the repos of archilogic but couldn't find the source code of the 3D editor in order to make it simpler.

Does anyone know if it's available, if not, which direction should I be headed in order to develop such an app?


Solution

  • This is a feature that still is on the roadmap and not done yet, but there are ways to accomplish something similar.

    So above all, the following description is due to all this not being ready and polished yet. It's an experimental way of getting to your goal.

    Let's break this down.

    Predefined materials

    Archilogic has a long list of pre-defined materials right now that you can pick from. They're agnostic to the type of architectural element, so you can use any material on any element. Here is the list of available materials.

    Floor & ceiling

    Floors and ceilings are contained in a single element with an io3d-floor component.

    So assuming you've got your floor and ceiling in the elem element, you can do the following to select a pre-defined material:

    elem.components['io3d-floor'].data.material_top = 'wood_parquet_oak';
    elem.components['io3d-floor'].update()
    

    this will change the floor material to the given pre-defined material, in this case "wood_parquet_oak". For the ceiling material, change material_top to material_ceiling.

    Walls

    Walls work pretty much the same, but the properties are material_front and material_back instead of material_top and material_ceiling.

    Other architectural elements

    For other elements, you can probably work it out by looking what is available as properties in .data of the associated component (e.g. io3d-wall for walls).

    Custom materials

    This is a little harder to get right as there's a bunch of properties involved in making a custom material.

    Assuming you have uploaded textures somewhere, you'd define the material like this:

    elem.components['io3d-floor'].data.material_top = {
      mapDiffuse: "https://example.org/texture.hi-res.gz.dds",
      mapDiffusePreview: "https://example.org/texture.lo-res.jpg", 
      mapDiffuseSource: "https://example.org/texture.source.jpg"
    }
    

    You can also give it additional parameters, such as size: [3,3] scaling the texture to cover 3x3 meters in the model before repeating itself or passing normal maps or specular maps, but I exclude these for brevity.

    Note: You can use this kind of material definition for anything that also accepts the pre-defined materials mentioned above. It's important to follow the naming convention and you need to have a gzipped DDS texture available as well as JPEG versions.

    The 'Source' image is optional, but the other two have to be present or it won't work.

    Summing it up: This functionality isn't fully ready yet (as you can tell by the quite contrived way of getting this to work) but this workaround will do until a better way is going to be available.