Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

r3f-native-orbitcontrols

Package Overview
Dependencies
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

r3f-native-orbitcontrols

OrbitControls for React Three Fiber in React Native

  • 1.0.12
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

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:

PropertyTypeDescription
cameraCameraread-only, available to onChange
enabledboolean
targetVector3
minPolarAnglenumberhow close you can orbit vertically
maxPolarAnglenumberhow far you can orbit vertically
minAzimuthAnglenumberhow close you can orbit horizontally
maxAzimuthAnglenumberhow far you can orbit horizontally
dampingFactornumberinertia factor
enableZoomboolean
zoomSpeednumber
minZoomnumber
maxZoomnumber
enableRotateboolean
rotateSpeednumber
enablePanboolean
panSpeednumber
ignoreQuickPressbooleanmay cause bugs when enabled*
onChange(event) => voidreceives 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.

Keywords

FAQs

Package last updated on 03 Apr 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc