https://github.com/nickjs/remix-three

Utilities to integrate react-three-fiber into a remix.run app
https://github.com/nickjs/remix-three

Last synced: 3 months ago
JSON representation

Utilities to integrate react-three-fiber into a remix.run app

• Host: GitHub
• URL: https://github.com/nickjs/remix-three
• Owner: nickjs
• Created: 2022-05-25T07:16:07.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-05-29T21:06:33.000Z (over 2 years ago)
• Last Synced: 2024-07-07T07:02:43.209Z (4 months ago)
• Language: TypeScript
• Size: 94.7 KB
• Stars: 87
• Watchers: 9
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-remix - remix-three
• awesome-remix - remix-three

README

        
## remix-three

Hi! remix-three is a very tiny shim layer allowing you to render a `` from [`@react-three/fiber`](https://docs.pmnd.rs/react-three-fiber/) into a [Remix](https://remix.run) app, as well as render Remix ``s and calls to `useLoaderData()` _inside_ your ``.

This repo consists of three things:

1. A set of `patch-package` patches to make all the `@react-three/*` libraries play nice with the Remix compiler.

2. A `useRemixBridge` utility build on `@react-three/drei`'s `useContextBridge` that will replay all of the necessary Remix context values into the `` rendering fiber.

3. A `` component that allows you to have any object in your 3D scene participate in Remix navigation.

## Getting started

1. `npm i remix-three @react-three/[email protected] @react-three/[email protected] @remix-run/[email protected] patch-package`

2. Add the following to your `package.json`:

```json

{

  "scripts": {

    "postinstall": "patch-package --patch-dir node_modules/remix-three/patches"

  }

}

```

3. Use `useRemixBridge()` when you create your ``:

```tsx

// app/routes/canvas.tsx

import { useRemixBridge } from "remix-three";

export default function CanvasRoute() {

  let RemixBridge = useRemixBridge();

  return (

    

      

        

      

    

  );

}

function MyScene() {

  let matches = useMatches();

  let data = useLoaderData();

  let location = useLocation();

  return (

    

      

      

    

  );

}

```

> 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.

## Link3d

In general, this component takes the exact same props as a regular Remix `` but wraps an `Object3D` inside your scene. It works by invoking navigation directly in the same way a regular `` 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.

```tsx

import { Link3d } from 'remix-three'

function MyScene() {

	return (

		

			

				

				

			

		

		

	)

}

```