How To Add Textures

In order to add textures to a model we will use the following pictures to create textures of wood, grass and marble. In DynaMaker, textures generate a tiled picture to ensure the surface is covered completely.

Texture examples

To create a feeling of 3D, you can add the actual normal map (image that stores a direction or normal at each pixel, faking high-resolution details on low-resolution models). For this you can use any open source normal map generator available online. The normal map pictures for the previous examples are:

Texture normal map

Once we have the pictures, we need to upload them to the project. For this:

Texture files

  • create a texture for each material:

Texture files

Since the veining in the marble is not properly handled in this normal map, you will notice some relief in the texture, so you can add the same picture marble as normal map for now to get the default smooth surface. But you can try the result of having the generated normal map to see its effect.

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

  • go to the component you want to add the texture to
  • make sure ASSESTS 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 COMP/Component)
  • add the texture to the material.
  const materials = [
    new SKYCAD.Material({
      textureId: ASSETS.TEXTURES.WOOD_TEXTURE,
      textureHeight: 100, // specific height for the original picture use in the texture
      textureWidth: 100, // specific width for the original picture use in the texture
    })
  ]

  geometryGroup.addGeometry(model, { materials })

If you tile a picture properly (without visible repetitive patterns) you won't need to give a textureHeight or textureWidth to avoid the discontinuity.

One last step. You need to load the textures in your application or you won't be able to see them in your components. For this:

  • go to your app
  • make sure ASSESTS is imported
  • go to ADVANCED/Controller
  • make sure you include textures in productConfigurationFactory() :
export function productConfigurationFactory(): STUDIO.IProductConfiguration {
  return {
    showEdges: true,
    worldSize: { x: 1000, y: 1000, z: 300 },
    generator: PRODUCT.ProductGenerator,
    sceneSelection: WORLD.SCENES.CLEAN,
    sceneArguments: {
      enableShadows: true,
    },
    textures: ASSETS.TEXTURE_REFERENCES
  }
}

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

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

  • go back to your component model
  • go to where the model is added to the geometry (usually in generateGeometry()COMP/Component)
  • keep adding more materials to different surfaces, use arguments:
    • surfaceGroup: SKYCAD.SURFACE_GROUP
    • or surfaceIndexList: number[]
  const materials = [
    new SKYCAD.Material({
      textureId: ASSETS.TEXTURES.WOOD_TEXTURE,
      textureHeight: 100,
      textureWidth: 100,
      surfaceGroup: SKYCAD.SURFACE_GROUP.BASE
    }),
    new SKYCAD.Material({
      textureId: ASSETS.TEXTURES.MARBLE_TEXTURE,
      textureHeight: 100,
      textureWidth: 100,
      surfaceGroup: SKYCAD.SURFACE_GROUP.SIDE
    }),
    new SKYCAD.Material({
      textureId: ASSETS.TEXTURES.WOOD_TEXTURE,
      textureHeight: 100,
      textureWidth: 100,
      surfaceGroup: SKYCAD.SURFACE_GROUP.TOP,
    })
  ]

Here the cube is extruded with an angle so that the base is visible. Also notice that the texture marble should be rotated with the same angle to follow the model properly (try larger values for parameter Height ).

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.

← Save & LoadIntroduction →