{"id":16578756,"url":"https://github.com/ektogamat/threejs-holographic-material","last_synced_at":"2025-08-14T08:47:15.462Z","repository":{"id":209737561,"uuid":"724693274","full_name":"ektogamat/threejs-holographic-material","owner":"ektogamat","description":"A simple to use holographic material for React Three Fiber","archived":false,"fork":false,"pushed_at":"2024-03-25T19:27:36.000Z","size":2528,"stargazers_count":199,"open_issues_count":1,"forks_count":16,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-05T03:53:16.879Z","etag":null,"topics":["hologram","holographic","holography","react-three-fiber","threejs"],"latest_commit_sha":null,"homepage":"https://threejs-holographic-material.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ektogamat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-11-28T15:48:19.000Z","updated_at":"2025-04-28T04:00:07.000Z","dependencies_parsed_at":"2024-03-25T14:02:55.110Z","dependency_job_id":"d17a858f-50be-4d9d-9617-54002e2b8bb8","html_url":"https://github.com/ektogamat/threejs-holographic-material","commit_stats":null,"previous_names":["ektogamat/threejs-holographic-material"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ektogamat%2Fthreejs-holographic-material","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ektogamat%2Fthreejs-holographic-material/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ektogamat%2Fthreejs-holographic-material/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ektogamat%2Fthreejs-holographic-material/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ektogamat","download_url":"https://codeload.github.com/ektogamat/threejs-holographic-material/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253173640,"owners_count":21865726,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hologram","holographic","holography","react-three-fiber","threejs"],"created_at":"2024-10-11T22:15:35.588Z","updated_at":"2025-05-09T01:28:49.183Z","avatar_url":"https://github.com/ektogamat.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/andersonmancini"],"categories":[],"sub_categories":[],"readme":"# Holographic Material for React Three Fiber\n\nA simple to use holographic material for threejs\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://threejs-holographic-material.vercel.app/\" target=\"_blank\"\u003e\u003cimg src=\"https://threejs-holographic-material.vercel.app/preview.jpg\" width=\"100%\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nLive link: \u003ca href=\"https://threejs-holographic-material.vercel.app/\" target=\"_blank\"\u003ehttps://threejs-holographic-material.vercel.app/\u003c/a\u003e\n\nCode Sandbox example: \u003ca href=\"https://codesandbox.io/p/sandbox/holographic-material-for-react-three-fiber-rpjgps\" target=\"_blank\"\u003ehttps://codesandbox.io/p/sandbox/holographic-material-for-react-three-fiber-rpjgps\u003c/a\u003e\n\nCode Sandbox simplest example: \u003ca href=\"https://codesandbox.io/p/devbox/holographic-material-for-react-three-fiber-simple-example-hq24t2\" target=\"_blank\"\u003ehttps://codesandbox.io/p/devbox/holographic-material-for-react-three-fiber-simple-example-hq24t2\u003c/a\u003e\n\n# Introduction\n\nDive into a world of mesmerizing holographic wonders with the HolographicMaterial for React Three Fiber. This enchanting React component brings your virtual reality experiences to life, infusing them with a burst of vibrant colors, dynamic scanlines, and a touch of futuristic brilliance.\n\nWhile this component operates independently of any post-processing, it achieves an enhanced visual appeal when coupled with bloom effects. The utilization of bloom proves particularly effective in rendering a captivating glow effect, especially in areas where overexposure is prevalent.\n\n# HOW TO USE?\n\n### 1: Download the Material\n\nCreate a new file with the contents of [this gist](https://gist.github.com/ektogamat/f33dce31ee3ab02ea68f7b7c18ecd016) on your project.\n\n### 2: Import the material\n\n```\nimport HolographicMaterial from \"./HolographicMaterial\";\n```\n\n### 3: Add this as a material for your mesh\n\n```\n...\n\u003cmesh\u003e\n \u003csphereGeometry /\u003e\n \u003cHolographicMaterial /\u003e\n\u003c/mesh\u003e\n...\n\n```\n\nThat's all that you need to use this component. Of course you can customize it as shown bellow.\n\n# Properties\n\n| Name               | Type    | Default     | Description                                                                                                             |\n| ------------------ | ------- | ----------- | ----------------------------------------------------------------------------------------------------------------------- |\n| fresnelAmount      | Number  | 0.45        | Controls the value of the Fresnel effect. Ranges from 0.0 to 1.0.                                                       |\n| fresnelOpacity     | Number  | 1.0         | Controls the opacity of the Fresnel effect. Ranges from 0.0 to 1.0.                                                     |\n| scanlineSize       | Number  | 8.0         | Controls the size of the scanlines. Ranges from 1 to 15.                                                                |\n| hologramBrightness | Number  | 1.2         | Controls the brightness of the hologram. Ranges from 0.0 to 2.0.                                                        |\n| signalSpeed        | Number  | 0.45        | Controls the speed of the signal effect. Ranges from 0.0 to 2.0.                                                        |\n| hologramColor      | String  | \"#51a4de\"   | Specifies the color of the hologram. Use hexadecimal format.                                                            |\n| enableBlinking     | Boolean | true        | Enables or disables the blinking effect. Defaults to true.                                                              |\n| hologramOpacity    | Number  | 1.0         | Specifies the opacity of the hologram. Defaults to 1.0.                                                                 |\n| enableBlinking     | Boolean | true        | Enables or disables the blinking effect. Defaults to true.                                                              |\n| blinkFresnelOnly   | Boolean | true        | Enables or disables the blinking effect for the Fresnel only. Defaults to true.                                                      |\n| side               | String  | \"FrontSide\" | Specifies side for the material, as String. Options are \"FrontSide\", \"BackSide\", \"DoubleSide\". Defaults to \"FrontSide\". |\n\nHere is an example of how you can pass these props. If you pass any of those props, the default values will be overwritten.\n\n```\n\u003cHolographicMaterial\n    fresnelAmount={0.2}\n    fresnelOpacity={0.15}\n    hologramBrightness={0.7}\n    scanlineSize={6}\n    signalSpeed={2.3}\n    hologramColor={\"#ff0000\"}\n    hologramOpacity={1.0}\n    blinkFresnelOnly={true}\n    enableBlinking={true}\n    enableAdditive={true}\n    side={\"FrontSide\"}\n/\u003e\n```\n\nYou can also use LEVA to create a panel, like in the demo, so you can tweak the parameters live.\n\n```\n  const holographicControls = useControls({\n    fresnelAmount: { value: 0.45, min: 0.0, max: 1.0},\n    fresnelOpacity: { value: 1.0,min: 0.0, max: 1.0},\n    scanlineSize: { value: 8.0, min: 1.0, max: 15},\n    hologramBrightness: { value: 1.2, min: 0.0, max: 2},\n    signalSpeed: { value: 0.45, min: 0.0, max: 2},\n    hologramOpacity: { value: 1.0, min: 0.0, max: 1.0},\n    hologramColor: { value: \"#51a4de\"},\n    enableBlinking: true,\n    blinkFresnelOnly: true,\n    enableAdditive: true,\n    side: { options: [\"FrontSide\", \"BackSide\", \"DoubleSide\"] },\n  });\n```\n\nThen you can just spread this object to use it in HolographicMaterial\n\n```\n \u003cHolographicMaterial  {...holographicControls} /\u003e\n```\n\n### Show, don't tell\n\nHere you can [see a video with](https://www.youtube.com/watch?v=njJc-O_imb4) it in action and some options\n\n### Next steps\n\n- Adding an optional glitch effect\n- Adding support for a vertex shader distortion glitch\n- Adding support for video textures to be mapped as planes\n- Convert the shader into a texture on runtime for better performance\n\n### License\n\nThis component is an open-source creation released under the (MIT) license. While you're free to integrate and innovate with it, I would genuinely appreciate knowing when this HolographicMaterial component sparks creativity in your projects!\n\n### Resources\n\nResources: [Threejs](https://threejs.org/), [WebGL](https://github.com/KhronosGroup/WebGL), [React Three Fiber](https://docs.pmnd.rs/react-three-fiber/), [React three post processing](https://github.com/pmndrs/react-postprocessing)\n\n# Can you leave a star please?\n\nWould be really appreciated if you are willing to give me a star here on GitHub 🎉 or buy me a coffee ☕ https://www.buymeacoffee.com/andersonmancini. The money will be used to produce more content about threejs or to buy new courses.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fektogamat%2Fthreejs-holographic-material","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fektogamat%2Fthreejs-holographic-material","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fektogamat%2Fthreejs-holographic-material/lists"}