Zappar for React Three v2.4.7

README.md

@@ -22,48 +22,9 @@ You may also be interested in:
 <summary>Click to expand table of contents</summary>
 
 <!--ts-->
-   * [Zappar for React Three Fiber](#zappar-for-react-three-fiber)
-      * [Table Of Contents](#table-of-contents)
-      * [Getting Started](#getting-started)
-         * [Bootstrap Projects](#bootstrap-projects)
-            * [GitHub](#github)
-            * [create-react-app](#create-react-app)
-         * [Example Projects](#example-projects)
-      * [Starting Development](#starting-development)
-         * [NPM](#npm)
-      * [Overview](#overview)
-      * [Local Preview and Testing](#local-preview-and-testing)
-      * [Compatibility and Browser Support](#compatibility-and-browser-support)
-         * [Detecting Browser Compatibility](#detecting-browser-compatibility)
-      * [Publishing and Hosting Content](#publishing-and-hosting-content)
-         * [Licensing](#licensing)
-      * [Setting up the Canvas](#setting-up-the-canvas)
-      * [Setting up the Camera](#setting-up-the-camera)
-      * [Advanced Usage](#advanced-usage)
-         * [Custom Video Device](#custom-video-device)
-         * [First Frame](#first-frame)
-         * [Setting the default camera](#setting-the-default-camera)
-         * [User Facing Camera](#user-facing-camera)
-         * [Mirroring the Camera](#mirroring-the-camera)
-         * [Realtime Camera-based Reflections](#realtime-camera-based-reflections)
-         * [Camera Pose](#camera-pose)
-      * [Tracking](#tracking)
-         * [Image Tracking](#image-tracking)
-            * [Target File](#target-file)
-            * [Events](#events)
-         * [Face Tracking](#face-tracking)
-            * [Events](#events-1)
-         * [Face Landmarks](#face-landmarks)
-         * [Face Mesh](#face-mesh)
-         * [Head Masking](#head-masking)
-         * [Instant World Tracking](#instant-world-tracking)
-            * [Default Placement UI](#default-placement-ui)
-      * [Loading UI](#loading-ui)
-      * [Usage with react-router-dom](#usage-with-react-router-dom)
-      * [Integrating into an existing create-react-app project](#integrating-into-an-existing-create-react-app-project)
-      * [Links and Resources](#links-and-resources)
-
-<!-- Added by: zapparadmin, at: Thu Jul  6 13:00:26 BST 2023 -->
+
+
+<!-- Added by: zapparadmin, at: Thu 19 Oct 2023 12:53:28 BST -->
 
 <!--te-->
 

package.json

@@ -99,7 +99,7 @@
   },
   "dependencies": {
     "@juggle/resize-observer": "3.3.1",
-    "@zappar/zappar-threejs": "2.4.3",
+    "@zappar/zappar-threejs": "2.4.6",
     "react-merge-refs": "1.1.0",
     "zustand": "4.1.1"
   }

src/Components/ZapparCamera.tsx

@@ -33,8 +33,26 @@ const ZapparCamera = forwardRef((props: Props.Camera, ref) => {
   const { gl, set } = useThree((state) => state);
 
   const hadFirstFrame = React.useRef(false);
+  const [cameraInitialized, setCameraInitialized] = useState(false);
 
   const [cameraTexture] = useState(new CameraTexture());
+
+  const cameraRef = React.useRef<ZapparThree.Camera>();
+
+  const camera = React.useMemo(() => {
+    const cam = new ZapparThree.Camera({
+      pipeline,
+      userCameraSource: sources?.userCamera,
+      rearCameraSource: sources?.rearCamera,
+      backgroundTexture: cameraTexture,
+    });
+    // Noop for resize.
+    (cam as any).updateProjectionMatrix = () => {};
+    cameraRef.current = cam;
+    setCameraInitialized(true);
+    return cam;
+  }, [pipeline, sources, cameraTexture]);
+
   const cameraEnvMap = useMemo(() => {
     return environmentMap ? new ZapparThree.CameraEnvironmentMap() : undefined;
   }, [environmentMap]);
@@ -43,8 +61,6 @@ const ZapparCamera = forwardRef((props: Props.Camera, ref) => {
     if (backgroundImageProps && cameraTexture) Object.assign(cameraTexture, backgroundImageProps);
   }, [backgroundImageProps, cameraTexture]);
 
-  const cameraRef = React.useRef<ZapparThree.Camera>();
-
   const [permissionGranted, setPermissionGranted] = useState<boolean>(false);
 
   const store = {
@@ -64,19 +80,19 @@ const ZapparCamera = forwardRef((props: Props.Camera, ref) => {
   }, [makeDefault]);
 
   useEffect(() => {
-    if (!cameraRef.current) return;
-    store.camera.set(cameraRef.current);
+    if (!camera || !cameraInitialized) return;
+    store.camera.set(camera);
     if (!start) return;
     if (permissionGranted || !permissionRequest) {
-      cameraRef.current!.start(userFacing);
+      camera.start(userFacing);
     } else {
       ZapparThree.permissionRequestUI().then((granted) => {
         setPermissionGranted(granted);
-        if (granted) cameraRef.current!.start(userFacing);
+        if (granted) camera.start(userFacing);
         else ZapparThree.permissionDeniedUI();
       });
     }
-  }, [userFacing, permissionRequest, start]);
+  }, [userFacing, permissionRequest, start, cameraInitialized]);
 
   useEffect(() => {
     if (!cameraRef.current) return;
@@ -135,18 +151,6 @@ const ZapparCamera = forwardRef((props: Props.Camera, ref) => {
     }
   }, renderPriority);
 
-  const camera = React.useMemo(() => {
-    const cam = new ZapparThree.Camera({
-      pipeline,
-      userCameraSource: sources?.userCamera,
-      rearCameraSource: sources?.rearCamera,
-      backgroundTexture: cameraTexture,
-    });
-    // Noop for resize.
-    (cam as any).updateProjectionMatrix = () => {};
-    return cam;
-  }, [pipeline, sources, cameraTexture]);
-
   return (
     <>
       <primitive dispose={null} object={cameraTexture} attach="background" />

src/version.ts

@@ -1,5 +1,5 @@
 /**
  * SDK version.
  */
-const VERSION = "2.4.3";
+const VERSION = "2.4.7";
 export default VERSION;