The HTML canvas element that defines the coordinate space
Optional viewport definition (Vector4: x, y, width, height). If undefined, always returns true
The pointer event to test for containment
True if the pointer is within the viewport boundaries, false otherwise
Performs boundary checking to determine if a pointer event (mouse, touch, pen) occurs within the specified viewport region. This function is essential for multi-viewport applications where different canvas regions handle different interactions or render different content.
Boundary Logic: The function uses inclusive boundary checking (≤ and ≥) to ensure that pointer events exactly on viewport edges are considered within bounds. This prevents edge cases where interactions at viewport boundaries might be incorrectly rejected.
Viewport Handling:
viewport === undefined: Always returns true (entire canvas is interactive)viewport === null: Always returns true (entire canvas is interactive)Coordinate Systems: The function automatically handles coordinate system differences between Three.js viewports (bottom-left origin) and DOM pointer events (top-left origin) by using convertToRectangle() for accurate boundary conversion.
// Basic viewport containment check
const viewport = new Vector4(100, 50, 200, 150);
const isInViewport = isContain(canvas, viewport, event);
// Full-canvas applications (no viewport restrictions)
const isInCanvas = isContain(canvas, undefined, event); // Always true
Used extensively by MouseEventManager for viewport boundary validation. Boundary checking is inclusive and optimized with early returns for undefined viewports.
Determines whether a pointer event occurs within the boundaries of a specified viewport.