How To Add Textures

To add textures to a model, we will use the following pictures to create textures of wood, brick and fabric. In DynaMaker, textures generate a tiled pattern to ensure the surface is covered completely.

To create a feeling of 3D, you can add a normal map, an image that stores a direction at each pixel, faking high-resolution details on low-resolution models. The normal map pictures for the previous examples are:

You can download these examples here. Once we have the pictures, we need to upload them to the project. For this:

• Go to the app dashboard of your app
• Upload all files and give proper names:

• Under Images, create a texture for each material:

Great! Let's add the textures to our model. For that:

• Go to the component you want to add the texture to
• Make sure ASSETS is imported (it will show up in the list as soon as you have uploaded a file)
• Go to the function where the model is added to the geometry (typically in generateGeometry() in COMPONENT)
• Add the texture to the material and adjust its scale with textureHeight and/or textureWidth:

const materials = [new SKYCAD.Material({ textureId: ASSETS.TEXTURES.WOOD, textureHeight: 100 })]

geometryGroup.addGeometry(model, { materials })

Perfect! You should be able to see a result similar to the following one that uses the template.

---

Now let's use the rest of the textures in different sides of the cube. For that:

• Go back to your component model and its material
• keep adding more materials to different surfaces, use arguments:
  • surfaceGroup: SKYCAD.SURFACE_GROUP to specify the surface according to the CAD features used.
  • or surfaceIndexList: number[] to specify a list of individual surfaces (e.g. up to 6 for this cube)

const materials = [
  new SKYCAD.Material({
    textureId: ASSETS.TEXTURES.WOOD,
    textureHeight: 100,
    surfaceGroup: SKYCAD.SURFACE_GROUP.BASE,
  }),
  new SKYCAD.Material({
    textureId: ASSETS.TEXTURES.BRICK,
    textureHeight: 75,
    surfaceGroup: SKYCAD.SURFACE_GROUP.SIDE,
  }),
  new SKYCAD.Material({
    textureId: ASSETS.TEXTURES.FABRIC,
    textureHeight: 300,
    surfaceGroup: SKYCAD.SURFACE_GROUP.TOP,
  }),
]

Here the cube is extruded at an angle so that the base is visible.

Remember that you can still change the color, opacity and other material properties of your model even with an applied texture. Also, it's important to keep the size of the picture files as low as possible so that the performance of the app is not affected negatively.