Why is my bounding box off when I rotate ShapeGeometry?

[weary kite]

I am displaying a simple triangle. Before I rotate it, the bounding box looks correct. However, after I rotate the shape and update the BoxHelper, the bounding box is off. Here is a demo: https://playcode.io/2260366

[tidal lion]

import React, { useRef } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import * as THREE from "three";

const RotatingTriangle = () => {
const groupRef = useRef();

// Rotate both triangle and boundary together
useFrame(() => {
if (groupRef.current) {
groupRef.current.rotation.y += 0.01;
groupRef.current.rotation.x += 0.005;
}
});

// Define Triangle Geometry
const triangleGeometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
0, 1, 0, // Top vertex
-1, -1, 0, // Bottom left
1, -1, 0 // Bottom right
]);
triangleGeometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));

// Define Square Boundary Geometry
const boundaryGeometry = new THREE.BufferGeometry();
const boundaryVertices = new Float32Array([
-1, 1, 0, 1, 1, 0, // Top edge
1, 1, 0, 1, -1, 0, // Right edge
1, -1, 0, -1, -1, 0, // Bottom edge
-1, -1, 0, -1, 1, 0 // Left edge
]);
boundaryGeometry.setAttribute("position", new THREE.BufferAttribute(boundaryVertices, 3));

return (
<group ref={groupRef}>
{/* Triangle Mesh */}
<mesh geometry={triangleGeometry}>
<meshBasicMaterial color="red" side={THREE.DoubleSide} />
</mesh>

  {/* Square Boundary */}
  <lineSegments geometry={boundaryGeometry}>
    <lineBasicMaterial color="blue" linewidth={2} />
  </lineSegments>
</group>

);
};

export default function App() {
return (
<Canvas>
<ambientLight />
<RotatingTriangle />
</Canvas>
);
}

Please use the code above.

[dense zodiac]

(a) Believe it or not, many people don't use r3f; I wouldn't suggest it unless the original code did.
(b) I think you misunderstand OP's question. AFAICT they're trying to figure out why the axis-aligned bounding box they generate with the BoxHelper function isn't a tight bounding box; they don't want to have a non-aligned box that rotates with the triangle.
(c) This is rather crotchety on my part, but 'please use the code above' is seldom a useful answer to a help question. It may (sometimes) fix the immediate problem but it doesn't explain what has gone wrong and does nothing to prevent similar problems in future

[weary kite]

Thanks for the code @tidal lion and the reply @dense zodiac . Steven is right, I am wondering why the bounding box isn't a tight bounding box. What it seems like to me, is that there is an internal bounding box around the shape that is rotating when the shape rotates, and then the displayed bounding box is actually based off of the rotated internal bounding box.

[dense zodiac]

That was my thinking too, but it looked to me like you were recomputing the BoxHelper every frame and the source code for it seems to re-bound based on the original mesh. My best immediate advice is to try and step through the Three code and see what's going on there.

[tidal lion]

I get the point but I just suggested only my way. When it comes to your requirement, you need to enclose the box and boundary of it into a container.