{"id":18764890,"url":"https://github.com/psygo/three-lab","last_synced_at":"2026-05-02T10:41:04.355Z","repository":{"id":212094531,"uuid":"730695950","full_name":"psygo/three-lab","owner":"psygo","description":"Three.js Lab with React, React Three Fiber, and Drei","archived":false,"fork":false,"pushed_at":"2023-12-24T13:00:00.000Z","size":493,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-29T05:43:03.548Z","etag":null,"topics":["drei","react-three-fiber","threejs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/psygo.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}},"created_at":"2023-12-12T13:31:46.000Z","updated_at":"2024-10-24T19:12:16.000Z","dependencies_parsed_at":"2023-12-24T14:20:55.594Z","dependency_job_id":"8eefca66-bdc4-4a5b-8779-7a79d9b0007d","html_url":"https://github.com/psygo/three-lab","commit_stats":null,"previous_names":["psygo/three-lab"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psygo%2Fthree-lab","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psygo%2Fthree-lab/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psygo%2Fthree-lab/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psygo%2Fthree-lab/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/psygo","download_url":"https://codeload.github.com/psygo/three-lab/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239662747,"owners_count":19676436,"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":["drei","react-three-fiber","threejs"],"created_at":"2024-11-07T18:31:56.596Z","updated_at":"2025-12-07T13:30:17.910Z","avatar_url":"https://github.com/psygo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Three Lab\n\nA lab for [Three.js](https://threejs.org/) things, with [React Three Fiber](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction), and [Drei](https://github.com/pmndrs/drei).\n\n## Things to Learn\n\n- Basic Techniques\n  - [x] Simple Scene\n  - [x] 3D Text\n  - [x] Camera Move with Transitions\n    - [Camera Zoom to Object](https://codesandbox.io/p/sandbox/three-fiber-zoom-to-object-camera-controls-solution-final-sbgx0?file=%2Fsrc%2FApp.js)\n  - [x] GLTF Loader\n  - [x] Reflective Surfaces\n    - [Beautiful Glossy Sphere](https://pierfrancesco-soffritti.medium.com/glossy-spheres-in-three-js-bfd2785d4857)\n    - [Drei Reflector](https://onion2k.github.io/r3f-by-example/examples/other/reflector/)\n    - [Clear Mirror with Spinning and Bouncing Shapes](https://threejs.org/examples/?q=mir#webgl_mirror)\n  - [x] Spinning\n  - [x] Environment Mapping\n- SVG\n  - [x] SVG to Shape\n    - [Three.js Examples - `SVGLoader`](https://threejs.org/examples/?q=svg#webgl_loader_svg)\n  - [ ] [SVG Mesh 3D](https://github.com/mattdesl/svg-mesh-3d)\n- Extrusion\n  - [x] Simple\n  - [ ] Extrusion from SVG\n    - [LogRocket - Extrusion from SVG](https://blog.logrocket.com/bringing-svgs-three-js-svgloader/)\n  - [ ] Rotational Extrusion\n  - [Super Cool Cylinder to Sphere Extrusion Sandbox](https://codesandbox.io/p/sandbox/r3f-extrude-cylinder-gdvrg?file=%2Fsrc%2Findex.js)\n- Post-Processing\n  - [x] [Bloom Filter on Hover](https://codesandbox.io/p/sandbox/bloom-hdr-workflow-gnn4yt?file=%2Fsrc%2FApp.js)\n  - [Crazy Cool Ring](https://codesandbox.io/p/sandbox/diamond-ring-forked-k9zqx8?file=%2Fsrc%2FApp.js)\n  - [Distort Material](https://codesandbox.io/p/sandbox/react-postprocessing-dof-blob-pqrpl?file=%2Fsrc%2FApp.js%3A102%2C14)\n- HTML and Text\n  - `\u003ciframe\u003e`\n    - [x] Positioning\n      - Mapping an `\u003ciframe\u003e` onto a Face\n        - You can't make it a texture actually.\n        - [`\u003ciframe\u003e` positionining with React Three Fiber](https://youtu.be/SQRqU3N3ehs)\n  - [Henry Heffernan's Portfolio](https://henryheffernan.com/)\n  - [3D HTML](https://discourse.threejs.org/t/how-can-i-embed-an-iframe-in-three-js-3d-modeling/44075/2)\n- Shaders\n  - [x] Simple\n  - [ ] Noise Shader on Top of an Existent Geometry (e.g. Cube)\n  - [ ] Galaxy Shader\n  - [Sun](https://youtu.be/3krH52AhPqk)\n- Physics\n  - [ ] Simple with Rapier\n  - [ ] Detect when Something Enters Somethings Else (e.g. a basket)\n- Others\n  - [x] Decal\n  - [x] Face Intersection (Hovering)\n    - [Stack Overflow - _Hover on Face with React Three Fiber_](https://stackoverflow.com/q/77679154/4756173)\n    - [Engine with Highlight on Hover](https://codesandbox.io/p/sandbox/react-pp-outlines-nurp5t?file=%2Fsrc%2FEngine.js%3A33%2C10)\n    - [Highlighting Triangles of Faces](https://jsfiddle.net/nkmqt3p2/)\n\n## References\n\n- [Three.js Journey](https://threejs-journey.com/#table-of-content)\n  - [Early Examples of Three.js Journey Made with R3F](https://journey.pmnd.rs/)\n- [React Three Fiber (R3F)](https://github.com/pmndrs/react-three-fiber)\n  - [Examples Gallery](https://docs.pmnd.rs/react-three-fiber/getting-started/examples)\n- [Drei](https://github.com/pmndrs/drei?tab=readme-ov-file)\n- [Leva GUI Debugging](https://github.com/pmndrs/leva)\n- [R3F-Perf](https://github.com/utsuboco/r3f-perf)\n- [Free Matcap Textures by emmelleppi](https://github.com/emmelleppi/matcaps)\n- [SVG to Mesh 3D](https://github.com/mattdesl/svg-mesh-3d?tab=readme-ov-file)\n- [SBCode Tutorials](https://sbcode.net/threejs/raycast-to-displacementmap/)\n- [React Three Rapier (Physics Library)](https://github.com/pmndrs/react-three-rapier)\n- Shaders:\n  - Yuri Artiukh\n    - [Fake 3D Image Effect with WebGL](https://github.com/akella/fake3d?tab=readme-ov-file)\n    - [Yuri Artiukh's YouTube Channel](https://www.youtube.com/@akella_)\n  - Maxime Heckel\n    - [Magical World of Particles](https://blog.maximeheckel.com/posts/the-magical-world-of-particles-with-react-three-fiber-and-shaders/)\n    - [Frame Buffer Objects (FBO) for handling 100k+ particles](https://blog.maximeheckel.com/posts/the-magical-world-of-particles-with-react-three-fiber-and-shaders/)\n    - [Maxime's Showcase of Examples](https://r3f.maximeheckel.com/caustics)\n  - [Zoom Distort Effect on Image](https://codesandbox.io/p/sandbox/react-three-fiber-hover-zoom-channel-displacement-4o8gj?file=%2Fsrc%2Findex.js)\n- Physics\n  - [Snap to 2D Grid when moving](https://codesandbox.io/p/sandbox/plane-project-uexjm?file=%2Fsrc%2FApp.js%3A39%2C2)\n  - [Bowling](https://codesandbox.io/p/sandbox/bowling-with-react-three-fiber-react-three-rapier-rpgjiy?file=%2Fsrc%2FApp.jsx)\n  - [Pacman Bowl](https://codesandbox.io/p/sandbox/rapier-physics-7e9y1b?file=%2Fsrc%2FApp.js)\n  - [Basic Rapier Physics Guide by Wawa Sensei](https://youtu.be/OpYtwrtpePY)\n  - [Wawa Sensei - How to use a GLTF file to animate a model](https://youtu.be/2W_VR92Pqgs)\n- Other Articles and Resources:\n  - [Henry Heffernan's Portfolio](https://henryheffernan.com/)\n  - [Varun Vachhar on Shaders](https://varun.ca/modular-webgl/)\n  - [Wawa Sensei - Mesh Explosion Effect](https://youtu.be/If8Cl2NSNZU)\n  - [Twist Mesh](https://stackoverflow.com/a/39767668/4756173)\n  - [Shear Mesh](https://stackoverflow.com/a/25647543/4756173)\n  - [Text Moebius](https://tympanus.net/codrops/2023/01/20/rotating-twisted-3d-typography-with-three-js-and-shaders/)\n  - [Wawa Sensei - Mesh Portal Material](https://youtu.be/2W_VR92Pqgs)\n  - [2D Grid Snap](https://codesandbox.io/p/sandbox/plane-project-uexjm?file=%2Fsrc%2FApp.js)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpsygo%2Fthree-lab","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpsygo%2Fthree-lab","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpsygo%2Fthree-lab/lists"}