introduction

docs/getting-started/introduction.mdx

@@ -0,0 +1,35 @@
+---
+title: Introduction
+description: Useful helpers for react-three-fiber
+nav: 0
+---
+
+[![logo](../logo.jpg)](https://codesandbox.io/s/bfplr)
+
+[![Version](https://img.shields.io/npm/v/@react-three/drei?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@react-three/drei)
+[![Downloads](https://img.shields.io/npm/dt/@react-three/drei.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@react-three/drei)
+[![Discord Shield](https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff)](https://discord.com/channels/740090768164651008/741751532592038022)
+[![Open in GitHub Codespaces](https://img.shields.io/static/v1?&message=Open%20in%20%20Codespaces&style=flat&colorA=000000&colorB=000000&label=GitHub&logo=github&logoColor=ffffff)](https://github.com/codespaces/new?template_repository=pmndrs%2Fdrei)
+
+A growing collection of useful helpers and fully functional, ready-made abstractions for [@react-three/fiber](https://github.com/pmndrs/react-three-fiber). If you make a component that is generic enough to be useful to others, think about [CONTRIBUTING](CONTRIBUTING.md)!
+
+```bash
+npm install @react-three/drei
+```
+
+> [!IMPORTANT]
+> this package is using the stand-alone [`three-stdlib`](https://github.com/pmndrs/three-stdlib) instead of [`three/examples/jsm`](https://github.com/mrdoob/three.js/tree/master/examples/jsm).
+
+## Basic usage
+
+```jsx
+import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei'
+```
+
+## React-native
+
+```jsx
+import { PerspectiveCamera, PositionalAudio, ... } from '@react-three/drei/native'
+```
+
+The `native` route of the library **does not** export `Html` or `Loader`. The default export of the library is `web` which **does** export `Html` and `Loader`.

docs/misc/face-landmarker.mdx

@@ -1,110 +1,47 @@
 ---
 title: FaceLandmarker
-nav: 0
 ---
 
 ![](https://img.shields.io/badge/-suspense-brightgreen)
 
-A @mediapipe/tasks-vision [](https://developers.google.com/mediapipe/api/solutions/js/tasks-vision.facelandmarker) provider, as well as a hook.
+A @mediapipe/tasks-vision [`FaceLandmarker`](https://developers.google.com/mediapipe/api/solutions/js/tasks-vision.facelandmarker) provider, as well as a `useFaceLandmarker` hook.
 
-It will instanciate a FaceLandmarker object with the following defaults:
-
-You can override defaults, like for example self-host tasks-vision's and model in you directory:
-
-Version: ImageMagick 7.1.1-36 Q16-HDRI aarch64 22352 https://imagemagick.org
-Copyright: (C) 1999 ImageMagick Studio LLC
-License: https://imagemagick.org/script/license.php
-Features: Cipher DPC HDRI Modules OpenMP(5.0)
-Delegates (built-in): bzlib fontconfig freetype gslib heic jng jp2 jpeg jxl lcms lqr ltdl lzma openexr png ps raw tiff webp xml zlib zstd
-Compiler: gcc (4.2)
-Usage: import [options ...] [ file ]
+```tsx
+<FaceLandmarker>{/* ... */}</FaceLandmarker>
+```
 
-Image Settings:
--adjoin join images into a single multi-image file
--border include window border in the output image
--channel type apply option to select image channels
--colorspace type alternate image colorspace
--comment string annotate image with comment
--compress type type of pixel compression when writing the image
--define format:option
-define one or more image format options
--density geometry horizontal and vertical density of the image
--depth value image depth
--descend obtain image by descending window hierarchy
--display server X server to contact
--dispose method layer disposal method
--dither method apply error diffusion to image
--delay value display the next image after pausing
--encipher filename convert plain pixels to cipher pixels
--endian type endianness (MSB or LSB) of the image
--encoding type text encoding type
--filter type use this filter when resizing an image
--format "string" output formatted image characteristics
--frame include window manager frame
--gravity direction which direction to gravitate towards
--identify identify the format and characteristics of the image
--interlace type None, Line, Plane, or Partition
--interpolate method pixel color interpolation method
--label string assign a label to an image
--limit type value Area, Disk, Map, or Memory resource limit
--monitor monitor progress
--page geometry size and location of an image canvas
--pause seconds seconds delay between snapshots
--pointsize value font point size
--quality value JPEG/MIFF/PNG compression level
--quiet suppress all warning messages
--regard-warnings pay attention to warning messages
--repage geometry size and location of an image canvas
--respect-parentheses settings remain in effect until parenthesis boundary
--sampling-factor geometry
-horizontal and vertical sampling factor
--scene value image scene number
--screen select image from root window
--seed value seed a new sequence of pseudo-random numbers
--set property value set an image property
--silent operate silently, i.e. don't ring any bells
--snaps value number of screen snapshots
--support factor resize support: > 1.0 is blurry, < 1.0 is sharp
--synchronize synchronize image to storage device
--taint declare the image as modified
--transparent-color color
-transparent color
--treedepth value color tree depth
--verbose print detailed information about the image
--virtual-pixel method
-Constant, Edge, Mirror, or Tile
--window id select window with this id or name
-root selects whole screen
-
-Image Operators:
--annotate geometry text
-annotate the image with text
--colors value preferred number of colors in the image
--crop geometry preferred size and location of the cropped image
--encipher filename convert plain pixels to cipher pixels
--extent geometry set the image size
--geometry geometry preferred size or location of the image
--help print program options
--monochrome transform image to black and white
--negate replace every pixel with its complementary color
--quantize colorspace reduce colors in this colorspace
--resize geometry resize the image
--rotate degrees apply Paeth rotation to the image
--strip strip image of all profiles and comments
--thumbnail geometry create a thumbnail of the image
--transparent color make this color transparent within the image
--trim trim image edges
--type type image type
-
-Miscellaneous Options:
--debug events display copious debugging information
--help print program options
--list type print a list of supported option arguments
--log format format of debugging information
--version print version information
+It will instanciate a FaceLandmarker object with the following defaults:
 
-By default, 'file' is written in the MIFF image format. To
-specify a particular image format, precede the filename with an image
-format name and a colon (i.e. ps:image) or specify the image type as
-the filename suffix (i.e. image.ps). Specify 'file' as '-' for
-standard input or output.
+```tsx
+{
+  basePath: "https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/wasm", // x.y.z will value the @mediapipe/tasks-vision version, eg: 0.10.2
+  options: {
+    baseOptions: {
+      modelAssetPath: "https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task",
+      delegate: "GPU",
+    },
+    runningMode: "VIDEO",
+    outputFaceBlendshapes: true,
+    outputFacialTransformationMatrixes: true,
+  }
+}
+```
+
+You can override defaults, like for example self-host tasks-vision's `wasm/` and `face_landmarker.task` model in you `public/` directory:
+
+```sh
+$ ln -s ../node_modules/@mediapipe/tasks-vision/wasm/ public/tasks-vision-wasm
+$ curl https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task -o public/face_landmarker.task
+```
+
+```tsx
+import { FaceLandmarkerDefaults } from '@react-three/drei'
+
+const visionBasePath = new URL("/tasks-vision-wasm", import.meta.url).toString()
+const modelAssetPath = new URL("/face_landmarker.task", import.meta.url).toString()
+
+const faceLandmarkerOptions = { ...FaceLandmarkerDefaults.options };
+faceLandmarkerOptions.baseOptions.modelAssetPath = modelAssetPath;
+
+<FaceLandmarker basePath={visionBasePath} options={faceLandmarkerOptions}>
+```

docs/portals/fisheye.mdx

@@ -1,6 +1,5 @@
 ---
 title: Fisheye
-nav: 0
 ---
 
 <Grid cols={4}>

docs/portals/hud.mdx

@@ -1,6 +1,5 @@
 ---
 title: Hud
-nav: 0
 ---
 
 <Grid cols={4}>

docs/portals/mask.mdx

@@ -1,6 +1,5 @@
 ---
 title: Mask
-nav: 0
 ---
 
 <Grid cols={4}>

docs/portals/mesh-portal-material.mdx

@@ -1,6 +1,5 @@
 ---
 title: MeshPortalMaterial
-nav: 0
 ---
 
 <Grid cols={4}>

docs/portals/render-cube-texture.mdx

@@ -1,6 +1,5 @@
 ---
 title: RenderCubeTexture
-nav: 0
 ---
 
 This component allows you to render a live scene into a cubetexture which you can then apply to a material, for instance as an environment map (via the envMap property). The contents of it run inside a portal and are separate from the rest of the canvas, therefore you can have events in there, environment maps, etc.

docs/portals/render-texture.mdx

@@ -1,6 +1,5 @@
 ---
 title: RenderTexture
-nav: 0
 ---
 
 <Grid cols={4}>

docs/portals/view.mdx

@@ -1,6 +1,5 @@
 ---
 title: View
-nav: 0
 ---
 
 <Grid cols={4}>