export default function Play3D()

in infrastructure/load-balancing-for-inference/components/play3d.tsx [85:175]
78 lines of code
5 McCabe index (conditional complexity)

export default function Play3D() {
  const [cubes, setCubes] = useState<Array<{
    key: string
    startPosition: [number, number, number]
    delay: number
  }>>([])

  const totalCreatedRef = useRef(0)

  // Function to create a new cube
  const createNewCube = () => {
    totalCreatedRef.current += 1
    const id = totalCreatedRef.current
    
    // Random distribution patterns
    let angle, dirX, dirY, distance
    const pattern = id % 4
    
    if (pattern === 0) {
      // Evenly distributed rays
      angle = (id % 72) * ((Math.PI * 2) / 72)
      distance = 0.01 + Math.random() * 0.02
    } else if (pattern === 1) {
      // Randomly distributed
      angle = Math.random() * Math.PI * 2
      distance = 0.01 + Math.random() * 0.03
    } else {
      // Concentrated in quadrants
      angle =
        ((Math.floor(id / 10) % 4) * Math.PI) / 2 + Math.random() * (Math.PI / 4)
      distance = 0.01 + Math.random() * 0.02
    }
    
    dirX = Math.cos(angle)
    dirY = Math.sin(angle)
    
    return {
      key: `cube-${id}`,
      startPosition: [
        dirX * distance,
        dirY * distance,
        -12 - Math.random() * 4
      ] as [number, number, number],
      delay: Math.random() * 150
    }
  }

  useEffect(() => {
    // Set initial cubes
    const initialCubes = Array(60).fill(0).map(() => createNewCube())
    setCubes(initialCubes)
    
    // Add new cubes at a slightly lower rate
    const interval = setInterval(() => {
      setCubes(prev => {
        // Create a small batch each time
        const newCount = 3 + Math.floor(Math.random() * 2)
        const newCubes = Array(newCount).fill(0).map(() => createNewCube())
        
        const combinedCubes = [...prev, ...newCubes]
        // Limit total cubes to reduce overhead
        if (combinedCubes.length > 200) {
          return combinedCubes.slice(combinedCubes.length - 180)
        }
        return combinedCubes
      })
    }, 80) // Spawn cubes every 80ms instead of 50ms

    return () => clearInterval(interval)
  }, [])

  return (
    <Canvas
      camera={{ position: [0, 0, 6], fov: 60 }}
      frameloop="always"
      gl={{
        antialias: true,
        powerPreference: "high-performance"
      }}
      // Optional: Let ThreeJS adjust detail for performance
      // performance={{ min: 0.5 }}
    >
      <color attach="background" args={["#FFB800"]} />
      <ambientLight intensity={1.5} />
      <directionalLight position={[3, 3, 5]} intensity={1.5} color="#FFFFFF" />
      {cubes.map(({ key, startPosition, delay }) => (
        <MovingBox key={key} startPosition={startPosition} delay={delay} />
      ))}
    </Canvas>
  )
}