diff --git a/docs/controls/face-controls.mdx b/docs/controls/face-controls.mdx
index e6b66229c..608f1d2c0 100644
--- a/docs/controls/face-controls.mdx
+++ b/docs/controls/face-controls.mdx
@@ -16,7 +16,7 @@ The camera follows your face.
-Prerequisite: wrap into a [`FaceLandmarker`](#facelandmarker) provider
+Prerequisite: wrap into a [`FaceLandmarker`](https://drei.docs.pmnd.rs/misc/face-landmarker) provider
```tsx
...
@@ -66,7 +66,7 @@ type FaceControlsProps = {
```tsx
type FaceControlsApi = THREE.EventDispatcher & {
/** Detect faces from the video */
- detect: (video: HTMLVideoElement, time: number) => void
+ detect: (video: HTMLVideoElement, time: number) => FaceLandmarkerResult | undefined
/** Compute the target for the camera */
computeTarget: () => THREE.Object3D
/** Update camera's position/rotation to the `target` */
@@ -84,7 +84,7 @@ type FaceControlsApi = THREE.EventDispatcher & {
## FaceControls events
-Two `THREE.Event`s are dispatched on FaceControls ref object:
+Two `THREE.Event`s are dispatched on `FaceControls` ref object:
- `{ type: "stream", stream: MediaStream }` -- when webcam's [`.getUserMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia) promise is resolved
- `{ type: "videoFrame", texture: THREE.VideoTexture, time: number }` -- each time a new video frame is sent to the compositor (thanks to rVFC)
@@ -130,6 +130,10 @@ useFrame((_, delta) => {
Or, if you want your own custom damping, use `computeTarget` method and update the camera pos/rot yourself with:
```jsx
+import * as easing from 'maath/easing'
+
+const camera = useThree((state) => state.camera)
+
const [current] = useState(() => new THREE.Object3D())
useFrame((_, delta) => {
diff --git a/src/web/FaceControls.tsx b/src/web/FaceControls.tsx
index 1fb78577a..994779df5 100644
--- a/src/web/FaceControls.tsx
+++ b/src/web/FaceControls.tsx
@@ -76,7 +76,7 @@ export type FaceControlsProps = {
export type FaceControlsApi = THREE.EventDispatcher & {
/** Detect faces from the video */
- detect: (video: HTMLVideoElement, time: number) => void
+ detect: (video: HTMLVideoElement, time: number) => FaceLandmarkerResult | undefined
/** Compute the target for the camera */
computeTarget: () => THREE.Object3D
/** Update camera's position/rotation to the `target` */
@@ -231,8 +231,10 @@ export const FaceControls = /* @__PURE__ */ forwardRef(
(video, time) => {
- const faces = faceLandmarker?.detectForVideo(video, time)
- setFaces(faces)
+ const result = faceLandmarker?.detectForVideo(video, time)
+ setFaces(result)
+
+ return result
},
[faceLandmarker]
)