Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tiagocavalcante/r3f-native-orbitcontrols
OrbitControls for React Three Fiber in React Native
https://github.com/tiagocavalcante/r3f-native-orbitcontrols
orbitcontrols r3f react-native
Last synced: 2 days ago
JSON representation
OrbitControls for React Three Fiber in React Native
- Host: GitHub
- URL: https://github.com/tiagocavalcante/r3f-native-orbitcontrols
- Owner: TiagoCavalcante
- License: mit
- Created: 2022-04-17T21:55:05.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-16T10:40:23.000Z (3 months ago)
- Last Synced: 2024-10-30T04:49:50.941Z (16 days ago)
- Topics: orbitcontrols, r3f, react-native
- Language: JavaScript
- Homepage:
- Size: 88.9 KB
- Stars: 72
- Watchers: 5
- Forks: 10
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# r3f-native-orbitcontrols
OrbitControls for [React Three Fiber](https://github.com/pmndrs/react-three-fiber) in React Native
## Install
r3f-native-orbitcontrols is distributed as a [npm package](https://www.npmjs.com/package/r3f-native-orbitcontrols) and can be installed as follows:
```
// with npm
npm install r3f-native-orbitcontrols
// with yarn
yarn add r3f-native-orbitcontrols
```
## Example
```jsx
import useControls from "r3f-native-orbitcontrols"
import { Canvas } from "@react-three/fiber/native"
import { View } from "react-native"
// The import below is used only in Canvases:
import { PerspectiveCamera } from "three"
function SingleCanvas() {
const [OrbitControls, events] = useControls()
return (
// If this isn't working check if you have set the size of the View.
// The easiest way to do it is to use the full size, e.g.:
//
{/* Place the scene elements here as usual */}
)
}
function Canvases() {
// You also can use the same OrbitControls for multiple canvases
// creating an effect like the game
// The Medium (https://store.steampowered.com/app/1293160)
const [OrbitControls, events] = useControls()
// In this case the same camera must be used in all the canvases
const camera = new PerspectiveCamera()
// You need to configure the camera too. Follow three.js' documentation.
// Default configuration:
// camera.position.set(10, 10, 10)
// camera.lookAt(0, 0, 0)
return (
)
}
```
You can find an example app [here](https://github.com/TiagoCavalcante/r3f-orbitcontrols-example).
## Options
The `` element _may_ receive the following properties:
| Property | Type | Description |
| :--------------- | :-------------: | ----------------------------------------------: |
| camera | Camera | read-only, available to onChange |
| enabled | boolean | |
| target | Vector3 | |
| minPolarAngle | number | how close you can orbit vertically |
| maxPolarAngle | number | how far you can orbit vertically |
| minAzimuthAngle | number | how close you can orbit horizontally |
| maxAzimuthAngle | number | how far you can orbit horizontally |
| dampingFactor | number | inertia factor |
| enableZoom | boolean | |
| zoomSpeed | number | |
| minZoom | number | |
| maxZoom | number | |
| enableRotate | boolean | |
| rotateSpeed | number | |
| enablePan | boolean | |
| panSpeed | number | |
| ignoreQuickPress | boolean | may cause bugs when enabled\* |
| onChange | (event) => void | receives an event with all the properties above |
You can find the defaults for each option [here](https://github.com/TiagoCavalcante/r3f-native-orbitcontrols/blob/7468e516a17c279f65b2f6a681d1aa6e655b6746/src/OrbitControls.tsx#L21-L55).
\*: This option is **not** recommended in modern devices. It's only useful in older devices, which don't propagate touch events to prevent "bubbling". You can find more information about this [here](https://github.com/TiagoCavalcante/r3f-native-orbitcontrols/blob/7468e516a17c279f65b2f6a681d1aa6e655b6746/src/OrbitControls.tsx#L87-L120).
## Why not use [drei](https://github.com/pmndrs/drei)'s OrbitControls?
The answer is very simple: they don't work on native, only on the web and (much) older versions of [React Three Fiber](https://github.com/pmndrs/react-three-fiber).