{"id":16578758,"url":"https://github.com/ektogamat/autofocusdof","last_synced_at":"2026-03-16T14:02:16.713Z","repository":{"id":153022589,"uuid":"627212113","full_name":"ektogamat/AutoFocusDOF","owner":"ektogamat","description":"Autofocus DOF component for React Three Fiber","archived":false,"fork":false,"pushed_at":"2024-02-16T12:20:49.000Z","size":3434,"stargazers_count":146,"open_issues_count":1,"forks_count":10,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-10T22:37:52.478Z","etag":null,"topics":["components","react","react-three-fiber","threejs"],"latest_commit_sha":null,"homepage":"https://autofocusdof.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"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":null,"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-04-13T02:23:42.000Z","updated_at":"2025-03-08T03:51:06.000Z","dependencies_parsed_at":"2023-12-03T20:32:23.520Z","dependency_job_id":null,"html_url":"https://github.com/ektogamat/AutoFocusDOF","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ektogamat%2FAutoFocusDOF","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ektogamat%2FAutoFocusDOF/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ektogamat%2FAutoFocusDOF/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ektogamat%2FAutoFocusDOF/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ektogamat","download_url":"https://codeload.github.com/ektogamat/AutoFocusDOF/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243830912,"owners_count":20354848,"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":["components","react","react-three-fiber","threejs"],"created_at":"2024-10-11T22:15:35.922Z","updated_at":"2026-03-16T14:02:11.673Z","avatar_url":"https://github.com/ektogamat.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/andersonmancini"],"categories":[],"sub_categories":[],"readme":"# ATTENTION PLEASE ⚠️:\nThis repository is now part of the default React Three Fiber Post Processing library. You can find how to use it here: https://docs.pmnd.rs/react-postprocessing/effects/autofocus. This repo still works (Dec 2023) but I will not update it anymore with new features. You can still use it if you want, but I recommend that you use the official version now because it is easier to use and will always be updated. I appreciate your interest in this project.\n\n## AutoFocusDOF Component for React Three Fiber\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://autofocusdof.vercel.app/\" target=\"_blank\"\u003e\u003cimg src=\"https://autofocusdof.vercel.app/autofocus.jpg\" width=\"100%\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nLive link with the demo of the component \u003ca href=\"https://autofocusdof.vercel.app\" target=\"_blank\"\u003ehttps://autofocusdof.vercel.app\u003c/a\u003e\n\nDownload link for the component: [Click here](https://gist.github.com/ektogamat/1b3a609051fe128762fd086d385ddf55)\n\n# Introduction\nThis component was created to make your life easier when creating a scene using React Three Fiber and the post processing effect to obtain an auto focus. It depends on @react-three/postprocessing to work, in addition to \u003cBvh\u003e to be able to scan objects on Canvas using a RayCaster to calculate the distance.\n\nThere are some options you can use:\n- bokehScale={10} //blur scale\n- resolution={1024} //resolution (might affect the performance)\n- mouseFocus //if false, the center of the screen will be the focus\n- focusSpeed={0.05} //milliseconds to focus a newly detected mesh\n- focalLength={0.01} //how far the focus should go\n\n\n# HOW TO USE?\n```\nimport AutoFocusDOF from './AutoFocusDOF'\n```\n\n## You can also create a file to hold the component yourself. Just copy and paste these lines.\n```\nimport { useRef } from 'react'\nimport { useFrame, useThree } from '@react-three/fiber'\nimport { DepthOfField } from '@react-three/postprocessing'\nimport { Raycaster, Vector2, Vector3 } from 'three'\n\nexport default function AutoFocusDOF(\n    { bokehScale = 10, \n    focalLength = 0.001, \n    focusSpeed = 0.05, \n    mouseFocus = false, \n    resolution = 512 \n    }) \n{\n    const { camera, mouse, scene } = useThree()\n\n    const ref = useRef()\n    const raycaster = new Raycaster()\n    const finalVector = new Vector3()\n\n    raycaster.firstHitOnly = true\n\n\n    useFrame((state) =\u003e {\n        if (mouseFocus) {\n            raycaster.setFromCamera(mouse, camera)\n        } else {\n            raycaster.setFromCamera(new Vector2(0, 0), camera)\n        }\n\n        const intersects = raycaster.intersectObjects(scene.children)\n\n        if (intersects.length \u003e 0) {\n            finalVector.lerp(intersects[0].point, focusSpeed)\n            ref.current.target = finalVector\n        }\n    });\n\n    return (\n        \u003cDepthOfField\n            focalLength={focalLength}\n            bokehScale={bokehScale}\n            height={resolution}\n            ref={ref}\n        /\u003e\n    );\n\n};\n\n```\n## And add this component inside the EffectsComposer...\n```\n\u003cEffectComposer\u003e\n \u003cAutoFocusDOF\n   bokehScale={10} //blur scale\n   resolution={1024} //resolution (decrease for performance)\n   mouseFocus //if false, the center of the screen will be the focus\n   focusSpeed={0.05} // milliseconds to focus a new detected mesh\n   focalLength={0.01} //how far the focus should go\n /\u003e\n\u003c/EffectComposer\u003e\n```\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# Show, don't tell \nHere you can see a video with it in action and some options\n\u003ca href=\"https://www.youtube.com/watch?v=vFlXcEGGtGs\" target=\"_blank\"\u003ehttps://www.youtube.com/watch?v=vFlXcEGGtGs\u003c/a\u003e\n\n# Getting Started using this demo project\nDownload and install Node.js on your computer (https://nodejs.org/en/download/).\n\nThen, open VSCODE, drag the project folder to it. Open VSCODE terminal and install dependencies (you need to do this only in the first time)\n```\nnpm install\n```\n\nRun this command in your terminal to open a local server at localhost:8080\n```\nnpm run dev\n```\n\u003chr/\u003e\n\n# Very Important!\nThis component is always searching for points on meshes and can have an impact on the performance if you are not using \u003cBvh\u003e. Using \u003cBvh\u003e is a must to use this component. Be sure to import \u003cBvh\u003e and to embrace all your scene with it\n\n### Example\n``` \n\u003cCanvas\u003e\n  \u003cBvh firstHitOnly\u003e\n    \u003c----Your Model /\u003e\n  \u003c/Bvh\u003e\n\u003c/Canvas\u003e\n```\n\n### KNOWN ISSUES\nIf you add components that covers the entire screen, like the Sparkles, the AutoFocus will see them and will not be able to focus in the objects behind them. Also, there is a problem preventing the Autofocus to work after a resize on the Canvas. I'm still working on this and plan to fix it soon.\n\n# Can you leave a star please?\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%2Fautofocusdof","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fektogamat%2Fautofocusdof","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fektogamat%2Fautofocusdof/lists"}