floorplan | Experimenting with webgl/three.js | Graphics library

One way of analyzing this would be to do as Nick suggested and use destring area pricesqm. Note that in the following code, I added four lines to your data example so that there was an example of a masterplan-lotnumber changing over time:

You can try adding more keyframe selectors to your CSS. So instead of

Because of the way this is rendered as an overlay image, there is no way to really fix this.

My answer is to actually just convert the image to a GeoTIF and use the utility gdal2tiles to convert the image to a tileset. For each zoom level, the tiles are rendered differently and the image will always be as intended. It is not trivial if you have never worked with GeoTIFs or gdal before, but with effort you can get it to look perfectly as desired.

In simplest terms, "flipping" or finding the negative of the normal (or any) vector is a matter of negating each of its components. So if your normal vector n is a THREE.Vector3 instance, then its negative is n.multiplyScalar(-1), or if it's in an array of the form [ x, y, z ], then its negative is [ -1 * x, -1 * y, -1 * z ].

Flipping the normal vectors won't do all of what you're looking to accomplish, though. Normals in Three.js (and many other engines and renderers) are separate and distinct from the notion of the side of a triangle that's being rendered. So if you only flip the vectors, Three.js will continue to render the front side of the triangles, which form the exterior of the mesh; those faces will appear darker, though, because they're reflecting light in exactly the wrong direction.

For each triangle, you need to both (a) flip the normals of its vertices; and (b) either render the back side of that triangle or reverse the facing of the triangle.

To render the back side of the triangle, you can set the .side property of your material to THREE.BackSide. (I have not tested this, and it may have other implications; among other things, you may come across other parts of your codebase that have to be specifically written with an eye to the fact that you're rendering backfaces.)

A more robust solution would be to make the triangles themselves face the other way.

ExtrudeGeometry is a factory for BufferGeometry, and the vertex positions are stored in a flat array in the .attributes.position.array property of the generated geometry. You can swap every 3rd-5th element in the array with every 6th-9th element to reverse the winding order of the triangle, which changes the side that Three.js considers to be the front. Thus, a triangle defined as (0, 0, 0), (1, 0, 1), (1, 1, 1) and represented in the array as [ 0, 0, 0, 1, 0, 1, 1, 1, 1 ] becomes (0, 0, 0), (1, 1, 1), (1, 0, 1) and [ 0, 0, 0, 1, 1, 1, 1, 0, 1 ]. (Put differently, ABC becomes ACB.)

To accomplish this in code requires something like the following.

Simply said:
a) VS Code is not affect by vcpkg integrate install, only MSBuild is ...
b) setting the CMAKE_TOOLCHAIN_FILE only works before the very first project() call
c) setting CMAKE_TOOLCHAIN_FILE before project() via cmake.configureSettings or other means does not work if there is already a configured cmake cache. d) don't modify CMAKE_PREFIX_PATH

So starting from a clean cmake build without any cache: Set CMAKE_TOOLCHAIN_FILE before project() by any means you want and it works. You might also need to set VCPKG_TARGET_TRIPLET. (using #include seems fine)

I think you can use the @OneToMany(orphanRemoval = true) It provides a way to delete orphaned entities from the database. So, it should remove the FloorPlanEntity from database when it's removed from the list. There is some tutorial with explanation: https://www.baeldung.com/jpa-cascade-remove-vs-orphanremoval#orphanremoval

ProForm is a repackaging of antd Form

So you can use Form API for your purpose

The way I approached your problem is by trying to threshold the whole perimeter you are looking for. To do that, I found the background color in the image and used it to filter the original image and erode the selection to make it slightly bigger and remove some of the artifacts. Then, similar to your code, find the contours, remove smaller contours and approximate each one to a polygon. Once you have that approximation, you can simply draw it as a contour, which is very efficient. To calculate the approximation I use 3% difference with the original contour perimeter, calculated as: cv2.arcLength(c, True) for each contour.