import * as Zappar from '@zappar/zappar'; import { Camera } from '../camera.js'; import * as THREE from 'three'; import { PlanesMeshesIntersection } from '../mesh/planesmeshes.js'; export declare const css = "\n\n#overlay {\n position: fixed;\n top: 0;\n left: 0;\n pointer-events: none;\n overflow: hidden;\n z-index: 1000000;\n width: 100%;\n height: 100%;\n}\n\n#overlay > * {\n pointer-events: auto;\n position: absolute;\n}\n\n.zappar-three-place-ui {\n\tposition: absolute;\n\tpointer-events: none;\n\tdisplay: flex;\n\tflex-direction: column;\n\tpadding: 40px;\n\tbox-sizing: border-box;\n}\n\n.zappar-three-place-ui-button {\n\toutline: none;\n\tbackground-color: #555;\n\tborder-radius: 40px;\n\tfont-family: sans-serif;\n\tcolor: white;\n\tfont-size: 16px;\n\tborder: none;\n\tmin-width: 60px;\n\theight: 60px;\n\tdisplay: flex;\n align-items: center;\n padding-left: 15px;\n padding-right: 15px;\n justify-content: center;\n}\n\n.zappar-three-place-ui-button:disabled {\n\topacity: 0.1;\n}\n\n.zappar-three-place-ui-button-text {\n\tpadding-left: 7px;\n\tpadding-right: 7px;\n}\n\n.zappar-three-place-ui-horizontal-left {\n\talign-items: flex-start;\n}\n\n.zappar-three-place-ui-horizontal-right {\n\talign-items: flex-end;\n}\n\n.zappar-three-place-ui-horizontal-center {\n\talign-items: center;\n}\n\n.zappar-three-place-ui-vertical-top {\n\ttop: 0px;\n}\n\n.zappar-three-place-ui-vertical-bottom {\n\tbottom: 0px;\n}\n\n.zappar-three-place-ui-vertical-center {\n\ttop: 50%;\n\tmargin-top: -30px;\n}"; export type LongPressMode = 'none' | 'toggle' | 'hold'; export type HorizontalAlignment = 'left' | 'center' | 'right'; export type VerticalAlignment = 'top' | 'center' | 'bottom'; /** * A THREE.Group that lets users place AR content in their environment. * Provides touch interaction and UI for positioning content on detected surfaces or ground plane. * Content can be placed once or repositioned using tap, with optional long-press to move functionality. */ export declare class UserPlacementAnchorGroup extends THREE.Group { private camera; readonly worldTracker: Zappar.WorldTracker; private renderer; /** Current world anchor for content placement */ anchor: Zappar.CustomAnchor; private _placementMode; /** * Controls if content is in placement mode * @default false */ get placementMode(): boolean; /** * Controls if content is in placement mode * @default false */ set placementMode(value: boolean); private _placeUIClassList; /** * CSS classes for the placement UI container div */ set placeUIClassList(value: string[]); get placeUIClassList(): string[]; /** Indicates if system is ready for user interaction */ ready: boolean; /** * Allow placement on detected real-world surfaces * @default true */ placeOnPlanes: boolean; /** * Allow placement on detected ground plane * @default false */ placeOnGround: boolean; /** * Show detected surfaces during placement * @default true */ visualizePlanesDuringPlacement: boolean; /** * Show content during placement * @default true */ showContentDuringPlacement: boolean; /** * Show placement confirmation button * Located in #overlay > .zappar-three-place-ui > .zappar-three-place-ui-button * @default true */ showPlaceButton: boolean; /** * Show checkmark icon in place button * Located in #overlay > .zappar-three-place-ui > .zappar-three-place-ui-button > #zappar-three-place-ui-button-icon * @default true */ showPlaceButtonIcon: boolean; /** * Custom text for place button * Located in #overlay > .zappar-three-place-ui > .zappar-three-place-ui-button > .zappar-three-place-ui-button-text * @default "" */ placeButtonText: string; /** * Show button to restart placement * Located in #overlay > .zappar-three-place-ui > .zappar-three-place-ui-button * @default true */ showRestartPlacementButton: boolean; /** * Show reset icon in restart button * Located in #overlay > .zappar-three-place-ui > .zappar-three-place-ui-button > #zappar-three-place-ui-button-icon * @default true */ showRestartPlacementButtonIcon: boolean; /** * Custom text for restart button * Located in #overlay > .zappar-three-place-ui > .zappar-three-place-ui-button > .zappar-three-place-ui-button-text * @default "" */ restartPlacementButtonText: string; /** * Long press behavior: none, toggle, or hold * @default "none" */ longPressToMove: LongPressMode; /** * Show long press instruction after placement * Appears as overlay text in #overlay center * @default false */ showLongPressInstructionOnPlace: boolean; /** * Show long press instruction after placement * Appears as overlay text in #overlay center * @default false */ longPressInstruction: string; /** * Place button horizontal position * Adds .zappar-three-place-ui-horizontal-[left|center|right] class * @default "center" */ placeButtonHorizontalAlignment: HorizontalAlignment; /** * Place button vertical position * Adds .zappar-three-place-ui-vertical-[top|center|bottom] class * @default "bottom" */ placeButtonVerticalAlignment: VerticalAlignment; /** * Restart button horizontal position * Adds .zappar-three-place-ui-horizontal-[left|center|right] class * @default "left" */ restartPlacementButtonHorizontalAlignment: HorizontalAlignment; /** * Restart button vertical position * Adds .zappar-three-place-ui-vertical-[top|center|bottom] class * @default "bottom" */ restartPlacementButtonVerticalAlignment: VerticalAlignment; private planes; private placeUI?; private placeButton?; private restartPlacementUI?; private restartPlacementButton?; private fingerHeld; private hasFirstPlaced; private placementValid; contentGroup: THREE.Group; /** * Emits when placement mode starts */ onPlacementStart: Zappar.Event; /** * Emits when placement mode ends */ onPlacementEnd: Zappar.Event; /** * Emits when a plane is first intersected. */ readonly onPlaneIntersect: Zappar.Event1; /** * Emits when a plane is no longer intersected. */ readonly onPlaneIntersectEnd: Zappar.Event1>; /** * Gets/sets the enabled state of the world tracker. Disable when not in use to save computational resources during frame processing. */ set enabled(value: boolean); /** * Gets/sets the enabled state of the world tracker. Disable when not in use to save computational resources during frame processing. */ get enabled(): boolean; onQuality: Zappar.Event1; constructor(camera: Camera, worldTracker: Zappar.WorldTracker, renderer: THREE.WebGLRenderer, planeMaterial?: THREE.Material | THREE.MaterialParameters); private setupTouchListeners; private handleTouchStart; private handleTouchEnd; onFrameUpdate: () => void; private handleFirstPlaced; private updateUI; private updatePlaceButton; private updateRestartPlacementButton; private removePlaceButton; private removeRestartPlacementButton; private setElementPosition; private isReady; private updateReadyStatus; private showTextAlert; dispose(): void; }