Image only on the top side of poligon

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

1 Like

@11179

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

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.

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.

Let me know what you think!

-Sam

Thanks… I didn’t want to split the object in two. :frowning:
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?

@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.

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

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.

Let me know if you have any other questions!

-Sam

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

@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.

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.

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

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…

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 - 3D mode
https://i.imgur.com/svxpuyO.png - 2D mode
Example: Cesium Sandcastle

@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.

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

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.

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;
		};
	});
});