{"id":15204139,"url":"https://github.com/amitdiamant/magnify-3d","last_synced_at":"2025-10-29T05:31:25.345Z","repository":{"id":65420393,"uuid":"172216372","full_name":"amitdiamant/magnify-3d","owner":"amitdiamant","description":"Real time Javascript optic magnifying glass library.","archived":false,"fork":false,"pushed_at":"2019-03-04T22:23:16.000Z","size":1351,"stargazers_count":46,"open_issues_count":1,"forks_count":11,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-09-29T05:21:53.892Z","etag":null,"topics":["javascript","magnify","magnifying-glass","three-js","zoom"],"latest_commit_sha":null,"homepage":"https://amitdiamant.github.io/magnify-3d","language":"GLSL","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/amitdiamant.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}},"created_at":"2019-02-23T13:15:50.000Z","updated_at":"2024-02-21T00:44:26.000Z","dependencies_parsed_at":"2023-01-22T19:25:10.770Z","dependency_job_id":null,"html_url":"https://github.com/amitdiamant/magnify-3d","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amitdiamant%2Fmagnify-3d","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amitdiamant%2Fmagnify-3d/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amitdiamant%2Fmagnify-3d/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amitdiamant%2Fmagnify-3d/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amitdiamant","download_url":"https://codeload.github.com/amitdiamant/magnify-3d/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219858317,"owners_count":16556047,"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":["javascript","magnify","magnifying-glass","three-js","zoom"],"created_at":"2024-09-28T05:21:58.096Z","updated_at":"2025-10-29T05:31:24.948Z","avatar_url":"https://github.com/amitdiamant.png","language":"GLSL","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n[![version](https://img.shields.io/badge/version-1.0.4-green.svg)](https://semver.org)\n\n## Magnify 3d\nReal time optic magnifying glass for [three.js](https://github.com/mrdoob/three.js).\nGet a high-res zoomed section of your 3d scene, with a single API.\n\n## Demo\n- [Live Demo](https://amitdiamant.github.io/magnify-3d)\n- [Sample Code](sample/index.js#L165)\n\n## Install\n```$ npm install magnify-3d --save ```\n\n## Usage\n```js\nimport Magnify3d from 'magnify-3d';\n\nconst magnify3d = new Magnify3d();\n\nmagnify3d.render({\n\n    renderer: renderer,\n    \n    pos: { mouse.x, mouse.y },\n    \n    renderSceneCB: (target) =\u003e {\n    \n        renderer.render(scene, camera, target);\n      \n    }\n    \n});\n```\n\n## Options\n| Name | Type | Default | Mandatory | Description|\n| - | - | - | - | - |\n| `renderer` | WebGLRenderer | | V | The renderer used to render the original scene. |\n| `renderSceneCB` | function | | V | A callback function used for rendering the original scene on a zoomed target. |\n| `pos`  | { x, y } | | V | Position of the magnifying glass in client coordinates. |\n| `zoom`  | number | 2.0 | | Zoom factor of the magnifying glass. |\n| `exp`  | number | 35.0 | | Exponent used to calculate the glass' shape. Higher `exp` value means flatter glass shape. |\n| `radius`  | number | 100.0 | | Radius of the magnifying glass in pixels. |\n| `outlineColor`  | hex | 0xcccccc | | Color of the glass' outline. |\n| `outlineThickness`  | number | 8.0 | | Thickness of the glass' outline in pixels. Can be set to 0. |\n| `antialias` | Boolean | true | | Whether to add an antialiasing pass or not. |\n| `inputBuffer`  | WebGLRenderTarget | | | Buffer filled with the original scene render. In case `inputBuffer` is not supplied, the canvas will be the input buffer.|\n| `outputBuffer`  | WebGLRenderTarget | | | Render target. In case `outputBuffer` is not supplied, the output will be directly on the screen.|\n  \n                \n## Contribute\nIf you have a feature request, please add it as an issue or make a pull request.\n\n## References\n- [three.js](https://github.com/mrdoob/three.js)\n- [Fast Approximate Anti-Aliasing](https://github.com/mrdoob/three.js/blob/dev/examples/js/shaders/FXAAShader.js)\n- [Teapot Geometry](https://github.com/mrdoob/three.js/blob/dev/examples/js/geometries/TeapotBufferGeometry.js)\n\n## License\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famitdiamant%2Fmagnify-3d","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famitdiamant%2Fmagnify-3d","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famitdiamant%2Fmagnify-3d/lists"}