diff --git a/README.md b/README.md index 1072704..e2f61ca 100644 --- a/README.md +++ b/README.md @@ -22,48 +22,9 @@ You may also be interested in: Click to expand table of contents - * [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) - - + + + diff --git a/package-lock.json b/package-lock.json index cb44af7..fce296e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "license": "MIT", "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" }, @@ -2403,32 +2403,32 @@ } }, "node_modules/@zappar/zappar": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/@zappar/zappar/-/zappar-2.2.2.tgz", - "integrity": "sha512-EdBM1lrYAhuiBtKHWFTIbNjUFdubURchovag6RuurtqvbmybjQ0SOCkWKn7AAKxSDwZo/fUXvMdMQLs3+ob+0A==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@zappar/zappar/-/zappar-2.2.3.tgz", + "integrity": "sha512-+e5FCTo+8EtD0NG1MhwsjE1K9nfcBLJWcL5vTluVhVWQfV3E6Rq/qAA9GQfaWD61JT3gS14ueAvE5LRz1PaK2A==", "dependencies": { - "@zappar/zappar-cv": "2.1.4", + "@zappar/zappar-cv": "2.1.5", "gl-matrix": "3.4.3" } }, "node_modules/@zappar/zappar-cv": { - "version": "2.1.4", - "resolved": "https://registry.npmjs.org/@zappar/zappar-cv/-/zappar-cv-2.1.4.tgz", - "integrity": "sha512-gtNR5fG1kPfq2ehZNJUMuXkkHhVS70QZJUE1UZXuBIgQy/4OVIr+Ygn1RT11kz7aVJG1L2ycyjcfwITOJcRrmw==", + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/@zappar/zappar-cv/-/zappar-cv-2.1.5.tgz", + "integrity": "sha512-4F/AC/G+MvIhnJ9djuF/ctd4YlKO92jZFUE0/EauXk9LWUWxS/ZqlqpvjL08pBvYGvK1HNXGuNVeD3h5jProPg==", "dependencies": { "gl-matrix": "3.4.3", "ua-parser-js": "1.0.33" } }, "node_modules/@zappar/zappar-threejs": { - "version": "2.4.3", - "resolved": "https://registry.npmjs.org/@zappar/zappar-threejs/-/zappar-threejs-2.4.3.tgz", - "integrity": "sha512-yt9qsswbTm/8i3ZZVHVxJ/7FpIqdS30lvBzKhfGOOWZTFuH5FrU0j7/bZNGhJyaErYKacOEQ6Vg3kVBCsehI2Q==", + "version": "2.4.6", + "resolved": "https://registry.npmjs.org/@zappar/zappar-threejs/-/zappar-threejs-2.4.6.tgz", + "integrity": "sha512-j0neM3RwfrKDZkYMA0GUKMmAvjhflFkewUYic0ewp7ipH7V6tEYLggdaqmJ95ug4025j+nQNI83rGQHFb8hLwQ==", "dependencies": { - "@zappar/zappar": "2.2.2" + "@zappar/zappar": "2.2.3" }, "peerDependencies": { - "three": "0.118.0 - 0.153.0" + "three": "0.118.0 - 0.157.0" } }, "node_modules/abab": { @@ -13558,29 +13558,29 @@ } }, "@zappar/zappar": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/@zappar/zappar/-/zappar-2.2.2.tgz", - "integrity": "sha512-EdBM1lrYAhuiBtKHWFTIbNjUFdubURchovag6RuurtqvbmybjQ0SOCkWKn7AAKxSDwZo/fUXvMdMQLs3+ob+0A==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@zappar/zappar/-/zappar-2.2.3.tgz", + "integrity": "sha512-+e5FCTo+8EtD0NG1MhwsjE1K9nfcBLJWcL5vTluVhVWQfV3E6Rq/qAA9GQfaWD61JT3gS14ueAvE5LRz1PaK2A==", "requires": { - "@zappar/zappar-cv": "2.1.4", + "@zappar/zappar-cv": "2.1.5", "gl-matrix": "3.4.3" } }, "@zappar/zappar-cv": { - "version": "2.1.4", - "resolved": "https://registry.npmjs.org/@zappar/zappar-cv/-/zappar-cv-2.1.4.tgz", - "integrity": "sha512-gtNR5fG1kPfq2ehZNJUMuXkkHhVS70QZJUE1UZXuBIgQy/4OVIr+Ygn1RT11kz7aVJG1L2ycyjcfwITOJcRrmw==", + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/@zappar/zappar-cv/-/zappar-cv-2.1.5.tgz", + "integrity": "sha512-4F/AC/G+MvIhnJ9djuF/ctd4YlKO92jZFUE0/EauXk9LWUWxS/ZqlqpvjL08pBvYGvK1HNXGuNVeD3h5jProPg==", "requires": { "gl-matrix": "3.4.3", "ua-parser-js": "1.0.33" } }, "@zappar/zappar-threejs": { - "version": "2.4.3", - "resolved": "https://registry.npmjs.org/@zappar/zappar-threejs/-/zappar-threejs-2.4.3.tgz", - "integrity": "sha512-yt9qsswbTm/8i3ZZVHVxJ/7FpIqdS30lvBzKhfGOOWZTFuH5FrU0j7/bZNGhJyaErYKacOEQ6Vg3kVBCsehI2Q==", + "version": "2.4.6", + "resolved": "https://registry.npmjs.org/@zappar/zappar-threejs/-/zappar-threejs-2.4.6.tgz", + "integrity": "sha512-j0neM3RwfrKDZkYMA0GUKMmAvjhflFkewUYic0ewp7ipH7V6tEYLggdaqmJ95ug4025j+nQNI83rGQHFb8hLwQ==", "requires": { - "@zappar/zappar": "2.2.2" + "@zappar/zappar": "2.2.3" } }, "abab": { diff --git a/package.json b/package.json index bb76a32..6f4c4fc 100644 --- a/package.json +++ b/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" } diff --git a/src/Components/ZapparCamera.tsx b/src/Components/ZapparCamera.tsx index c6ed46d..480bae3 100644 --- a/src/Components/ZapparCamera.tsx +++ b/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(); + + 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(); - const [permissionGranted, setPermissionGranted] = useState(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 ( <> diff --git a/src/version.ts b/src/version.ts index 1589fd7..0e159b3 100644 --- a/src/version.ts +++ b/src/version.ts @@ -1,5 +1,5 @@ /** * SDK version. */ -const VERSION = "2.4.3"; +const VERSION = "2.4.7"; export default VERSION;