@masatomakino/threejs-interactive-object
    Preparing search index...

    Function convertToRectangle

    • Converts a Three.js viewport definition to a Rectangle in canvas pixel coordinates.

      Parameters

      • canvas: HTMLCanvasElement

        The HTML canvas element that defines the coordinate space

      • viewport: Vector4

        Three.js viewport definition (Vector4: x, y, width, height)

      Returns Rectangle

      Rectangle with corner coordinates in canvas pixel space

      Transforms a Three.js viewport specification (used with WebGLRenderer.setViewport()) into a Rectangle structure optimized for boundary checking and coordinate operations. The conversion handles the coordinate system transformation between Three.js viewport space and standard DOM canvas coordinates.

      Coordinate System Transformation: Three.js viewports use a bottom-left origin coordinate system, while DOM canvas uses top-left origin. This function performs the necessary Y-axis flip:

      Three.js Viewport (bottom-left origin):   Canvas Coordinates (top-left origin):
      ┌─────────────────────────────────────┐   ┌─────────────────────────────────────┐
      │                                     │   │  (x1,y1)                            │
      │                                     │   │    ┌──────────┐                     │
      │           ┌──────────┐              │   │    │ Rectangle│                     │
      │           │ Viewport │              │   │    └──────────┘                     │
      │           └──────────┘              │   │              (x2,y2)                │
      │    (x,y)                            │   │                                     │
      └─────────────────────────────────────┘   └─────────────────────────────────────┘

      Conversion Process:

      1. Extract viewport dimensions (x, y, width, height) from Vector4
      2. Calculate canvas height using getCanvasHeight() for accurate measurement
      3. Convert bottom-left coordinates to top-left coordinates using Y-axis flip
      4. Generate explicit corner coordinates (x1, x2, y1, y2) for efficient boundary testing

      Multi-Viewport Applications: This function is essential for applications using WebGLRenderer.setViewport() to render multiple scenes or cameras to different canvas regions. It enables accurate pointer event processing within specific viewport boundaries.

      // Convert viewport to rectangle
      const viewport = new Vector4(100, 50, 200, 150);
      const rect = convertToRectangle(canvas, viewport);
      // Result: { x1: 100, x2: 300, y1: canvasHeight-200, y2: canvasHeight-50 }

      Handles Y-coordinate conversion between Three.js and DOM coordinate systems. Essential for multi-viewport applications and pointer event boundary validation.

      • Rectangle - Output structure definition
      • isContain - Primary consumer for boundary checking
      • getCanvasHeight - Canvas measurement utility
      • MouseEventManager - Integration context for interaction handling

    Settings

    Member Visibility