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!
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?
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:
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.