@wave3d/core 0.2.0 โ 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -19
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
# @wave3d/core
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
The framework-agnostic renderer and config model behind [Wave Studio](https://wave-studio.pages.dev): glossy, twisting 3D gradient waves driven by one JSON config.
|
|
4
4
|
|
|
5
|
-
A
|
|
5
|
+
A wave is a strip swept along a curve, with a gradient running down its length and a satin sheen. The renderer and every export read from the same `WaveConfig`, so what you design is exactly what ships.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
> ๐ก Fastest way in: design a wave in **[Wave Studio](https://wave-studio.pages.dev)**, hit **โจโฉ Export code**, and copy the snippet. This package is what that snippet imports.
|
|
8
|
+
|
|
9
|
+
## ๐ฆ Install
|
|
8
10
|
|
|
9
11
|
```sh
|
|
10
12
|
pnpm add @wave3d/core three # three is a peer dependency
|
|
@@ -12,9 +14,9 @@ pnpm add @wave3d/core three # three is a peer dependency
|
|
|
12
14
|
|
|
13
15
|
`three` is a peer dependency (`>=0.180 <1`); add `@types/three` for TypeScript.
|
|
14
16
|
|
|
15
|
-
## Drop-in wave
|
|
17
|
+
## Drop-in wave
|
|
16
18
|
|
|
17
|
-
The
|
|
19
|
+
The default entry is poster-first: it shows a poster immediately, then upgrades to live WebGL only when the browser can run it. It falls back to the poster on no-WebGL, Save-Data, reduced motion, or a lost context, and `three.js` is code-split out of the initial load.
|
|
18
20
|
|
|
19
21
|
```ts
|
|
20
22
|
import { createWave } from "@wave3d/core";
|
|
@@ -25,41 +27,45 @@ const handle = createWave(document.getElementById("wave"), config, {
|
|
|
25
27
|
// handle.set(nextConfig) ยท handle.pause() ยท handle.play() ยท handle.snapshot() ยท handle.destroy()
|
|
26
28
|
```
|
|
27
29
|
|
|
28
|
-
Capture the live frame as an image
|
|
30
|
+
Capture the live frame as an image you can host and reuse as the poster for reduced-motion, no-WebGL, and Save-Data visitors:
|
|
29
31
|
|
|
30
32
|
```ts
|
|
31
|
-
const blob = await handle.snapshot(); // options: { type?, quality?, transparent? }
|
|
33
|
+
const blob = await handle.snapshot(); // resolves null until running. options: { type?, quality?, transparent? }
|
|
32
34
|
```
|
|
33
35
|
|
|
34
|
-
## Single `<script>` from a CDN
|
|
36
|
+
## Single `<script>` from a CDN
|
|
37
|
+
|
|
38
|
+
`three` is bundled into the standalone build, so this needs nothing else:
|
|
35
39
|
|
|
36
40
|
```html
|
|
37
41
|
<script type="module">
|
|
38
42
|
import { mountWave } from "https://esm.sh/@wave3d/core/standalone";
|
|
39
43
|
mountWave(document.getElementById("wave"), {
|
|
40
|
-
/* config */
|
|
44
|
+
/* your exported config */
|
|
41
45
|
});
|
|
42
46
|
</script>
|
|
43
47
|
```
|
|
44
48
|
|
|
45
49
|
## Entry points
|
|
46
50
|
|
|
47
|
-
| Import | What
|
|
48
|
-
| ------------------------- |
|
|
49
|
-
| `@wave3d/core` | poster-first shell (`createWave
|
|
50
|
-
| `@wave3d/core/renderer` | the raw `WaveRenderer`
|
|
51
|
-
| `@wave3d/core/presets` | the built-in `PRESETS`
|
|
52
|
-
| `@wave3d/core/studio` | `StudioWaveRenderer` + randomizers
|
|
53
|
-
| `@wave3d/core/standalone` | single-file build with three bundled (the CDN entry)
|
|
51
|
+
| Import | What |
|
|
52
|
+
| ------------------------- | -------------------------------------------------------------- |
|
|
53
|
+
| `@wave3d/core` | poster-first shell (`createWave` / `mountWave`) + config model |
|
|
54
|
+
| `@wave3d/core/renderer` | the raw `WaveRenderer` and `WaveGeometry` (static three) |
|
|
55
|
+
| `@wave3d/core/presets` | the built-in `PRESETS` |
|
|
56
|
+
| `@wave3d/core/studio` | `StudioWaveRenderer` + randomizers |
|
|
57
|
+
| `@wave3d/core/standalone` | single-file build with three bundled (the CDN entry) |
|
|
54
58
|
|
|
55
59
|
## Framework wrappers
|
|
56
60
|
|
|
57
|
-
|
|
58
|
-
|
|
61
|
+
Prefer a component? Reach for the wrapper for your framework:
|
|
62
|
+
|
|
63
|
+
- **React** โ [`@wave3d/react`](https://www.npmjs.com/package/@wave3d/react): the `<Wave3D>` component.
|
|
64
|
+
- **Vue, Svelte, or plain HTML** โ [`@wave3d/element`](https://www.npmjs.com/package/@wave3d/element): the `<wave-3d>` custom element.
|
|
59
65
|
|
|
60
66
|
## Credits
|
|
61
67
|
|
|
62
|
-
|
|
68
|
+
Built by [Amir Abushanab](https://github.com/Amir-Abushanab).
|
|
63
69
|
|
|
64
70
|
## License
|
|
65
71
|
|