Fix onChange types

lib/index.cjs

@@ -58,7 +58,10 @@ var STATE = {
 var partialScope = {
     camera: undefined,
     enabled: true,
-    target: new three.Vector3(),
+    // We will override this later. A new vector ins't created here because it
+    // could cause problems when there is more than one controls on the screen
+    // (which could share the same `target` object, if we created it here).
+    target: undefined,
     minZoom: 0,
     maxZoom: Infinity,
     // How far you can orbit vertically, upper and lower limits.
@@ -82,7 +85,7 @@ var partialScope = {
 };
 function createControls() {
     var height = 0;
-    var scope = __assign(__assign({}, partialScope), { onChange: function (event) { } });
+    var scope = __assign(__assign({}, partialScope), { target: new three.Vector3(), onChange: function (event) { } });
     var internals = {
         moveStart: new three.Vector3(),
         rotateStart: new three.Vector2(),

lib/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_native from "react-native"
 import { GestureResponderEvent, LayoutChangeEvent } from "react-native"
 import React from "react"
-import { PerspectiveCamera, OrthographicCamera, Vector3, Matrix4 } from "three"
+import { Vector3, PerspectiveCamera, OrthographicCamera, Matrix4 } from "three"
 
 declare const partialScope: {
   camera: PerspectiveCamera | OrthographicCamera | undefined
@@ -24,10 +24,10 @@ declare const partialScope: {
 }
 declare function createControls(): {
   scope: {
+    target: Vector3
     onChange: (event: { target: typeof partialScope }) => void
     camera: PerspectiveCamera | OrthographicCamera | undefined
     enabled: boolean
-    target: Vector3
     minZoom: number
     maxZoom: number
     minPolarAngle: number

lib/index.esm.js

@@ -56,7 +56,10 @@ var STATE = {
 var partialScope = {
     camera: undefined,
     enabled: true,
-    target: new Vector3(),
+    // We will override this later. A new vector ins't created here because it
+    // could cause problems when there is more than one controls on the screen
+    // (which could share the same `target` object, if we created it here).
+    target: undefined,
     minZoom: 0,
     maxZoom: Infinity,
     // How far you can orbit vertically, upper and lower limits.
@@ -80,7 +83,7 @@ var partialScope = {
 };
 function createControls() {
     var height = 0;
-    var scope = __assign(__assign({}, partialScope), { onChange: function (event) { } });
+    var scope = __assign(__assign({}, partialScope), { target: new Vector3(), onChange: function (event) { } });
     var internals = {
         moveStart: new Vector3(),
         rotateStart: new Vector2(),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "r3f-native-orbitcontrols",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "OrbitControls for React Three Fiber in React Native",
   "type": "module",
   "types": "./lib/index.d.ts",

src/OrbitControls.tsx

@@ -23,6 +23,11 @@ const partialScope = {
 
   enabled: true,
 
+  // We will override this later. A new vector ins't created here because it
+  // could cause problems when there is more than one controls on the screen
+  // (which could share the same `target` object, if we created it here).
+  target: undefined as unknown as Vector3,
+
   minZoom: 0,
   maxZoom: Infinity,
 
@@ -148,7 +153,7 @@ export function createControls() {
       if (event.nativeEvent.touches.length === 1) {
         internals.rotateStart.set(
           event.nativeEvent.touches[0].locationX,
-          event.nativeEvent.touches[0].locationY
+          event.nativeEvent.touches[0].locationY,
         )
       } else if (event.nativeEvent.touches.length === 2) {
         const x =
@@ -183,7 +188,7 @@ export function createControls() {
       if (event.nativeEvent.touches.length === 1) {
         internals.panStart.set(
           event.nativeEvent.touches[0].locationX,
-          event.nativeEvent.touches[0].locationY
+          event.nativeEvent.touches[0].locationY,
         )
       } else if (event.nativeEvent.touches.length === 2) {
         const x =
@@ -237,7 +242,7 @@ export function createControls() {
       if (event.nativeEvent.touches.length === 1) {
         internals.rotateEnd.set(
           event.nativeEvent.locationX,
-          event.nativeEvent.locationY
+          event.nativeEvent.locationY,
         )
       } else if (event.nativeEvent.touches.length === 2) {
         const x =
@@ -282,7 +287,7 @@ export function createControls() {
 
         internals.dollyEnd = distance
         this.dollyOut(
-          Math.pow(internals.dollyEnd / internals.dollyStart, scope.zoomSpeed)
+          Math.pow(internals.dollyEnd / internals.dollyStart, scope.zoomSpeed),
         )
         internals.dollyStart = internals.dollyEnd
       }
@@ -331,7 +336,7 @@ export function createControls() {
         // we use only height here so aspect ratio does not distort speed
         this.panLeft(
           (2 * deltaX * targetDistance) / height,
-          scope.camera.matrix
+          scope.camera.matrix,
         )
         this.panUp((2 * deltaY * targetDistance) / height, scope.camera.matrix)
       }
@@ -341,7 +346,7 @@ export function createControls() {
       if (event.nativeEvent.touches.length === 1) {
         internals.panEnd.set(
           event.nativeEvent.locationX,
-          event.nativeEvent.locationY
+          event.nativeEvent.locationY,
         )
       } else if (event.nativeEvent.touches.length === 2) {
         const x =
@@ -405,7 +410,7 @@ export function createControls() {
       // so camera.up is the orbit axis
       const quat = new Quaternion().setFromUnitVectors(
         scope.camera.up,
-        new Vector3(0, 1, 0)
+        new Vector3(0, 1, 0),
       )
       const quatInverse = quat.clone().invert()
 
@@ -437,7 +442,7 @@ export function createControls() {
         if (min <= max) {
           internals.spherical.theta = Math.max(
             min,
-            Math.min(max, internals.spherical.theta)
+            Math.min(max, internals.spherical.theta),
           )
         } else {
           internals.spherical.theta =
@@ -450,7 +455,7 @@ export function createControls() {
       // restrict phi to be between desired limits
       internals.spherical.phi = Math.max(
         scope.minPolarAngle + EPSILON,
-        Math.min(scope.maxPolarAngle - EPSILON, internals.spherical.phi)
+        Math.min(scope.maxPolarAngle - EPSILON, internals.spherical.phi),
       )
 
       if ((scope.camera as PerspectiveCamera).isPerspectiveCamera) {
@@ -459,17 +464,17 @@ export function createControls() {
         scope.camera.zoom = Math.max(
           Math.min(
             scope.camera.zoom / (internals.scale * scope.zoomSpeed),
-            scope.maxZoom
+            scope.maxZoom,
           ),
-          scope.minZoom
+          scope.minZoom,
         )
         scope.camera.updateProjectionMatrix()
       }
 
       // restrict radius to be between desired limits
       internals.spherical.radius = Math.max(
         scope.minZoom,
-        Math.min(scope.maxZoom, internals.spherical.radius)
+        Math.min(scope.maxZoom, internals.spherical.radius),
       )
 
       // move target to panned location