@pixi/3d
    Preparing search index...

    Interface IView3DEvents

    The pointer-event members of View3D

    Pixi treats a View as one 2D object. When pixi hit-tests it, the View casts a ray into the scene and passes the event on to the 3D node it hits.

    view3d.cursor = 'crosshair';                    // shown over empty space
    view3d.hitArea = new Rectangle(0, 0, 400, 300); // only this part takes pointer events

    const hit = view3d.raycast({ x: 200, y: 150 }); // a pick without an event

    EventBoundary3D For event settings that apply to the whole View, at view3d.events.

    interface IView3DEvents {
        cursor?: string & {} | Cursor;
        hitArea?: IHitArea | null;
        containsPoint(point: PointData): boolean;
        raycast(position: PointData, out?: RaycastHit3D): RaycastHit3D | null;
    }
    Index
    cursor? hitArea?
    containsPoint raycast
    cursor?: string & {} | Cursor

    CSS cursor shown over the View, except where the event's 3D target (target3D) sets its own cursor

    Reading it back returns the cursor in effect now, which can be the node's.

    view3d.cursor = 'default'; // shown over empty space
    mesh.cursor = 'pointer';   // shown while the ray hits the mesh
    hitArea?: IHitArea | null

    Limits pointer events to a shape inside the View, in View-local 2D space, with 3D picking still working inside it

    • The interactive region is where the shape and the View's rectangle overlap: a shape can shrink it but never extend it past the View, unlike 2D, where hitArea replaces the bounds.
    • Outside the shape the View isn't hit at all, so events reach the content behind it.
    • Reading it back returns another object, not your shape, so keep your own reference.
    • View3D#raycast and View3D#containsPoint ignore the shape.
    // Only the top-left 400×300 of the View is interactive;
    // clicks outside it fall through to the 2D content behind.
    view3d.hitArea = new Rectangle(0, 0, 400, 300);

    • Whether a point in the View's local 2D space is inside the View; pixi's hit test for the View

      It answers true anywhere in the View's rectangle, so a click on empty space still reaches the View, and "click empty space to deselect" needs no extra wiring. It also picks the 3D node under the point for the event that follows.

      Parameters

      • point: PointData

        Point in the View's local 2D space.

      Returns boolean

      • The View hides interactive 2D content behind it from pointer events. To let them through, put the 2D UI above the View, set View3D#hitArea to cover only part of it, or set the View's eventMode to 'none' or 'passive', which turn off 3D pointer events too. 'passive' lets 2D content through only while no 2D ancestor of the View is interactive.
      • Calling it from a listener changes the pick the rest of that event uses. Use View3D#raycast to query the scene.
      const overView = view3d.containsPoint(view3d.toLocal({ x: 400, y: 300 }));

    • Casts a ray through a 2D point and returns the closest hit

      position is in the space of event.global, as for View3D#screenToRay. Use it to pick outside pointer events: placing decals, line of sight, drag-and-drop targets.

      Parameters

      • position: PointData

        2D global point to cast through (e.g. event.global).

      • Optionalout: RaycastHit3D

        Hit to write into, returned on a hit and untouched on a miss. Defaults to a new one for each hit.

      Returns RaycastHit3D | null

      The closest hit, or null on a miss or when the point falls outside the View's 2D rect.

      • Only nodes that take part in picking can be hit: interactive nodes and, under them, nodes with a shape (see IFederatedContainer3D#eventMode). In a scene where nothing is interactive it always returns null.
      • Without out it allocates a new RaycastHit3D for each hit. Pass a hit from createRaycastHit3D as out to pick every frame without garbage.
      • It uses the transforms and visibility from the last render, so a node or camera moved, shown or hidden since then is picked as it was drawn.
      • Hidden nodes, and nodes under a hidden ancestor, neither hit nor block what is behind them.
      • A hitVolume you set on an ancestor clips its descendants' hits, as it does for pointer events.
      // Drop a decal wherever the user taps.
      view3d.on('pointertap', (e) => {
        const hit = view3d.raycast(e.global);
        if (hit) decal.position.copyFrom(hit.point); // world-space hit point
      });

      // Follow the pointer every frame, reusing one hit.
      const hover = createRaycastHit3D();
      app.ticker.add(() => {
        if (view3d.raycast(pointer, hover)) cursor3d.position.copyFrom(hover.point);
      });

      View3D#screenToRay For the ray on its own, without a scene pick.

    Settings
    Member Visibility

    On This Page
    Properties
    Methods