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

    Class StateMaterial

    An opacity management class for Three.js materials in interactive states.

    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.

    • 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
    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

    StateMaterialSet - Container class that manages multiple StateMaterial instances

    Index

    Constructors

    constructor

    Accessors

    material

    Methods

    setOpacity

    Constructors

    Accessors

    Methods

    • Sets the opacity of the managed material(s).

      Parameters

      • opacity: number

        The opacity multiplier (0.0 to 1.0)

      Returns void

      Uses preserved original opacity values for proportional scaling.

      // Set to 50% of original opacity
      stateMaterial.setOpacity(0.5);

      // Make completely transparent
      stateMaterial.setOpacity(0.0);

      // Restore original opacity
      stateMaterial.setOpacity(1.0);

    Settings

    Member Visibility

    On This Page

    Constructors
    Accessors
    Methods