Skip to content

OrbitControls for React Three Fiber in React Native

License

Notifications You must be signed in to change notification settings

TiagoCavalcante/r3f-native-orbitcontrols

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

54 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

r3f-native-orbitcontrols

Version Downloads License Ziped size

OrbitControls for React Three Fiber in React Native

Install

r3f-native-orbitcontrols is distributed as a npm package and can be installed as follows:

// with npm
npm install r3f-native-orbitcontrols
// with yarn
yarn add r3f-native-orbitcontrols

Example

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.:
    //   <View style={{ flex: 1 }} />
    <View {...events}>
      <Canvas>
        <OrbitControls />

        {/* Place the scene elements here as usual */}
      </Canvas>
    </View>
  )
}

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 (
    <View {...events}>
      <Canvas camera={camera}>
        <OrbitControls />
      </Canvas>
      <Canvas camera={camera}>
        <OrbitControls />
      </Canvas>
    </View>
  )
}

You can find an example app here.

Options

The <OrbitControls /> 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.

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

Why not use 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.