Visualize features with realistic WebStyleSymbols

var renderer = {
  type: "simple", // autocasts as new SimpleRenderer()
  symbol: {
    type: "web-style", // autocasts as new WebStyleSymbol()
    name: "Light_On_Post_-_Light_on",
    portal: {
      url: "https://www.arcgis.com"
    },
    styleName: "EsriRealisticStreetSceneStyle"
  }
};

webStyleSymbol.fetchSymbol().then(function(pointSymbol3D) {
  // clone the retrieved symbol, as properties on it are immutable
  var newSymbol = pointSymbol3D.clone();
  // the first symbolLayer contains the properties that can be modified
  var symbolLayer = newSymbol.symbolLayers.getItemAt(0);
  // change for example the height of the object
  symbolLayer.height *= scale;
  // do something with newSymbol, like setting it on a layer renderer
  var newRenderer = layer.renderer.clone();
  newRenderer.symbol = newSymbol;
  layer.renderer = newRenderer;
});

var streetFurnitureRenderer = {
  type: "unique-value", // autocasts as new UniqueValueRenderer()
  field: "CATEGORY",
  uniqueValueInfos: [
    {
      value: "Overhanging street",
      symbol: {
        type: "web-style", // autocasts as new WebStyleSymbol()
        name: "Overhanging_Street_-_Light_on",
        styleName: "EsriRealisticStreetSceneStyle"
      }
    },
    {
      value: "Trash bin",
      symbol: {
        type: "web-style", // autocasts as new WebStyleSymbol()
        name: "Trash_bin_1",
        styleName: "EsriRealisticStreetSceneStyle"
      }
    },
    {
      value: "Park bench 1",
      symbol: {
        type: "web-style", // autocasts as new WebStyleSymbol()
        name: "Park_bench_1",
        styleName: "EsriRealisticStreetSceneStyle"
      }
    }
  ],
  visualVariables: [
    {
      type: "rotation",
      field: "ROTATION"
    },
    {
      type: "size",
      field: "SIZE",
      axis: "height"
    }
  ]
};