{"id":13719927,"url":"https://github.com/nickjs/remix-three","last_synced_at":"2025-10-25T17:58:09.953Z","repository":{"id":45798871,"uuid":"496123076","full_name":"nickjs/remix-three","owner":"nickjs","description":"Utilities to integrate react-three-fiber into a remix.run app","archived":false,"fork":false,"pushed_at":"2022-05-29T21:06:33.000Z","size":97,"stargazers_count":89,"open_issues_count":3,"forks_count":2,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-09-26T03:39:23.026Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/nickjs.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}},"created_at":"2022-05-25T07:16:07.000Z","updated_at":"2025-05-08T12:22:13.000Z","dependencies_parsed_at":"2022-07-17T05:46:15.305Z","dependency_job_id":null,"html_url":"https://github.com/nickjs/remix-three","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nickjs/remix-three","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickjs%2Fremix-three","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickjs%2Fremix-three/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickjs%2Fremix-three/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickjs%2Fremix-three/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nickjs","download_url":"https://codeload.github.com/nickjs/remix-three/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickjs%2Fremix-three/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280995962,"owners_count":26426667,"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","status":"online","status_checked_at":"2025-10-25T02:00:06.499Z","response_time":81,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-08-03T01:00:57.804Z","updated_at":"2025-10-25T17:58:09.905Z","avatar_url":"https://github.com/nickjs.png","language":"TypeScript","funding_links":[],"categories":["Utility"],"sub_categories":[],"readme":"## remix-three\n\nHi! remix-three is a very tiny shim layer allowing you to render a `\u003cCanvas\u003e` from [`@react-three/fiber`](https://docs.pmnd.rs/react-three-fiber/) into a [Remix](https://remix.run) app, as well as render Remix `\u003cOutlet\u003e`s and calls to `useLoaderData()` _inside_ your `\u003cCanvas\u003e`.\n\nThis repo consists of three things:\n\n1. A set of `patch-package` patches to make all the `@react-three/*` libraries play nice with the Remix compiler.\n2. A `useRemixBridge` utility build on `@react-three/drei`'s `useContextBridge` that will replay all of the necessary Remix context values into the `\u003cCanvas\u003e` rendering fiber.\n3. A `\u003cLink3d\u003e` component that allows you to have any object in your 3D scene participate in Remix navigation.\n\n## Getting started\n\n1. `npm i remix-three @react-three/fiber@8.0.19 @react-three/drei@9.11.3 @remix-run/react@1.5.1 patch-package`\n\n2. Add the following to your `package.json`:\n\n```json\n{\n  \"scripts\": {\n    \"postinstall\": \"patch-package --patch-dir node_modules/remix-three/patches\"\n  }\n}\n```\n\n3. Use `useRemixBridge()` when you create your `\u003cCanvas\u003e`:\n\n```tsx\n// app/routes/canvas.tsx\nimport { useRemixBridge } from \"remix-three\";\n\nexport default function CanvasRoute() {\n  let RemixBridge = useRemixBridge();\n\n  return (\n    \u003cCanvas\u003e\n      \u003cRemixBridge\u003e\n        \u003cMyScene /\u003e\n      \u003c/RemixBridge\u003e\n    \u003c/Canvas\u003e\n  );\n}\n\nfunction MyScene() {\n  let matches = useMatches();\n  let data = useLoaderData();\n  let location = useLocation();\n\n  return (\n    \u003cmesh\u003e\n      \u003cboxGeometry args={[1, 1, 1]} /\u003e\n      \u003cmeshNormalMaterial /\u003e\n    \u003c/mesh\u003e\n  );\n}\n```\n\n\u003e NB: You **must** split out your scene content into a separate component that you render _inside_ the RemixBridge in order to access anything from the remix or react-router context.\n\n## Link3d\n\nIn general, this component takes the exact same props as a regular Remix `\u003cLink\u003e` but wraps an `Object3D` inside your scene. It works by invoking navigation directly in the same way a regular `\u003cLink\u003e` would. It is totally possible this component may mess with your refs or click handlers of the child element, but I've done my best to avoid that.\n\n```tsx\nimport { Link3d } from 'remix-three'\n\nfunction MyScene() {\n\treturn (\n\t\t\u003cLink to=\"./author\"\u003e\n\t\t\t\u003cmesh\u003e\n\t\t\t\t\u003cboxGeometry args={[1, 1, 1]} /\u003e\n\t\t\t\t\u003cmeshNormalMaterial /\u003e\n\t\t\t\u003c/mesh\u003e\n\t\t\u003c/Link\u003e\n\n\t\t\u003cOutlet /\u003e\n\t)\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnickjs%2Fremix-three","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnickjs%2Fremix-three","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnickjs%2Fremix-three/lists"}