Flipping mesh doesn’t flip geometry

Hello everyone,

I’m working on a custom 3D configurator where I manually deform a BoxGeometry by editing vertex positions to create chamfers (bevels) on each face.

The top bevel (recto) works correctly.

But the bottom bevel (verso) never ends up at the same place or with the same shape — even if I apply the exact same deformation logic with inverted signs.

The important detail is this:

When I flip the stone in my UI, I only rotate the mesh (mesh.rotation.x = Math.PI),
but I do not flip or mirror the geometry itself.

So the verso bevel is still applied in the original recto coordinate frame, which means the same deformation does not fall on the same vertices, and the 2 bevels are never symmetrical.

What I really need is:

  • a true mirrored bevel on the opposite face of the geometry
  • not just a visual flip of the mesh
  • but a deformation that applies to the correct set of vertices for the verso

My question is:

What is the correct way to mirror (or recompute) vertex coordinates when applying a custom deformation on the opposite face of a BoxGeometry, so that the verso bevel matches the recto one when flipping the object?

I’m still a beginner with Three.js, so apologies if my explanation or formatting is not perfect.
For reference, I’m working with Three.js r149 locally.

Any guidance would be greatly appreciated, thank you so much!

What would happen if you mirror the mesh via negative scaling? (e.g. mesh.scale.y *= -1 or mesh.scale.z *= -1)

Hi @PavelBoytchev and thanks for your answer !

To clarify :

Negative scaling does mirror the object visually, but it does not mirror the actual vertex data.
It only flips the final transform, which also inverts the normals, reverses face winding and can break UVs.
Since my bevel is applied directly to the BufferGeometry vertices, negative scaling doesn’t affect how the bevel math runs (the deformation still happens in the original coordinate system).

In my case, I need the bevel direction to follow the physical orientation of the stone:

  • on recto, the bevel goes downward from the top surface (correct)
  • on verso, the bevel must also go downward from the top surface, even though the mesh is rotated 180°
  • and when I flip to verso, a recto bevel must appear flipped (the bevel that was “top” becomes “bottom” after rotation)

So instead of mirroring the whole mesh, I simply mirror the bevel offset itself, depending on whether I’m viewing recto or verso.

Although I have no visual clue what you get and what you want to get, you may end up either flipping the geometry itself before beveling it, or having two modes for beveling - normal and mirror (e.g. with an additional parameter for direction of bevel).

For some reason uploading an image did not work, so I uploaded an illustration here: Untitled hosted at ImgBB — ImgBB – what configuration do you need - A, B, C or D? If not any of them, could you illustrate the correct one?

I don’t know if it helps, but here are the screenshots that clearly show what’s correct and what isn’t.

Correct behavior (recto top bevel):

Incorrect behavior on verso (this should start from the top, but doesn’t):

Incorrect behavior when showing a recto bevel from the verso view:

Still struggling to understand the correct way. The 1st and 3rd objects look “identical”. The second is hard to guess the profile, maybe because of the shading. I looks like sides B and D are flat, A and C have chamfers. I can see A. Could you draw what should C look like? Is it like C1 or like C2 or something else?

Hello, thank you very much for your reply and my apologies for the delay. Actually, the user can enter the desired measurements for each side (A, B, C, or D). The user can also choose whether they want the bevel on the FRONT or BACK side of each side. In the current case, only sides A and C have been entered with a value. I’ve made a small diagram (showing what it should look like), with the visual behavior as follows:

  • A has been configured as A/FRONT
  • C as C/BACK
  • The visual behavior should be as follows

You also have the second scheme (the current problematic rendering) where the bevels do not follow the flip of the element.

Let me know if this is clearer for you, my apologies for the explanations.

Thanks. The last illustration is helpful, at least I think so. Let me summarize my understanding. There is a plate. For each of its 4 sides either upper edge or the lower edge or no edge is chamfered (sic), so there are many possible combinations. It is needed to easily generate the exact vertical mirror of the plate by modifying the geometry itself, without rotating or flipping the mesh or the geometry.

The illustration below shows my understanding with 4 variations (top row) and their mirrored plates (bottom row). Later today I will try to make a small demo that does this and post it here, under the illustration.

PS. I hope this is correct understanding. The only unresolved issues are: (1) what to do with a corner when one side of the corner (e.g. A) is cut from top and the other side of the corner (e.g. B) is cut from bottom. (2) it is allowed to cut a side from both top and bottom and what to do if cuts are more than 50% each.

I’m currently having a visual problem as well; the excess material is quite noticeable.

You can’t cut the top and bottom of the same side; the program indicates this to the user with a tooltip.

Your diagram perfectly illustrates the desired result. Note that the stone visually rotates 180 degrees for the client using flipView().

Thank you so much, isn’t urgent, take all the time you need ! :slight_smile:

Came up with this. Not beautiful when cuts clash with each other, but otherwise looks OK.

https://codepen.io/boytchev/full/ByKZLWV

image

A few tests, values are commented in the code. Look at the bottom of the code.

2 Likes

Hi @PavelBoytchev , gonna check it later their are some Cloudflare issues atm looks ! Thanks a lot !

@PavelBoytchev ok i see the deal !! Thanks you very much ! Gonna give you a feedback Thrusday won’t have enough time before to work on it.

Hi @PavelBoytchev i’m trying to apply your demo. For the moment i don’t get it, will tell you if i got a result.