# Image only on the top side of poligon

**URL:** <https://community.cesium.com/t/image-only-on-the-top-side-of-poligon/14863>\
**Category:** CesiumJS\
**Created:** [August 16, 2021, 5:29pm UTC](https://community.cesium.com/t/image-only-on-the-top-side-of-poligon/14863 "2021-08-16T17:29:17Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![11179](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/11179/32/5934_2.png) [@11179](https://community.cesium.com/u/11179)\
**Post date:** [August 16, 2021, 5:29pm UTC](https://community.cesium.com/t/image-only-on-the-top-side-of-poligon/14863/1 "2021-08-16T17:29:17Z")

</div>

Hello. Help my please. I only need to paint image on the top side of the polygon. How to remove lines that slide down the walls?  
[screenshot](https://i.imgur.com/0w0EIgx.png)

> **[Cesium Sandcastle](https://sandcastle.cesium.com/#c=bVJNb5tAEP0rI1+CJWeBNl+ixKrqHNqqUSM36onLBsaw6rKLZgcnjpX/3gWMS9Lsad/Me/O9lQRbhY9IcA0GH2GFTrW1+N3bgmyW93hlDUtlkLLZAvagzMZ+sU8JbKR2CC/zT5kZogg0rFihE7Iogn1mAAhzlqbUmECPAXJrqVBGMrpkTLgeWWJDtr7BkhBdMPABTuM4EtFihB+vJuA0ji4n8MwTh//8YKtQlRUncBl170jFJ6a2wOLrwR1Hr/1kWbKy5ljireRKsF3LQknjgrPzMUHtOyEldTKd4Ldalnh78NyRbZB4F+zHMgFUR0jgpGJuXBKGSqi6bEnktg55/f3iZnMnGlOeLP5JpG4qmUAkzidGwgYlv8q9kuRn66v8EPRzgwsRzSeS3GpLx75WHerHvpamsHWwHxPFIvLL9cIwHKVMvvdGkt9zAv1EaBDNU1/WkMJLoPu9eGV/G8freLa2vrfBm1vpKLPFLHW807gcy/ys6sYSQ0s6ECJkrBvdnUz40OZ/kEXuemFHTcOpNC3UFlRx/c7xQq6lc96zabX+pZ4xmy3T0PP/k2rr12zKn1skLXcdrYqXPwajECINPXxfydbqB0lvIv8F)**
>
> The Cesium Sandcastle provides an interactive environment for testing Cesium code.

---

<div class="post-metadata">

**Author:** ![sam.rothstein](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sam.rothstein/32/6584_2.png) [@sam.rothstein](https://community.cesium.com/u/sam.rothstein)\
**Post date:** [August 17, 2021, 5:18pm UTC](https://community.cesium.com/t/image-only-on-the-top-side-of-poligon/14863/2 "2021-08-17T17:18:11Z")

</div>

@11179

Welcome to the community! Thank you for sharing such a cool demo 😀

 ![image](https://global.discourse-cdn.com/cesium/original/2X/0/00f717c758c36d4e762f7ca3afe848d6366ab80a.jpeg)

I would recommend using two rectangular cuboids. The top rectangular cuboid should show the image and the bottom one should display a blank box. Here is a screenshot of what I have in mind.

 ![image](https://global.discourse-cdn.com/cesium/original/2X/6/6ba3cbd28d214d1ba52f3b96c64f83c4888379fe.jpeg)

As we can see, the green box is blank. The orange box with the design is sitting just above the green box. Here is a sandcastle demo that should help get you started.

> **[Cesium Sandcastle](https://sandcastle.cesium.com/#c=1VTBbtswDP0VIpc6QCrbW9IWXhoMSw/bsGJFVuzki2oztjBZNCQ6bRr03yc7ceZ2BXYbNp34yPdEig/QRlrYKLxHC5dg8B6W6FRTie9dLkhHWYeXZFgqgzYdTWAHyqzpAz0ksJbaITyN36Vmf4tAw4oVOiHzPNilBsBixtIUGhPoMEBGZHNlJKNL+oarniXWlqorLCyiC/Z8gNM4jkQ06eHbiwE4jaPzAZx64j4eH3IlqqLkBOKoPdMjFx/YNjnmH5/VZ8e6JZasyBxnvJZcCqaVzJU0LpjO+g6Vf4pVUifDFX6qZIHXh8qNpRotb4NdPyeAagkJnJTMtUvCUAlVFY0VGVUhrz6fXa1vRG2Kk8kvidR1KROIxGyQtFij5Ge9l9L65fop3wTd4uBMROOBJCNN9viuZYu6va+kyakKdn2jWETe3YPQB9BGTx53lv8Ppp93pv7B8+ivef6PGvhIVN1S8MLOljKajOaOtxoXffP3qqrJMjRWB0KEjFWtW1fDuyb7gSwy1wlb6jwcSue52oDKL1/5VCDT0jlfWTdaf1OPmI4W89Dzf5Nq8k6Y4usGrZbbllbGiy/7pBBiHnr4upKJ9J20L27+CQ)**
>
> The Cesium Sandcastle provides an interactive environment for testing Cesium code.

Let me know what you think!

-Sam

---

<div class="post-metadata">

**Author:** ![11179](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/11179/32/5934_2.png) [@11179](https://community.cesium.com/u/11179)\
**Post date:** [August 24, 2021, 12:39pm UTC](https://community.cesium.com/t/image-only-on-the-top-side-of-poligon/14863/3 "2021-08-24T12:39:31Z")

</div>

Thanks… I didn’t want to split the object in two. ☹  
There is definitely no other way? I thought there was some hidden option that prevents painting the walls of the cube.

Another problem: when changing the 2d / 3d mode, the color changes a lot. How to fix it?

 ![image](https://global.discourse-cdn.com/cesium/original/2X/2/24faacb5c3eb481b77e46272152083cf043df58f.jpeg)

> **[Cesium Sandcastle](https://sandcastle.cesium.com/#c=1VRRa9swEP4rR17qlFSyt6QdXhrG0sFWUlqysjHIi2pfbDFZZyQ5bRr63yc7cZq0gT0UBvOTvrvv7pPuO7wQBhYS79HAOWi8hzFaWRXsRxMLZp2kwWPSTkiNZtbpwQqkntNneohhLpRFeOp+nOl1F4baSSfRMpGmwWqmAQwmTuhMYQwNBkiITCq1cGjjVnDastjcUHGBmUG0wZoPcBJFIQt7LXz/YQecROHZDux74vrc3cRylFnuYojC+utvufjgTJVi+nUvP9jmDTnhJOntHa+Ey5mjqUil0DboD1qFwj/FSKHi3RF+K0SGV5vMjaESjVsGq/aeALImxHCUO1famHPJZJFVhiVUcDe9PL2Y37BSZ0dehPO2SKgyFzGEbNB77mSwROH21MfC+PH6e74LmtHBKQu7e50SUmS2bxvXqJn9VOiUimDVSkUs9A7vqB0q/PVlMrn+uSF5NtSnJ4+b3eDH/8N+nDX+/2U9wn+2Hm91+k0+v7LwmG8tfCQqbil4YWhN6vQ6Q+uWCket/CdZlGQcVEYFjHGHRalqX/ldlfxGxxLbFNbUId8tHaZyATI9P/AHgkQJa31mXin1XT7irDMacs9/VarIe6Gz6wUaJZY1LY9Gk3WQMTbkHh6udETqTpgXnf8A)**
>
> The Cesium Sandcastle provides an interactive environment for testing Cesium code.

---

<div class="post-metadata">

**Author:** ![sam.rothstein](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sam.rothstein/32/6584_2.png) [@sam.rothstein](https://community.cesium.com/u/sam.rothstein)\
**Post date:** [August 24, 2021, 2:48pm UTC](https://community.cesium.com/t/image-only-on-the-top-side-of-poligon/14863/4 "2021-08-24T14:48:31Z")

</div>

@11179

I am not sure if there is another workaround that will use one object rather than two. I will try to find time to look through the documentation and get back to you. **In the meantime, do other community members have any suggestions?**

As for the change of color that you are noticing, I suspect that we are seeing a change in lighting.

 ![image](https://global.discourse-cdn.com/cesium/original/2X/9/91ae1c75f0bc8d4470f9ccb1ce27e44028e1abde.jpeg)

The following demo showcases how much lighting can impact the perceived color of an asset.

> **[Cesium Sandcastle](https://sandcastle.cesium.com/?src=3D%20Models%20Coloring.html)**
>
> The Cesium Sandcastle provides an interactive environment for testing Cesium code.

The standard lighting in the 2D viewer seems to be different than the lighting in the 3D viewer. Please check out the following threads for more information on 2D lighting.

> [@Lighting of models in 2D map view](https://community.cesium.com/t/lighting-of-models-in-2d-map-view/8590):
>
> 1. A concise explanation of the problem you’re experiencing. I have entities with a 3D model displayed on the map in the 2D view. As I pan around, the models get darker and darker the closer they get to the edge of the viewing area, until they are black. I assume this is because the light is directed at the center of the viewing area. In the 3D view, this is never an issue because I’m not looking at the ‘dark side’ of the map until I spin the globe, which changes where the light shines. Is …

> [@Lighting problem in 2D and 2.5D view](https://community.cesium.com/t/lighting-problem-in-2d-and-2-5d-view/2624):
>
> Lighting problem shown in the screenshot attached. Paste the code below to sandcastle to see the effect: var viewer = new Cesium.Viewer(‘cesiumContainer’); var greenRectangle = viewer.entities.add({ name : ‘Green translucent, rotated, and extruded rectangle at height with outline’, rectangle : { coordinates : Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0), material : Cesium.Color.GREEN.withAlpha(0.5), extrudedHeight : 300000.0, height : 100000.0, outline : true, outlineColor…

Let me know if you have any other questions!

-Sam

---

<div class="post-metadata">

**Author:** ![11179](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/11179/32/5934_2.png) [@11179](https://community.cesium.com/u/11179)\
**Post date:** [August 24, 2021, 10:55pm UTC](https://community.cesium.com/t/image-only-on-the-top-side-of-poligon/14863/5 "2021-08-24T22:55:20Z")

</div>

nothing helps. Only viewer.scene.light.intensity=0 but it’s very dark.

 ![](https://global.discourse-cdn.com/cesium/original/2X/2/2091363bfef3ae38fff9221025b546c55feef975.png)

> **[Cesium Sandcastle](https://sandcastle.cesium.com/#c=bVLfb5swEP5XTnkp0aiBbe0mQqJJyR46pWqVVZsm8eLABawaG9kmFY3yv++gIUuyvtjy98Pfnc9bbmAr8AUNTEHhC8zRiqZiv3rMS0dZf55r5bhQaNKRDztIFYA2OZo7lWONtCj3ZLiysslQZW0MGy4tkm4/nqTqLYBZ4pAVUq+RoeJriUtRlE6ogrJ7w6W2JH7RKl6JbMVVgSe6VG20AW9L9QuCr6Mv4QREMo2+dvuHaRSOYdfVebiQKhROoGU8z72eADCYObpWYgwHBCDT1JhQ3KGNh8dYDTq2MbpaYGEQrTc4gAq4hhsfPoUs9E9QHz4TMgDjI1Vi13YMEd4csYoCjeAyPh3CXcULvD8wj0bXaFzr7f5FUEgnieGqdK62cRAIJqqiMSzTVeBWP24Xm0dWq+LKPzUZmhl3Z1FzbqhjwdVHLwp9uB2fGTIttTk+x7w7sT/fl8uH30fZfnDs+72f+/44zletqyftXcxi3M8xCEAr2YIrhWWMwbpxsEXTQs7Nc0effQnZvR0TyqGywrXTcDLyR4l1rcTZUMs3UdXaOGiM9BgLHFa17AYarJvsGR3LbB/dSZPg1JrkYgsin77z7SGT3FpiNo2UP8UrpqNZEpD+P6vUnD5Q8UA9SN52sjKaLd9A6i8J6Pi+02kt19xc3PwX)**
>
> The Cesium Sandcastle provides an interactive environment for testing Cesium code.

---

<div class="post-metadata">

**Author:** ![sam.rothstein](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sam.rothstein/32/6584_2.png) [@sam.rothstein](https://community.cesium.com/u/sam.rothstein)\
**Post date:** [August 25, 2021, 2:29pm UTC](https://community.cesium.com/t/image-only-on-the-top-side-of-poligon/14863/6 "2021-08-25T14:29:30Z")

</div>

@11179

Thank you for sharing your idea. `viewer.scene.light.intensity=0` seems like it should produce the desired results. However, the documentation for `Light` is not comprehensive. For instance, it is unclear if changes to `Light` impact both 2D and 3D. Thus, it is difficult to know exactly how this line of code will change the Cesium Viewer. I submitted an issue that outlines the documentation shortcomings of the `Light` object.

> <https://github.com/CesiumGS/cesium/issues/9756>
>
> Our documentation for the \`Light\` object is not very comprehensive. While the me…mber \`color\` has decent documentation, information on the member \`intensity\` is scarce. \`intensity\` is a number, but it is unclear if increasing the number increases the intensity. It is also unclear what the maximum \`intensity\` value can be. In addition, are changes to the \`Light\` object applied to both the 2D viewer and the 3D viewer?
> 
> If someone helps me get up to speed on \`Light\`, I will promptly submit a pull request addressing the shortcomings of our documentation. 
> 
> \`Light\` documentation: https://cesium.com/learn/cesiumjs/ref-doc/Light.html
> 
> This issue stems from the following community forum posts: https://community.cesium.com/t/image-only-on-the-top-side-of-poligon/14863
> 
> @lilleyse 
> @ebogo1

Please add details as you see fit.

There are various users who are struggling with similar issues. Color accuracy when viewing objects in 2D is somewhat of a pain point for the community right now. I highly recommend following this issue on GitHub.

> <https://github.com/CesiumGS/cesium/issues/5730>
>
> For the \[GeoJSON custom styling\](http://cesiumjs.org/Cesium/Apps/Sandcastle/inde…x.html?src=GeoJSON%20and%20TopoJSON.html&label=DataSources) sandcastle demo, the polygons are bright and happy in 3D:
> 
> !\[image\](https://user-images.githubusercontent.com/3451886/29046687-9050e50c-7b96-11e7-906a-d4ba1a2383a2.png)
> 
> But are much darker in 2D and CV:
> 
> !\[image\](https://user-images.githubusercontent.com/3451886/29046698-9afc17a6-7b96-11e7-9e22-364c514bf00a.png)
> 
> I wouldn't expect there to be such a big difference

I am going to check in with the rest of the Cesium development team and get back to you on this. Hopefully, we can come up with a robust solution. In the meantime, **community input would be greatly appreciated!**

One workaround you could pursue would be to use the `Billboard` object instead of a `rectangle` to create your 3D shapes. I believe that lighting characteristics impact billboards differently than other objects. Thus, this might solve your issue. Let me know if you have any other questions or comments. I would love to hear your thoughts on this.

-Sam

---

<div class="post-metadata">

**Author:** ![11179](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/11179/32/5934_2.png) [@11179](https://community.cesium.com/u/11179)\
**Post date:** [August 26, 2021, 1:20pm UTC](https://community.cesium.com/t/image-only-on-the-top-side-of-poligon/14863/7 "2021-08-26T13:20:27Z")

</div>

> [@sam.rothstein](#):
>
> Billboard

The billboard is always vertical (facing the user) in 3D. I need to draw a cube and put a drawing on its top side. In 3D mode, everything is fine, but in 2D mode, the color of this cube will change a lot. The color changes depending on the longitude (see my previous drawing). Timeline doesn’t seem to solve this problem, the darker color doesn’t change. Another solution is needed…

[https://user-images.githubusercontent.com/30249119/89367684-3e1eb280-d70c-11ea-9338-42529f3a3591.gif(image larger than 20 MB)](https://user-images.githubusercontent.com/30249119/89367684-3e1eb280-d70c-11ea-9338-42529f3a3591.gif)

---

<div class="post-metadata">

**Author:** ![11179](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/11179/32/5934_2.png) [@11179](https://community.cesium.com/u/11179)\
**Post date:** [August 26, 2021, 2:45pm UTC](https://community.cesium.com/t/image-only-on-the-top-side-of-poligon/14863/8 "2021-08-26T14:45:23Z")

</div>

The effect of color change in 2D mode is observed only if any ‘height’ value is set (even equal to 0). I have created an example showing this  
[https://i.imgur.com/5DFJUDe.png](https://i.imgur.com/5DFJUDe.png) - 3D mode  
[https://i.imgur.com/svxpuyO.png](https://i.imgur.com/svxpuyO.png) - 2D mode  
Example: [Cesium Sandcastle](https://sandcastle.cesium.com/index.html#c=tVNNj5swEP0rIy4LWtYB9dAtgfQjrdRD1D2k2mpVevDCAFaNHdmGFa3y32u+0ihLpUpVfWDs53nPMw+7pQpahk+oIAGBT7BFzZqa3A+YmzrZsN5KYSgTqFLHW6ciNYVU4LaWzCzvJrwN1sDi8GUf4DoJAw9+9mmpGcUJCsMMQ01onrt2C05D0BojuHpA/RFZWZkrfyQCHCTvSimiWSo1FUNFVVZ10VznlipjZ1S8IIWS9XssFaJ+qxTt3K8zDYBdBz6EAQn8S+zVBXb7B+yc+807TWtqUDHKfxckuVTk4cNud/fllFUNnUUQnHo7TrPjaOff+/RJ/m+bFlxaMGQB+geLnhlyTMWeijyj2nDszfgsy5Lju8YYKey13KOB0dXU8cGoBn0oGpEZJgW4WYXZd8yHSwhwaW1LeWNDwbgtzJ1ZLjNYe5PlrAAXeoD0tkOSJGcXFCbdcQxZ0z8gY0n2SUwVwGsIIIJG5FjY55OvR96xD0On9uP4TqxNx3Ezi75h9UEqA43iLiEre8CBWxP16rGxooZkWnuTUrw6p8Y5a4HlycKzhYxTre1O0XC+Zz8wdTbxyuY/o3JJcybKuxYVp12fVoWb3QgSQuKVXS4zjZT8kaoL5V8)

---

<div class="post-metadata">

**Author:** ![sam.rothstein](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sam.rothstein/32/6584_2.png) [@sam.rothstein](https://community.cesium.com/u/sam.rothstein)\
**Post date:** [August 26, 2021, 4:38pm UTC](https://community.cesium.com/t/image-only-on-the-top-side-of-poligon/14863/9 "2021-08-26T16:38:08Z")

</div>

@11179

Thank you for sharing this! I never noticed this behavior, yet it seems to provide a temporary workaround to Cesium’s 2D color accuracy issues.

 ![image](https://global.discourse-cdn.com/cesium/original/2X/8/8355b03f03f4f2363f040aa998186558363a9b8c.jpeg)

I will share this demo on the GitHub issue. I think it can provide value for the rest of the community. Please add details as you see fit.

-Sam

---

<div class="post-metadata">

**Author:** ![11179](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/11179/32/5934_2.png) [@11179](https://community.cesium.com/u/11179)\
**Post date:** [August 26, 2021, 4:48pm UTC](https://community.cesium.com/t/image-only-on-the-top-side-of-poligon/14863/10 "2021-08-26T16:48:58Z")

</div>

Not only does ‘height’ affect the color, but also ‘extrudedHeight’. Therefore, I first save these parameters (after drawing objects), and when I change the mode, I restore them.

```auto
viewer.entities.values.forEach(function(item){
	item.polygon.save = {
		height: item.polygon.height,
		extrudedHeight: item.polygon.extrudedHeight
	};
});

viewer.scene.morphStart.addEventListener(function(ignore, previousMode, newMode) {
	viewer.entities.values.forEach(function(item){
		var p = item.polygon;
		for(var key in p.save){
			p[key] = newMode == 3 ? p.save[key] : undefined;
		};
	});
});

```