Skip to content

Commit 941714b

Browse files
kvvasuukvvasuu
committed
docs(examples): migrate examples to @pmndrs/examples
Part 1/2
1 parent b9923ac commit 941714b

10 files changed

Lines changed: 39 additions & 36 deletions

File tree

‎docs/effects/chromatic-aberration.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ return (
1919

2020
## Example
2121

22-
<Codesandbox id="uoyge" />
22+
[![ChromaticAberration demo](https://pmndrs.github.io/examples/chromatic-aberration/thumbnail.webp)](https://pmndrs.github.io/examples/chromatic-aberration)
2323

2424
## Props
2525

‎docs/effects/dot-screen.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ return (
2020

2121
## Example
2222

23-
<Codesandbox id="xt3fb" />
23+
[![DotScreen demo](https://pmndrs.github.io/examples/dot-screen/thumbnail.webp)](https://pmndrs.github.io/examples/dot-screen)
2424

2525
## Props
2626

‎docs/effects/god-rays.mdx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: GodRays
33
nav: 1
44
---
55

6-
The GodRays effect requires a mesh that will be used as an origin point for the rays. Refer to this [example](https://github.com/pmndrs/react-postprocessing/tree/2d7edcc2ef7cc2571a86f30ede2b9ee25b38987e/examples/src/demos/TakeControl) for more details.
6+
The GodRays effect requires a mesh that will be used as an origin point for the rays. Refer to this [example](https://pmndrs.github.io/examples/take-control) for more details.
77

88
```jsx
99
import { GodRays } from '@react-three/postprocessing'
@@ -26,6 +26,10 @@ return (
2626
)
2727
```
2828

29+
## Example
30+
31+
[![God Rays demo](https://pmndrs.github.io/examples/volumetric-light-godray/thumbnail.webp)](https://pmndrs.github.io/examples/volumetric-light-godray)
32+
2933
## Props
3034

3135
| Name | Type | Default | Description |

‎docs/effects/grid.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ return (
2121

2222
## Example
2323

24-
<Codesandbox id="9ebpg" />
24+
[![Grid demo](https://pmndrs.github.io/examples/grid/thumbnail.webp)](https://pmndrs.github.io/examples/grid)
2525

2626
## Props
2727

‎docs/effects/lensflare.mdx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ nav: 1
55

66
A Lens Flare adds the optical aberration caused by the dispersion of light entering the lens through its edges.
77

8-
Based on [ektogamat/R3F-Ultimate-Lens-Flare](https://github.com/ektogamat/R3F-Ultimate-Lens-Flare).
8+
Based on [ektogamat/R3F-Ultimate-Lens-Flare](https://github.com/ektogamat/R3F-Ultimate-Lens-Flare) ([live demo](https://ultimate-lens-flare.vercel.app/)).
99

1010
```jsx
1111
import { LensFlare } from '@react-three/postprocessing'
@@ -32,7 +32,3 @@ The Ultimate Lens Flare leverages the raycaster to examine the material type of
3232
- https://www.shadertoy.com/view/dllSRX
3333
- https://www.shadertoy.com/view/Xlc3D2
3434
- https://www.shadertoy.com/view/XtKfRV
35-
36-
## Example
37-
38-
<Codesandbox id="5ydkm4" />

‎docs/effects/outline.mdx‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -31,23 +31,27 @@ return (
3131
)
3232
```
3333

34+
## Example
35+
36+
[![Outline demo](https://pmndrs.github.io/examples/react-pp-outlines/thumbnail.webp)](https://pmndrs.github.io/examples/react-pp-outlines/)
37+
3438
## Props
3539

36-
| Name | Type | Default | Description |
37-
| ---------------- | ------------- | ----------------------- | ---------------------------------------------------------------------------------- |
38-
| selection | Objects | | Selection of objects that will be outlined |
39-
| selectionLayer | Number | 10 | The selection layer |
40-
| blendFunction | BlendFunction | BlendFunction.SCREEN | The blend function of this effect. |
41-
| patternTexture | Texture | null | A pattern texture. |
42-
| patternScale | Number | 1.0 | The pattern texture scale. |
43-
| edgeStrength | Number | 1.0 | The edge strength. |
44-
| pulseSpeed | Number | 0 | The pulse speed. A value of zero disables the pulse effect. |
45-
| visibleEdgeColor | Number | 0xffffff | The color of visible edges. |
46-
| hiddenEdgeColor | Number | 0x22090a | The color of hidden edges. |
47-
| multisampling | Number | 0 | The number of samples used for multisample antialiasing. Requires WebGL 2. |
48-
| resolutionScale | Number | 0.5 | The render resolution scale. |
49-
| resolutionX | Number | Resolution.AUTO_SIZE | The render width. |
50-
| resolutionY | Number | Resolution.AUTO_SIZE | The render height. |
51-
| kernelSize | KernelSize | KernelSize.VERY_SMALL | The blur kernel size. |
52-
| blur | Boolean | false | Whether the outline should be blurred. |
53-
| xRay | Boolean | true | Whether occluded parts of selected objects should be visible. |
40+
| Name | Type | Default | Description |
41+
| ---------------- | ------------- | --------------------- | -------------------------------------------------------------------------- |
42+
| selection | Objects | | Selection of objects that will be outlined |
43+
| selectionLayer | Number | 10 | The selection layer |
44+
| blendFunction | BlendFunction | BlendFunction.SCREEN | The blend function of this effect. |
45+
| patternTexture | Texture | null | A pattern texture. |
46+
| patternScale | Number | 1.0 | The pattern texture scale. |
47+
| edgeStrength | Number | 1.0 | The edge strength. |
48+
| pulseSpeed | Number | 0 | The pulse speed. A value of zero disables the pulse effect. |
49+
| visibleEdgeColor | Number | 0xffffff | The color of visible edges. |
50+
| hiddenEdgeColor | Number | 0x22090a | The color of hidden edges. |
51+
| multisampling | Number | 0 | The number of samples used for multisample antialiasing. Requires WebGL 2. |
52+
| resolutionScale | Number | 0.5 | The render resolution scale. |
53+
| resolutionX | Number | Resolution.AUTO_SIZE | The render width. |
54+
| resolutionY | Number | Resolution.AUTO_SIZE | The render height. |
55+
| kernelSize | KernelSize | KernelSize.VERY_SMALL | The blur kernel size. |
56+
| blur | Boolean | false | Whether the outline should be blurred. |
57+
| xRay | Boolean | true | Whether occluded parts of selected objects should be visible. |

‎docs/effects/pixelation.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ return (
1919

2020
## Example
2121

22-
<Codesandbox id="ed9yo" />
22+
[![Pixelation demo](https://pmndrs.github.io/examples/pixelation/thumbnail.webp)](https://pmndrs.github.io/examples/pixelation)
2323

2424
## Props
2525

‎docs/effects/scanline.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ return (
2121

2222
## Example
2323

24-
<Codesandbox id="iy14d" />
24+
[![Scanline demo](https://pmndrs.github.io/examples/scanline/thumbnail.webp)](https://pmndrs.github.io/examples/scanline)
2525

2626
## Props
2727

‎docs/effects/sepia.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ return (
1818

1919
## Example
2020

21-
<Codesandbox id="6jyby" />
21+
[![Sepia demo](https://pmndrs.github.io/examples/sepia/thumbnail.webp)](https://pmndrs.github.io/examples/sepia)
2222

2323
## Props
2424

‎docs/introduction.mdx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,8 @@ straight forward effects-chain.
1515
npm install @react-three/postprocessing
1616
```
1717

18-
[![Bubbles](bubbles.jpg)](https://m94xb.csb.app)
19-
20-
[![Control](control.jpg)](https://5jgjz.csb.app)
18+
[![Bubbles demo](https://pmndrs.github.io/examples/bubbles/thumbnail.webp)](https://pmndrs.github.io/examples/bubbles)
19+
[![Take Control demo](https://pmndrs.github.io/examples/take-control/thumbnail.webp)](https://pmndrs.github.io/examples/take-control)
2120

2221
#### Why postprocessing and not three/examples/jsm/postprocessing?
2322

@@ -43,10 +42,10 @@ get high performance crisp results w/o jagged edges.
4342
#### What does it look like?
4443

4544
Here's an example combining a couple of effects
46-
([live demo](https://codesandbox.io/s/react-postprocessing-dof-blob-pqrpl?)).
45+
([live demo](https://pmndrs.github.io/examples/bubbles)).
4746

48-
<a href="https://codesandbox.io/s/react-postprocessing-dof-blob-pqrpl?" target="_blank" rel="noopener">
49-
<img src="bubbles.jpg" alt="Bubbles Demo" />
47+
<a href="https://pmndrs.github.io/examples/bubbles" target="_blank" rel="noopener">
48+
<img src="https://pmndrs.github.io/examples/bubbles/thumbnail.webp" alt="Bubbles Demo" />
5049
</a>
5150

5251
```jsx

0 commit comments

Comments
 (0)