plushies 0.1.0-alpha.0
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/LICENSE +21 -0
- package/README.md +195 -0
- package/dist/bundled.d.ts +22 -0
- package/dist/index.d.ts +224 -0
- package/dist/index.js +2259 -0
- package/dist/plushies.bundled.js +4354 -0
- package/dist/plushies.bundled.js.map +14 -0
- package/dist/plushies.cjs +2289 -0
- package/dist/plushies.global.js +4354 -0
- package/dist/plushies.global.js.map +15 -0
- package/dist/viewer.d.ts +70 -0
- package/dist/viewer.js +393 -0
- package/package.json +58 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Patrick Rathje
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
# plushies
|
|
2
|
+
|
|
3
|
+
Soft 3D plush characters for [three.js](https://threejs.org). A flat silhouette
|
|
4
|
+
(circle, heart, star, … 17 kinds) is inflated into a stuffed pillow with a
|
|
5
|
+
rolled seam and covered in real shell-textured fur. Eyes, mouth, moustache,
|
|
6
|
+
glasses, hats (top hat to fez to halo), pins and neckwear float in front of the
|
|
7
|
+
body as separate pieces. Everything that
|
|
8
|
+
moves — eye direction, blink, squash & stretch, hop, lean, turn — is a plain
|
|
9
|
+
number you can set every frame.
|
|
10
|
+
|
|
11
|
+
**Demo and editor:** run `bun install` at the repo root, then `bun run site:dev` in `packages/plushies`, and open
|
|
12
|
+
<http://localhost:4517> — configure a plushie and copy the code.
|
|
13
|
+
|
|
14
|
+
## Install
|
|
15
|
+
|
|
16
|
+
Three builds, depending on what your page already has:
|
|
17
|
+
|
|
18
|
+
| you have | use | size (gzip) |
|
|
19
|
+
|---|---|---|
|
|
20
|
+
| a bundler and three.js | `plushies` / `plushies/viewer` (three is a peer dependency) | ~22 kB (`index.js` ~19.8 + `viewer.js` ~2.5) |
|
|
21
|
+
| a bundler, no three.js | `plushies/bundled` (three included) | ~200 kB |
|
|
22
|
+
| a plain HTML page | `dist/plushies.global.js` → `window.Plushies` (three included) | ~200 kB |
|
|
23
|
+
|
|
24
|
+
```sh
|
|
25
|
+
npm i plushies three
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
The CDN snippets below and on the site work once the package is published to
|
|
29
|
+
npm.
|
|
30
|
+
|
|
31
|
+
```html
|
|
32
|
+
<!-- no build step, three bundled in -->
|
|
33
|
+
<script src="https://cdn.jsdelivr.net/npm/plushies@0.1/dist/plushies.global.js"></script>
|
|
34
|
+
<script>
|
|
35
|
+
Plushies.mountPlushie(document.getElementById('hero'), {kind: 'heart', idle: true});
|
|
36
|
+
</script>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Only use one copy of three per page: if your app already imports three, use the
|
|
40
|
+
small build and pass your copy in.
|
|
41
|
+
|
|
42
|
+
## Drop-in viewer
|
|
43
|
+
|
|
44
|
+
```html
|
|
45
|
+
<div id="hero" style="width: 360px; height: 360px"></div>
|
|
46
|
+
<script type="module">
|
|
47
|
+
import * as THREE from 'three';
|
|
48
|
+
import {mountPlushie} from 'plushies/viewer';
|
|
49
|
+
|
|
50
|
+
const view = mountPlushie(document.querySelector('#hero'), THREE, {
|
|
51
|
+
kind: 'heart',
|
|
52
|
+
color: '#f47c9a',
|
|
53
|
+
mouth: 'smile',
|
|
54
|
+
glasses: 'round',
|
|
55
|
+
idle: true, // blink, breathe, glance around
|
|
56
|
+
followPointer: true, // eyes follow the mouse
|
|
57
|
+
});
|
|
58
|
+
view.canvas.addEventListener('click', () => view.hop());
|
|
59
|
+
</script>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
The canvas is transparent and fills its container. The viewer only renders
|
|
63
|
+
while something changes, and stops painting while it is scrolled off-screen
|
|
64
|
+
(tweens keep running, so their promises still resolve; it repaints when it
|
|
65
|
+
scrolls back in). Every viewer on the page draws through one shared,
|
|
66
|
+
hidden WebGL context, so you can mount dozens without hitting the browser's
|
|
67
|
+
limit of about 16 contexts.
|
|
68
|
+
|
|
69
|
+
| method | |
|
|
70
|
+
|---|---|
|
|
71
|
+
| `view.set(pose)` | set pose fields right away |
|
|
72
|
+
| `view.to(pose, seconds, ease)` | tween numeric pose fields; resolves when done |
|
|
73
|
+
| `view.look(x, y)` · `view.blink()` · `view.hop(height)` · `view.squish(amount)` | little performances, all promises; `hop()` defaults to a height that fits the container: min(90, 20% of its height) px |
|
|
74
|
+
| `view.stop()` | halt everything where it is: running tweens, `hop`/`squish`/`blink` sequences and the idle loop's current gesture. All their promises resolve; the idle loop, if on, carries on after its next pause (use `setIdle(false)` to end it) |
|
|
75
|
+
| `view.restyle(options)` | change the look in place, keeping the pose. `options` is **merged** into the current look (pass `undefined` to reset a key); only the fur length resets, to the new fabric's, unless you give `fur` |
|
|
76
|
+
| `view.options` | the current look: the mount options merged with every `restyle` |
|
|
77
|
+
| `view.setIdle(on)` · `view.setFollowPointer(on)` | toggle the idle loop / pointer following |
|
|
78
|
+
| `view.dispose()` | remove the canvas and free its GPU resources (the shared context goes with the last viewer); pending promises resolve, and calling it twice is fine |
|
|
79
|
+
|
|
80
|
+
With `plushies/bundled` or the global build, drop the `THREE` argument:
|
|
81
|
+
`mountPlushie(element, options)` / `createPlushie(options)`.
|
|
82
|
+
|
|
83
|
+
## In your own three.js scene
|
|
84
|
+
|
|
85
|
+
```ts
|
|
86
|
+
import * as THREE from 'three';
|
|
87
|
+
import {createPlushie} from 'plushies';
|
|
88
|
+
|
|
89
|
+
const plush = createPlushie(THREE, {kind: 'star', fabric: 'felt', finish: 'felt', hat: 'party', renderer});
|
|
90
|
+
// The object is laid out in pixels (fits width × height, centred, y up):
|
|
91
|
+
const world = new THREE.Group();
|
|
92
|
+
world.scale.setScalar(1 / 100);
|
|
93
|
+
world.add(plush.object);
|
|
94
|
+
scene.add(world);
|
|
95
|
+
|
|
96
|
+
// every frame, or whenever something changes:
|
|
97
|
+
plush.set({lookX: 0.5, blink: 0, squash: 0.2, width: 600, height: 600});
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
`createPlushie` never imports `three` itself — you pass your copy of the module,
|
|
101
|
+
so it works with any build from r160 on. Pass `renderer` so beads, glasses and
|
|
102
|
+
the crown get their studio reflections. Pass `lights: false` to light it
|
|
103
|
+
yourself (the fur is lit by its own built-in rig either way).
|
|
104
|
+
|
|
105
|
+
Also exported: `DEFAULT_OPTIONS`, `DEFAULT_POSE`, the `PLUSHIE_*` value lists,
|
|
106
|
+
`fabricFur(fabric)` and `plushieOutline(kind, options)` (the flat silhouette as
|
|
107
|
+
points, e.g. for icons).
|
|
108
|
+
|
|
109
|
+
## Options (the look)
|
|
110
|
+
|
|
111
|
+
| option | values | default |
|
|
112
|
+
|---|---|---|
|
|
113
|
+
| `kind` | circle, square, triangle, heart, star, pill, cloud, polygon, blob, egg, drop, ghost, bean, flower, diamond, squircle, arch | circle |
|
|
114
|
+
| `roundness` | 0..1 corner softness | 0.6 |
|
|
115
|
+
| `sides` | corners of `polygon`, points of `star`, petals of `flower` | 6 / 5 / 6 |
|
|
116
|
+
| `starInner` | star inner radius 0.2..0.9 | 0.55 |
|
|
117
|
+
| `seed` | shape of `blob` | 1 |
|
|
118
|
+
| `thickness` | stuffing, relative to half-width | 0.42 |
|
|
119
|
+
| `fabric` | plush, felt, velvet, shaggy, fleece | plush |
|
|
120
|
+
| `furGrain` | strand size, replacing the fabric's own (smaller is finer, denser fur) | from fabric: plush 1, felt 0.8, velvet 0.9, shaggy 1.7, fleece 2.8 |
|
|
121
|
+
| `finish` | surface of eyes, mouth, moustache, glasses, neckwear, pins: gloss, satin, matte, felt | satin |
|
|
122
|
+
| `eyes` | dot, oval, googly, ring, happy, sleepy, none | dot |
|
|
123
|
+
| `eyeSize`, `eyeSpacing` | multipliers | 1 |
|
|
124
|
+
| `faceY` | face up (+) / down (−) | 0 |
|
|
125
|
+
| `mouth` | none, smile, grin, open, flat, cat | none |
|
|
126
|
+
| `cheeks` | boolean | false |
|
|
127
|
+
| `moustache` | none, curly, walrus, pencil | none |
|
|
128
|
+
| `glasses` | none, round, square, monocle, shades | none |
|
|
129
|
+
| `hat` | none, top, beanie, party, crown, cowboy, cap, hardhat, fireman, santa, graduation, fez, halo — worn on a tip when the top has a dip (heart) | none |
|
|
130
|
+
| `hatSize` | multiplier | 1 |
|
|
131
|
+
| `neck` | none, bowtie, necktie (`bowtie: true` is shorthand) | none |
|
|
132
|
+
| `pin` | none, flower, bow, heart (on the head), star, badge (on the chest) | none |
|
|
133
|
+
| `featureColor`, `moustacheColor`, `glassesColor`, `hatColor`, `neckColor`, `pinColor`, `accentColor`, `cheekColor` | CSS colours (`ACCESSORY_COLORS` lists the per-item defaults) | |
|
|
134
|
+
| `headroom` | free space above for hops, fraction of body height | 0.22 |
|
|
135
|
+
| `shadow` | contact shadow | true |
|
|
136
|
+
|
|
137
|
+
Colours accept any CSS colour: hex, names, `rgb()`/`hsl()` in comma or space
|
|
138
|
+
syntax, and `oklch()`/`lab()` and friends (resolved through the browser). An
|
|
139
|
+
unknown colour warns once in the console and falls back to the default; any
|
|
140
|
+
other invalid option does the same (booleans included: `shadow: 'false'`
|
|
141
|
+
warns and keeps the default).
|
|
142
|
+
|
|
143
|
+
## Pose (per frame)
|
|
144
|
+
|
|
145
|
+
| field | meaning | default |
|
|
146
|
+
|---|---|---|
|
|
147
|
+
| `width`, `height` | box to fit into, px | 600 |
|
|
148
|
+
| `pixelRatio` | device pixels per px (picks the fur shell count) | 1 |
|
|
149
|
+
| `lookX`, `lookY` | eye direction −1..1 (y down) | 0 |
|
|
150
|
+
| `blink` | 0 open .. 1 closed | 0 |
|
|
151
|
+
| `squash` | +1 squashed .. −1 stretched, volume preserving | 0 |
|
|
152
|
+
| `hop` | jump height, px | 0 |
|
|
153
|
+
| `lean`, `turn` | degrees | 0 |
|
|
154
|
+
| `float` | how far accessories float off the body | 1 |
|
|
155
|
+
| `fur` | fur length, fraction of half-width | from fabric |
|
|
156
|
+
| `color` | fur colour, any CSS colour or sRGB `[r, g, b]` 0..1 | #f2b33d |
|
|
157
|
+
|
|
158
|
+
## Performance
|
|
159
|
+
|
|
160
|
+
The fur is up to 16 shells of the body mesh with per-vertex lighting and a
|
|
161
|
+
cheap fragment shader; the shell count adapts to the on-screen fur length, so
|
|
162
|
+
small plushies are cheap. A handful of hero-size plushies is fine on any GPU.
|
|
163
|
+
|
|
164
|
+
## Development
|
|
165
|
+
|
|
166
|
+
This package lives in the `plushies` monorepo next to [`@plushies/cursors`](../cursors). Run `bun install` once at the repo root; the commands below run in `packages/plushies`.
|
|
167
|
+
|
|
168
|
+
```sh
|
|
169
|
+
bun run typecheck # tsc over src, tests and site
|
|
170
|
+
bun run test # unit tests (bun:test, headless three)
|
|
171
|
+
bun run build # dist/: ESM + CJS (three external), bundled ESM + global (three included), d.ts
|
|
172
|
+
bun run site:dev # the demo/editor site with live reload on http://localhost:4517
|
|
173
|
+
bun run site:build # _site/ (the repo root's site:build also adds the cursor demo at _site/cursors/)
|
|
174
|
+
bun run test:e2e # Playwright: the three builds and the site in Chromium (needs build + the root's site:build)
|
|
175
|
+
bun run check # typecheck + test + build + site:build
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
CI (`.github/workflows/ci.yml` at the repo root) runs all of the above for both packages on every push and pull
|
|
179
|
+
request and deploys `_site/` to GitHub Pages from `main` (Settings → Pages →
|
|
180
|
+
Source: GitHub Actions).
|
|
181
|
+
|
|
182
|
+
`examples/index.html` is a minimal page using the ESM build (`bun run build`
|
|
183
|
+
first, then serve the repo root).
|
|
184
|
+
|
|
185
|
+
### VideoZero
|
|
186
|
+
|
|
187
|
+
This is the same code that renders the `Plushie` / `PlushLibrary` components in
|
|
188
|
+
VideoZero. PlushLibrary loads the CommonJS core at runtime; refresh the engine's
|
|
189
|
+
copy from the repo root (with the engine checked out next to this repo) with
|
|
190
|
+
|
|
191
|
+
```sh
|
|
192
|
+
bun run vendor
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
(restart the engine after adding the file for the first time).
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Batteries included: the same API with three.js bundled in, so there is
|
|
3
|
+
* nothing to wire up. Use this when your page doesn't already load three.
|
|
4
|
+
*
|
|
5
|
+
* import {mountPlushie} from 'plushies/bundled';
|
|
6
|
+
* mountPlushie(document.querySelector('#hero'), {kind: 'star', idle: true});
|
|
7
|
+
*
|
|
8
|
+
* If your app already uses three, import 'plushies' / 'plushies/viewer'
|
|
9
|
+
* instead and pass your copy — two copies of three on one page don't mix.
|
|
10
|
+
*/
|
|
11
|
+
import * as THREE from 'three';
|
|
12
|
+
import { type Plushie, type PlushieOptions, type PlushiePose } from './index.js';
|
|
13
|
+
import { type PlushieViewer, type ViewerOptions } from './viewer.js';
|
|
14
|
+
export { ACCESSORY_COLORS, DEFAULT_OPTIONS, DEFAULT_POSE, MAX_FUR_SHELLS, PLUSHIE_EYES, PLUSHIE_FABRICS, PLUSHIE_FINISHES, PLUSHIE_GLASSES, PLUSHIE_HATS, PLUSHIE_KINDS, PLUSHIE_MOUSTACHES, PLUSHIE_MOUTHS, PLUSHIE_NECKS, PLUSHIE_PINS, fabricFur, fabricGrain, plushieOutline, } from './index.js';
|
|
15
|
+
export type * from './index.js';
|
|
16
|
+
export { easeIn, easeInOut, easeOut } from './viewer.js';
|
|
17
|
+
export type { Easing, PlushieViewer, ViewerLook, ViewerOptions } from './viewer.js';
|
|
18
|
+
export { THREE };
|
|
19
|
+
/** Build a plushie for your own scene (uses the bundled three). */
|
|
20
|
+
export declare function createPlushie(options?: PlushieOptions & Partial<PlushiePose>): Plushie;
|
|
21
|
+
/** Mount a plushie filling `container`. */
|
|
22
|
+
export declare function mountPlushie(container: HTMLElement, options?: ViewerOptions): PlushieViewer;
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* plushies — soft 3D plush characters for three.js.
|
|
3
|
+
*
|
|
4
|
+
* A body is a 2D silhouette (circle, heart, star, …) inflated into a stuffed
|
|
5
|
+
* pillow with a rolled seam and covered in shell-textured fur. Eyes, mouth,
|
|
6
|
+
* moustache, glasses, hat, pin and neckwear are separate objects floating just
|
|
7
|
+
* in front of / above the body.
|
|
8
|
+
*
|
|
9
|
+
* The library never imports `three` itself: pass your copy of the module to
|
|
10
|
+
* `createPlushie(THREE, options)`. That keeps it working with whatever
|
|
11
|
+
* three.js build (r160+) the page already loads.
|
|
12
|
+
*
|
|
13
|
+
* Units: the returned `object` is laid out in pixels — it fits itself into a
|
|
14
|
+
* `width` × `height` box (default 600 × 600) centred on its origin, y up. Put
|
|
15
|
+
* it in a group scaled by 1/100 for a 100 px = 1 unit world, or use
|
|
16
|
+
* `mountPlushie` (./viewer) which sets up renderer, camera and loop for you.
|
|
17
|
+
*/
|
|
18
|
+
import type * as ThreeNamespace from 'three';
|
|
19
|
+
/** The `three` module namespace, as passed to `createPlushie`. */
|
|
20
|
+
export type ThreeModule = typeof ThreeNamespace;
|
|
21
|
+
type T3 = ThreeModule;
|
|
22
|
+
type TGroup = InstanceType<T3['Group']>;
|
|
23
|
+
type TRenderer = InstanceType<T3['WebGLRenderer']>;
|
|
24
|
+
/** sRGB colour, each channel 0..1. */
|
|
25
|
+
export type Rgb = [number, number, number];
|
|
26
|
+
/** A CSS colour string (`#rgb`, `#rrggbb`, `rgb(…)`, `hsl(…)`, names) or an sRGB 0..1 triple. */
|
|
27
|
+
export type PlushieColor = string | Rgb | readonly number[];
|
|
28
|
+
/** Body silhouettes. */
|
|
29
|
+
export type PlushieKind = 'circle' | 'square' | 'triangle' | 'heart' | 'star' | 'pill' | 'cloud' | 'polygon' | 'blob' | 'egg' | 'drop' | 'ghost' | 'bean' | 'flower' | 'diamond' | 'squircle' | 'arch';
|
|
30
|
+
/** Body fabric: fur length, fibre size, sheen and mottling presets. */
|
|
31
|
+
export type PlushieFabric = 'plush' | 'felt' | 'velvet' | 'shaggy' | 'fleece';
|
|
32
|
+
/** Surface of the eyes, mouth, glasses and bow tie. */
|
|
33
|
+
export type PlushieFinish = 'gloss' | 'satin' | 'matte' | 'felt';
|
|
34
|
+
export type PlushieEyes = 'dot' | 'oval' | 'googly' | 'ring' | 'happy' | 'sleepy' | 'none';
|
|
35
|
+
export type PlushieMouth = 'none' | 'smile' | 'grin' | 'open' | 'flat' | 'cat';
|
|
36
|
+
export type PlushieGlasses = 'none' | 'round' | 'square' | 'monocle' | 'shades';
|
|
37
|
+
export type PlushieHat = 'none' | 'top' | 'beanie' | 'party' | 'crown' | 'cowboy' | 'cap' | 'hardhat' | 'fireman' | 'santa' | 'graduation' | 'fez' | 'halo';
|
|
38
|
+
/** Worn below the mouth. */
|
|
39
|
+
export type PlushieNeck = 'none' | 'bowtie' | 'necktie';
|
|
40
|
+
/** A small piece pinned to the body: flower, bow and heart sit on the head, badge and star on the chest. */
|
|
41
|
+
export type PlushiePin = 'none' | 'flower' | 'bow' | 'heart' | 'star' | 'badge';
|
|
42
|
+
export type PlushieMoustache = 'none' | 'curly' | 'walrus' | 'pencil';
|
|
43
|
+
/** Forget the baked environment map of `renderer` (after its WebGL context was lost and restored). */
|
|
44
|
+
export declare function resetEnvironment(renderer: TRenderer): void;
|
|
45
|
+
/** Default colour of each hat, neck piece and pin when its colour option is left out (missing ones use `accentColor`; the bow tie uses `featureColor`). */
|
|
46
|
+
export declare const ACCESSORY_COLORS: {
|
|
47
|
+
hat: Partial<Record<PlushieHat, string>>;
|
|
48
|
+
neck: Partial<Record<PlushieNeck, string>>;
|
|
49
|
+
pin: Partial<Record<PlushiePin, string>>;
|
|
50
|
+
};
|
|
51
|
+
/** Build-time options: the character's look. Changing them means a new plushie. */
|
|
52
|
+
export interface PlushieOptions {
|
|
53
|
+
/** Body silhouette. (default: 'circle') */
|
|
54
|
+
kind?: PlushieKind;
|
|
55
|
+
/** How soft the silhouette's corners are, 0..1. (default: 0.6) */
|
|
56
|
+
roundness?: number;
|
|
57
|
+
/** Corner count for `polygon` (default 6), points of a `star` (default 5), petals of a `flower` (default 6). */
|
|
58
|
+
sides?: number;
|
|
59
|
+
/** Inner radius of a `star` relative to its points, 0.2..0.9. (default: 0.55) */
|
|
60
|
+
starInner?: number;
|
|
61
|
+
/** Seed for the `blob` silhouette — each seed is a different lump. (default: 1) */
|
|
62
|
+
seed?: number;
|
|
63
|
+
/** Stuffing: how thick the pillow is relative to its half-width. (default: 0.42) */
|
|
64
|
+
thickness?: number;
|
|
65
|
+
/** Body fabric preset: plush, felt, velvet, shaggy, fleece. (default: 'plush') */
|
|
66
|
+
fabric?: PlushieFabric;
|
|
67
|
+
/** Size of one fur strand; smaller is finer, denser fur. (default: from `fabric`) */
|
|
68
|
+
furGrain?: number;
|
|
69
|
+
/** Surface of eyes, mouth, moustache, glasses, neckwear and pins: gloss, satin, matte, felt. (default: 'satin') */
|
|
70
|
+
finish?: PlushieFinish;
|
|
71
|
+
/** Eye style. (default: 'dot') */
|
|
72
|
+
eyes?: PlushieEyes;
|
|
73
|
+
/** Eye size multiplier. (default: 1) */
|
|
74
|
+
eyeSize?: number;
|
|
75
|
+
/** Distance between the eyes, multiplier. (default: 1) */
|
|
76
|
+
eyeSpacing?: number;
|
|
77
|
+
/** Shift the face up (+) or down (−), as a fraction of the body's half-height. (default: 0) */
|
|
78
|
+
faceY?: number;
|
|
79
|
+
/** Mouth style. (default: 'none') */
|
|
80
|
+
mouth?: PlushieMouth;
|
|
81
|
+
/** Blush discs under the eyes. (default: false) */
|
|
82
|
+
cheeks?: boolean;
|
|
83
|
+
/** Moustache over the mouth. (default: 'none') */
|
|
84
|
+
moustache?: PlushieMoustache;
|
|
85
|
+
/** Glasses. (default: 'none') */
|
|
86
|
+
glasses?: PlushieGlasses;
|
|
87
|
+
/** Hat. Silhouettes without a top in the middle (a heart) wear it on a tip. (default: 'none') */
|
|
88
|
+
hat?: PlushieHat;
|
|
89
|
+
/** Hat size multiplier. (default: 1) */
|
|
90
|
+
hatSize?: number;
|
|
91
|
+
/** Neckwear: a bow tie at the bottom edge, or a necktie under the mouth. (default: 'none') */
|
|
92
|
+
neck?: PlushieNeck;
|
|
93
|
+
/** Shorthand for `neck: 'bowtie'`. */
|
|
94
|
+
bowtie?: boolean;
|
|
95
|
+
/** A pin: flower, bow and heart on the head, star and badge on the chest. (default: 'none') */
|
|
96
|
+
pin?: PlushiePin;
|
|
97
|
+
/** Eyes / mouth / eyebrows colour. (default: '#18130f') */
|
|
98
|
+
featureColor?: string;
|
|
99
|
+
/** Moustache colour. (default: featureColor) */
|
|
100
|
+
moustacheColor?: string;
|
|
101
|
+
/** Glasses frame colour. (default: featureColor) */
|
|
102
|
+
glassesColor?: string;
|
|
103
|
+
/** Hat colour; each hat has a sensible default (see `ACCESSORY_COLORS`). */
|
|
104
|
+
hatColor?: string;
|
|
105
|
+
/** Neckwear colour. (default: featureColor for the bow tie, otherwise from `ACCESSORY_COLORS`) */
|
|
106
|
+
neckColor?: string;
|
|
107
|
+
/** Older name for `neckColor`. */
|
|
108
|
+
bowtieColor?: string;
|
|
109
|
+
/** Pin colour; each pin has a sensible default (the badge uses accentColor). */
|
|
110
|
+
pinColor?: string;
|
|
111
|
+
/** Second colour for hat bands and tassels, party-hat stripes, jewels and necktie stripes. (default: '#5b6cff') */
|
|
112
|
+
accentColor?: string;
|
|
113
|
+
/** Blush colour. (default: '#f08a9b') */
|
|
114
|
+
cheekColor?: string;
|
|
115
|
+
/** Empty space kept above the character for hops and accessories, fraction of body height. (default: 0.22) */
|
|
116
|
+
headroom?: number;
|
|
117
|
+
/** Soft contact shadow under the body. (default: true) */
|
|
118
|
+
shadow?: boolean;
|
|
119
|
+
/** Add the built-in light rig to `object`. Turn off to light it yourself. (default: true) */
|
|
120
|
+
lights?: boolean;
|
|
121
|
+
/**
|
|
122
|
+
* The renderer that will draw the plushie. Used once to bake a small studio
|
|
123
|
+
* environment map that gives beads, glasses and the crown their reflections;
|
|
124
|
+
* without it those render without reflections.
|
|
125
|
+
*/
|
|
126
|
+
renderer?: TRenderer;
|
|
127
|
+
}
|
|
128
|
+
/** Everything that can change every frame. All fields are cheap to update. */
|
|
129
|
+
export interface PlushiePose {
|
|
130
|
+
/** Box the character fits into, in pixels. (default: 600) */
|
|
131
|
+
width: number;
|
|
132
|
+
/** (default: 600) */
|
|
133
|
+
height: number;
|
|
134
|
+
/** Device pixels per pixel — picks how many fur shells are worth drawing. (default: 1) */
|
|
135
|
+
pixelRatio: number;
|
|
136
|
+
/** Eye direction, −1 left .. 1 right. */
|
|
137
|
+
lookX: number;
|
|
138
|
+
/** Eye direction, −1 up .. 1 down. */
|
|
139
|
+
lookY: number;
|
|
140
|
+
/** 0 open .. 1 closed. */
|
|
141
|
+
blink: number;
|
|
142
|
+
/** +1 squashed .. −1 stretched, volume preserving, pivoting on the bottom. */
|
|
143
|
+
squash: number;
|
|
144
|
+
/** Jump height in pixels. */
|
|
145
|
+
hop: number;
|
|
146
|
+
/** Lean in degrees, clockwise, about the bottom. */
|
|
147
|
+
lean: number;
|
|
148
|
+
/** Turn about the vertical axis in degrees. */
|
|
149
|
+
turn: number;
|
|
150
|
+
/** Accessory float multiplier (1 = rest). */
|
|
151
|
+
float: number;
|
|
152
|
+
/** Fur length as a fraction of the half-width. (default: from `fabric`) */
|
|
153
|
+
fur: number;
|
|
154
|
+
/** Fur colour. (default: '#f2b33d') */
|
|
155
|
+
color: PlushieColor;
|
|
156
|
+
}
|
|
157
|
+
export interface Plushie {
|
|
158
|
+
/** Add this to your scene. Laid out in pixels, y up, centred on the origin. */
|
|
159
|
+
readonly object: TGroup;
|
|
160
|
+
/** The current pose. */
|
|
161
|
+
readonly pose: Readonly<PlushiePose>;
|
|
162
|
+
/** Merge `pose` into the current pose and apply it. */
|
|
163
|
+
set(pose: Partial<PlushiePose>): void;
|
|
164
|
+
/** Free geometries, materials and textures (not the shared environment map). */
|
|
165
|
+
dispose(): void;
|
|
166
|
+
}
|
|
167
|
+
export declare const DEFAULT_POSE: Readonly<Omit<PlushiePose, 'fur'>>;
|
|
168
|
+
/** The defaults `createPlushie` fills in for options you leave out (colours that follow other options are omitted). */
|
|
169
|
+
export declare const DEFAULT_OPTIONS: {
|
|
170
|
+
readonly kind: "circle";
|
|
171
|
+
readonly roundness: 0.6;
|
|
172
|
+
readonly starInner: 0.55;
|
|
173
|
+
readonly seed: 1;
|
|
174
|
+
readonly thickness: 0.42;
|
|
175
|
+
readonly fabric: "plush";
|
|
176
|
+
readonly finish: "satin";
|
|
177
|
+
readonly eyes: "dot";
|
|
178
|
+
readonly eyeSize: 1;
|
|
179
|
+
readonly eyeSpacing: 1;
|
|
180
|
+
readonly faceY: 0;
|
|
181
|
+
readonly mouth: "none";
|
|
182
|
+
readonly cheeks: false;
|
|
183
|
+
readonly glasses: "none";
|
|
184
|
+
readonly moustache: "none";
|
|
185
|
+
readonly hat: "none";
|
|
186
|
+
readonly hatSize: 1;
|
|
187
|
+
readonly neck: "none";
|
|
188
|
+
readonly pin: "none";
|
|
189
|
+
readonly featureColor: "#18130f";
|
|
190
|
+
readonly accentColor: "#5b6cff";
|
|
191
|
+
readonly cheekColor: "#f08a9b";
|
|
192
|
+
readonly headroom: 0.22;
|
|
193
|
+
readonly shadow: true;
|
|
194
|
+
readonly lights: true;
|
|
195
|
+
};
|
|
196
|
+
/** Every body silhouette, in display order. */
|
|
197
|
+
export declare const PLUSHIE_KINDS: readonly PlushieKind[];
|
|
198
|
+
export declare const PLUSHIE_FABRICS: readonly PlushieFabric[];
|
|
199
|
+
export declare const PLUSHIE_FINISHES: readonly PlushieFinish[];
|
|
200
|
+
export declare const PLUSHIE_EYES: readonly PlushieEyes[];
|
|
201
|
+
export declare const PLUSHIE_MOUTHS: readonly PlushieMouth[];
|
|
202
|
+
export declare const PLUSHIE_GLASSES: readonly PlushieGlasses[];
|
|
203
|
+
export declare const PLUSHIE_HATS: readonly PlushieHat[];
|
|
204
|
+
export declare const PLUSHIE_NECKS: readonly PlushieNeck[];
|
|
205
|
+
export declare const PLUSHIE_PINS: readonly PlushiePin[];
|
|
206
|
+
export declare const PLUSHIE_MOUSTACHES: readonly PlushieMoustache[];
|
|
207
|
+
/** The default fur length of a fabric preset. */
|
|
208
|
+
export declare function fabricFur(fabric?: PlushieFabric): number;
|
|
209
|
+
/** The default strand size (`furGrain`) of a fabric preset. */
|
|
210
|
+
export declare function fabricGrain(fabric?: PlushieFabric): number;
|
|
211
|
+
/**
|
|
212
|
+
* The flat silhouette a plushie is inflated from, as a closed counter-clockwise
|
|
213
|
+
* polyline fitted into [-1, 1] (y up). Handy for icons and hit areas.
|
|
214
|
+
*/
|
|
215
|
+
export declare function plushieOutline(kind?: PlushieKind, options?: Pick<PlushieOptions, 'roundness' | 'sides' | 'starInner' | 'seed'>): [number, number][];
|
|
216
|
+
/** Number of fur shells drawn at most (each is one pass over the body). */
|
|
217
|
+
export declare const MAX_FUR_SHELLS = 16;
|
|
218
|
+
/**
|
|
219
|
+
* Build a plushie. `three` is your `three` module (`import * as THREE from 'three'`).
|
|
220
|
+
* The second argument takes the look (`PlushieOptions`) and, optionally, the
|
|
221
|
+
* initial pose.
|
|
222
|
+
*/
|
|
223
|
+
export declare function createPlushie(three: ThreeModule, options?: PlushieOptions & Partial<PlushiePose>): Plushie;
|
|
224
|
+
export {};
|