fix: add renderOrder to AxisRotator (#2504)

* add renderOrder to AxisRotator

* add renderOrder property to PivotControls (defaults to 500)

---------

Co-authored-by: Roman <[email protected]>

Author: romankoho

docs/gizmos/pivot-controls.mdx

@@ -59,6 +59,8 @@ type PivotControlsProps = {
   onDragEnd?: () => void
   /** Set this to false if you want the gizmo to be visible through faces */
   depthTest?: boolean
+  /** Render order of pivot control - default is 500 */
+  renderOrder?: number
   opacity?: number
   visible?: boolean
   userData?: { [key: string]: any }

src/web/pivotControls/AxisArrow.tsx

@@ -52,6 +52,7 @@ export const AxisArrow: React.FC<{ direction: THREE.Vector3; axis: 0 | 1 | 2 }>
     axisColors,
     hoveredColor,
     opacity,
+    renderOrder,
     onDragStart,
     onDrag,
     onDragEnd,
@@ -189,7 +190,7 @@ export const AxisArrow: React.FC<{ direction: THREE.Vector3; axis: 0 | 1 | 2 }>
           polygonOffsetFactor={-10}
           fog={false}
         />
-        <mesh raycast={() => null} position={[0, cylinderLength + coneLength / 2.0, 0]} renderOrder={500}>
+        <mesh raycast={() => null} position={[0, cylinderLength + coneLength / 2.0, 0]} renderOrder={renderOrder}>
           <coneGeometry args={[coneWidth, coneLength, 24, 1]} />
           <meshBasicMaterial
             transparent

src/web/pivotControls/AxisRotator.tsx

@@ -72,6 +72,7 @@ export const AxisRotator: React.FC<{ dir1: THREE.Vector3; dir2: THREE.Vector3; a
     fixed,
     axisColors,
     hoveredColor,
+    renderOrder,
     opacity,
     onDragStart,
     onDrag,
@@ -239,6 +240,7 @@ export const AxisRotator: React.FC<{ dir1: THREE.Vector3; dir2: THREE.Vector3; a
         opacity={opacity}
         polygonOffset
         polygonOffsetFactor={-10}
+        renderOrder={renderOrder}
         fog={false}
       />
     </group>

src/web/pivotControls/ScalingSphere.tsx

@@ -53,6 +53,7 @@ export const ScalingSphere: React.FC<{ direction: THREE.Vector3; axis: 0 | 1 | 2
     axisColors,
     hoveredColor,
     opacity,
+    renderOrder,
     onDragStart,
     onDrag,
     onDragEnd,
@@ -196,7 +197,7 @@ export const ScalingSphere: React.FC<{ direction: THREE.Vector3; axis: 0 | 1 | 2
             />
           </Html>
         )}
-        <mesh ref={meshRef} position={[0, position, 0]} renderOrder={500} userData={userData}>
+        <mesh ref={meshRef} position={[0, position, 0]} renderOrder={renderOrder} userData={userData}>
           <sphereGeometry args={[radius, 12, 12]} />
           <meshBasicMaterial
             transparent

src/web/pivotControls/context.ts

@@ -23,6 +23,7 @@ export type PivotContext = {
   lineWidth: number
   fixed: boolean
   depthTest: boolean
+  renderOrder: number
   userData?: { [key: string]: any }
   annotations?: boolean
   annotationsClass?: string

src/web/pivotControls/index.tsx

@@ -82,6 +82,7 @@ export type PivotControlsProps = {
   onDragEnd?: () => void
   /** Set this to false if you want the gizmo to be visible through faces */
   depthTest?: boolean
+  renderOrder?: number
   opacity?: number
   visible?: boolean
   userData?: { [key: string]: any }
@@ -115,6 +116,7 @@ export const PivotControls: ForwardRefComponent<PivotControlsProps, THREE.Group>
       rotationLimits,
       scaleLimits,
       depthTest = true,
+      renderOrder = 500,
       axisColors = ['#ff2060', '#20df80', '#2080ff'],
       hoveredColor = '#ffff40',
       annotations = false,
@@ -197,6 +199,7 @@ export const PivotControls: ForwardRefComponent<PivotControlsProps, THREE.Group>
         lineWidth,
         fixed,
         depthTest,
+        renderOrder,
         userData,
         annotations,
         annotationsClass,