Coloring options for textured buildings

This sample shows the most common use cases of coloring textured buildings and other 3D objects in a SceneLayer. In urban planning it's important to emphasize certain buildings. We can achieve that now by keeping the textures on the important buildings and removing it on the less important ones. We still want to keep all the buildings for context, but texture will only be applied to the buildings of interest.

Desaturating textures can be used in the same purpose. We only care about texture colors for certain buildings of interest.

Several options are available when changing colors on textured buildings. These options can be set through the colorMixMode property of the FillSymbol3DLayer.material.

For example if the building has this initial texture:

colorMixMode-texture

Using tint will set the new color on the desaturated texture:

colorMixMode-tint
1
2
3
4
5
6
7
8
9
10
11
12
const symbol = {
  type: "mesh-3d", // autocasts as new MeshSymbol3D()
  symbolLayers: [
    {
      type: "fill", // autocasts as new FillSymbol3DLayer()
      material: {
        color: "blue",
        colorMixMode: "tint"
      }
    }
  ]
};

replace will replace the texture with the new color:

colorMixMode-replace

multiply will multiply the initial texture color with the new color. When the buildings have a colorful texture, the final color will be quite dark. In our example, the roof of the building has a red tone and the resulting color will be dark after the multiplication with blue:

colorMixMode-multiply
Image preview of related sample Visualize features by type

Visualize features by type

Visualize features by type

Image preview of related sample Unique value groups with headings

Unique value groups with headings

This sample demonstrates how to categorize unique values into groups with headings.

Image preview of related sample Generate data-driven visualization of unique values

Generate data-driven visualization of unique values

Generate data-driven visualization of unique values

UniqueValueRenderer

Read the Core API Reference for more information.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close