DOCSEARCHbyAlgolia
Submit Docs

Holographic Material for Three.js

repository·main·Indexed 42 days ago

https://github.com/ektogamat/threejs-holographic-material

A React Three Fiber component version 1.0.0 that provides a customizable holographic material effect. It features Fresnel effects, scanlines, and signal animations, with adjustable properties for brightness, color, and blinking.

Tokens
1K
Snippets
3
Records
3
Agent score
4%

What's inside holographic-material

  1. Setup and use HolographicMaterial in React Three Fiber

    main

    To use the HolographicMaterial component, follow these three steps:

    1. Download the Material: Create a new file in your project and copy the contents from this gist.
    2. Import the material: Import the component from the file you just created.
    3. Add to a mesh: Place the <HolographicMaterial /> component inside a <mesh> alongside a geometry.

    Note: While the material works independently, it is recommended to use it with bloom effects to achieve a better glow and visual appeal.

    import HolographicMaterial from "./HolographicMaterial";

// ... inside your component
<mesh>
 <sphereGeometry />
 <HolographicMaterial />
</mesh>

  2. Integrate HolographicMaterial with LEVA for live tweaking

    main

    You can use the leva library to create a control panel for real-time parameter adjustment. Define your controls using useControls and spread the resulting object into the HolographicMaterial component.

    const holographicControls = useControls({
  fresnelAmount: { value: 0.45, min: 0.0, max: 1.0},
  fresnelOpacity: { value: 1.0, min: 0.0, max: 1.0},
  scanlineSize: { value: 8.0, min: 1.0, max: 15},
  hologramBrightness: { value: 1.2, min: 0.0, max: 2},
  signalSpeed: { value: 0.45, min: 0.0, max: 2},
  hologramOpacity: { value: 1.0, min: 0.0, max: 1.0},
  hologramColor: { value: "#51a4de"},
  enableBlinking: true,
  blinkFresnelOnly: true,
  enableAdditive: true,
  side: { options: ["FrontSide", "BackSide", "DoubleSide"] },
});

// ...
<HolographicMaterial {...holographicControls} />

  3. HolographicMaterial properties reference

    main

    The HolographicMaterial component accepts several props to customize the holographic effect. Overriding these will replace the default values.

    NameTypeDefaultDescription
    fresnelAmountNumber0.45Controls the Fresnel effect value (0.0 to 1.0).
    fresnelOpacityNumber1.0Controls the opacity of the Fresnel effect (0.0 to 1.0).
    scanlineSizeNumber8.0Controls the size of the scanlines (1 to 15).
    hologramBrightnessNumber1.2Controls the brightness (0.0 to 2.0).
    signalSpeedNumber0.45Controls the speed of the signal effect (0.0 to 2.0).
    hologramColorString"#51a4de"Hexadecimal color of the hologram.
    enableBlinkingBooleantrueEnables or disables the blinking effect.
    hologramOpacityNumber1.0Specifies the opacity of the hologram.
    blinkFresnelOnlyBooleantrueIf true, blinking only affects the Fresnel effect.
    sideString"FrontSide"Material side: "FrontSide", "BackSide", or "DoubleSide".
    enableAdditiveBoolean(not listed)(See usage examples for implementation).
    <HolographicMaterial
    fresnelAmount={0.2}
    fresnelOpacity={0.15}
    hologramBrightness={0.7}
    scanlineSize={6}
    signalSpeed={2.3}
    hologramColor={"#ff0000"}
    hologramOpacity={1.0}
    blinkFresnelOnly={true}
    enableBlinking={true}
    enableAdditive={true}
    side={"FrontSide"}
/>