import type { Material } from "three"; import type { ClickableState } from "./index.js"; /** * Defines the material type used in StateMaterial - can be a single Material or an array of Materials. * @public */ export type StateMaterialType = Material | Material[]; /** * An opacity management class for Three.js materials in interactive states. * * @description * StateMaterial manages the opacity of Three.js Material objects for interactive states. * It preserves the original opacity values of materials and enables synchronized opacity control * across multiple materials through StateMaterialSet, allowing coordinated transparency animations * for all interactive states. * * @remarks * - Preserves original opacity values at construction time for proportional scaling * - Final opacity = setOpacity() parameter × original material opacity * - Supports both single materials and material arrays for multi-material objects * - Controlled by StateMaterialSet for synchronized transparency across interactive states * * @example * ```typescript * import { StateMaterial } from '@masatomakino/threejs-interactive-object'; * import { MeshBasicMaterial } from 'three'; * * // Single material * const material = new MeshBasicMaterial({ color: 0xff0000, opacity: 0.8, transparent: true }); * const stateMaterial = new StateMaterial(material); * * // Multi-material array (e.g., for BoxGeometry with different materials per face) * const materials = [ * new MeshBasicMaterial({ color: 0xff0000, transparent: true }), // +X face * new MeshBasicMaterial({ color: 0x00ff00, transparent: true }), // -X face * new MeshBasicMaterial({ color: 0x0000ff, transparent: true }), // +Y face * new MeshBasicMaterial({ color: 0xffff00, transparent: true }), // -Y face * new MeshBasicMaterial({ color: 0xff00ff, transparent: true }), // +Z face * new MeshBasicMaterial({ color: 0x00ffff, transparent: true }) // -Z face * ]; * const stateMultiMaterial = new StateMaterial(materials); * * // Control opacity * stateMaterial.setOpacity(0.5); // Sets to 50% of original opacity * ``` * * @see {@link StateMaterialSet} - Container class that manages multiple StateMaterial instances * * @public */ export declare class StateMaterial { private _material; private alpha; private alphaArray; /** * Creates a new StateMaterial instance. * * @param material - The Three.js material or array of materials to manage */ constructor(material: StateMaterialType); private updateAlpha; private getAlphaArray; /** * Sets the material and updates internal alpha values. * * @param value - The Three.js material or array of materials to set * * @remarks * Automatically captures original opacity values for proportional calculations. */ set material(value: StateMaterialType); /** * Gets the current material. * * @returns The managed Three.js material or array of materials */ get material(): StateMaterialType; /** * Sets the opacity of the managed material(s). * * @param opacity - The opacity multiplier (0.0 to 1.0) * * @remarks * Uses preserved original opacity values for proportional scaling. * * @example * ```typescript * // Set to 50% of original opacity * stateMaterial.setOpacity(0.5); * * // Make completely transparent * stateMaterial.setOpacity(0.0); * * // Restore original opacity * stateMaterial.setOpacity(1.0); * ``` */ setOpacity(opacity: number): void; } /** * A comprehensive material manager for interactive object states. * * @description * StateMaterialSet manages multiple StateMaterial instances for different interactive states * including normal, hover, down, disable, and their selected variants. It provides intelligent * state-based material selection with priority logic and unified opacity control across all * managed materials for coordinated visual feedback. * * @remarks * - Only `normal` material is required; unspecified states automatically use the normal material * - `disable` state has priority over interaction states (normal, over, down) * - Supports both regular and selected variants for each interaction state * - Provides unified opacity control across all managed materials * - Handles state transitions with appropriate material switching * * @example * ```typescript * // Minimal setup with only normal material * const materialSet = new StateMaterialSet({ * normal: new MeshBasicMaterial({ color: 0x888888 }) * }); * * // Complete setup with hover, disable, and selected states * const fullMaterialSet = new StateMaterialSet({ * normal: new MeshBasicMaterial({ color: 0x888888 }), * over: new MeshBasicMaterial({ color: 0xaaaaaa }), * disable: new MeshBasicMaterial({ color: 0x444444 }), * normalSelect: new MeshBasicMaterial({ color: 0x0088ff }) * }); * ``` * * @see {@link StateMaterial} - Individual material manager managed by this class * @see {@link ClickableState} - Enumeration of available interactive states * * @public */ export declare class StateMaterialSet { normal: StateMaterial; over: StateMaterial; down: StateMaterial; disable: StateMaterial; normalSelect: StateMaterial; overSelect: StateMaterial; downSelect: StateMaterial; materials: StateMaterial[]; /** * Creates a new StateMaterialSet with the specified materials for different states. * * @param param - Configuration object containing materials for each state * @param param.normal - Material for normal state (required) * @param param.over - Material for hover state (optional, fallback to normal) * @param param.down - Material for pressed state (optional, fallback to normal) * @param param.disable - Material for disabled state (optional, fallback to normal) * @param param.normalSelect - Material for normal selected state (optional, fallback to normal) * @param param.overSelect - Material for hover selected state (optional, fallback to normal) * @param param.downSelect - Material for pressed selected state (optional, fallback to normal) * * @example * ```typescript * // Basic usage * const materialSet = new StateMaterialSet({ * normal: new MeshBasicMaterial({ color: 0x888888 }), * over: new MeshBasicMaterial({ color: 0xaaaaaa }) * }); * ``` * * @throws {Error} When normal material is not provided */ constructor(param: { normal: StateMaterialType; over?: StateMaterialType; down?: StateMaterialType; disable?: StateMaterialType; normalSelect?: StateMaterialType; overSelect?: StateMaterialType; downSelect?: StateMaterialType; }); private static initMaterial; init(): void; /** * Gets the appropriate StateMaterial for the given interaction state and conditions. * * @param state - The current interaction state (normal, over, down) * @param enabled - Whether the interaction handler is enabled * @param isSelected - Whether the object is in selected state (default: false) * @returns The StateMaterial instance for the specified conditions * * @remarks * State selection priority: * 1. If enabled is false, always returns disable material * 2. Otherwise, returns the appropriate material based on state and selection: * - normal + selected = normalSelect * - over + selected = overSelect * - down + selected = downSelect * - normal = normal * - over = over * - down = down * * @example * ```typescript * const materialSet = new StateMaterialSet({ * normal: normalMat, * over: hoverMat, * disable: disabledMat * }); * * // Get normal material * const normal = materialSet.getMaterial("normal", true, false); * * // Get hover material for selected object * const hoverSelected = materialSet.getMaterial("over", true, true); * * // Get disabled material (ignores state and selection) * const disabled = materialSet.getMaterial("over", false, true); * ``` */ getMaterial(state: ClickableState, enabled: boolean, isSelected?: boolean): StateMaterial; /** * Sets the opacity for all managed materials simultaneously. * * @param opacity - The opacity multiplier to apply (0.0 to 1.0) * * @remarks * Applies the opacity multiplier to all managed StateMaterial instances simultaneously. * * @example * ```typescript * // Set all materials to 50% of their original opacity * materialSet.setOpacity(0.5); * * // Make invisible or restore original opacity * materialSet.setOpacity(0.0); // invisible * materialSet.setOpacity(1.0); // original * ``` */ setOpacity(opacity: number): void; } //# sourceMappingURL=StateMaterial.d.ts.map