@1337exp/pkt-threejs-blueprint 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,16 +1,20 @@
-# Changelog
-
-## 0.1.0
-
-First release. Each module is its own import (`@1337exp/pkt-threejs-blueprint/<module>`), there is no root entry.
-
-- **`ease`**: `Ease`, our curves (`easeOutBack` overshoots), `smoothstep(edge0, edge1, x)` in GLSL argument order.
-- **`ticker`**: `Ticker`, game time with a `speed` (0 is a hit-stop), `tween` and `wait` as promises.
-- **`spring`**: `spring(stiffness, zeta)`, `stepSpring`, `stepSpring3`. The exact solution of the spring equation: stable at any step, the same path at any frame rate.
-- **`rng`**: `mulberry32`, `randomInt`. The sequence is frozen by a test, so saved seeds stay valid.
-- **`tuning`**: `createTuning`, the core of a "tweak it live" panel (live values, saving only the differences from the defaults, reset, copy as code).
-- **`loop`**: `startLoop(frame, { maxDt })`, the frame loop with a capped delta; `maxDt` is required.
-- **`renderer`** (needs `three`): `createRenderer`, `bindResize`.
-- **`pointer`** (needs `three`): `clientToNdc`, `rayOnPlane`.
-- **`dispose`** (needs `three`): `disposeObject`.
-- **`vue/tuning-panel`** (needs `vue`): `TuningPanel`, styled with `--tbp-*` CSS variables.
+# Changelog
+
+## 0.1.1
+
+- **`renderer`**: `createRenderer(container, parameters, options)` takes `options.touchAction` (default `none`, as before). A scene with no gesture of its own, such as a table you only tap, passes `pan-y`, so a finger moving along the page still scrolls it. The canvas style is now set by the small `styleCanvas`, which is tested without WebGL. Found in hexa-proof, where a finger on the table could not scroll the page.
+
+## 0.1.0
+
+First release. Each module is its own import (`@1337exp/pkt-threejs-blueprint/<module>`), there is no root entry.
+
+- **`ease`**: `Ease`, our curves (`easeOutBack` overshoots), `smoothstep(edge0, edge1, x)` in GLSL argument order.
+- **`ticker`**: `Ticker`, game time with a `speed` (0 is a hit-stop), `tween` and `wait` as promises.
+- **`spring`**: `spring(stiffness, zeta)`, `stepSpring`, `stepSpring3`. The exact solution of the spring equation: stable at any step, the same path at any frame rate.
+- **`rng`**: `mulberry32`, `randomInt`. The sequence is frozen by a test, so saved seeds stay valid.
+- **`tuning`**: `createTuning`, the core of a "tweak it live" panel (live values, saving only the differences from the defaults, reset, copy as code).
+- **`loop`**: `startLoop(frame, { maxDt })`, the frame loop with a capped delta; `maxDt` is required.
+- **`renderer`** (needs `three`): `createRenderer`, `bindResize`.
+- **`pointer`** (needs `three`): `clientToNdc`, `rayOnPlane`.
+- **`dispose`** (needs `three`): `disposeObject`.
+- **`vue/tuning-panel`** (needs `vue`): `TuningPanel`, styled with `--tbp-*` CSS variables.

package/README.md

@@ -1,70 +1,70 @@
-# @1337exp/pkt-threejs-blueprint
-
-**English** · [Русский](README.ru.md)
-
-The small shared layer our Three.js prototypes keep rewriting: a game clock with tweens, springs that do not blow up, seeded random, and the core of a "tweak it live" panel. Import only what you need; nothing is pulled in that you did not ask for.
-
-## Stack
-
-TypeScript 6, Vitest, plain `tsc` (no bundler: one file per module is the tree-shaking). The core has no dependencies and no DOM. `three` is an optional peer, used only by the modules that say so in the table; `vue` is an optional peer of the panel. It does not depend on TaoUI or TaoUX.
-
-```bash
-npm install @1337exp/pkt-threejs-blueprint   # plus three and vue if you use the modules that need them
-```
-
-Work on the library itself:
-
-```bash
-npm install
-npm run typecheck
-npm test
-npm run build
-```
-
-## What it can do
-
-Each module is its own import (`@1337exp/pkt-threejs-blueprint/<module>`), there is no root entry.
-
-| Module | What |
-|---|---|
-| `ease` | `Ease = (t) => number`, our curves (`easeOutBack` overshoots), `smoothstep(edge0, edge1, x)` in GLSL argument order |
-| `ticker` | `Ticker`: game time with a `speed` (0 is a hit-stop), `tween` and `wait` as promises, `add`, `busy`, `clear` |
-| `spring` | `spring(stiffness, zeta)`, `stepSpring` (a number) and `stepSpring3` (a vector): the exact solution, stable at any step, the same path at any frame rate |
-| `rng` | `mulberry32(seed)`, `randomInt`; the sequence is frozen by a test, saved seeds stay valid |
-| `tuning` | `createTuning(values, { groups, storageKey })`: live values, saving only the differences from the defaults, reset, "copy as code" (`toSource`), safe `localStorage` |
-| `loop` | `startLoop(frame, { maxDt })`: the frame loop; `frame(dt, now)` gets a delta capped at `maxDt` (required: you choose it); `stop()` |
-| `renderer` | needs `three`. `createRenderer(container)`, `bindResize(renderer, container, onResize)`: size and a pixel ratio capped at 2, read again on every resize |
-| `pointer` | needs `three`. `clientToNdc(event, element)`, `rayOnPlane(ndc, camera, plane)`: a pointer to the point on a plane, with the camera matrix refreshed |
-| `vue/tuning-panel` | needs `vue`. `TuningPanel`: draws a `tuning` (groups of sliders, what differs from the defaults, Copy as code, Reset). No `.vue` file, no UI library; looks are `--tbp-*` CSS variables with our dark-theme values as fallbacks |
-| `dispose` | needs `three`. `disposeObject(root, { textures })`: geometries and materials (arrays too) freed once however many meshes share them; textures only when asked |
-
-```ts
-import { Ticker } from '@1337exp/pkt-threejs-blueprint/ticker';
-import { easeOutBack } from '@1337exp/pkt-threejs-blueprint/ease';
-
-const ticker = new Ticker();
-// every frame: ticker.update(Math.min(realDt, maxDt));
-await ticker.tween(0.4, (k) => (mesh.scale.x = 1 + k), easeOutBack);
-```
-
-### The frame delta
-
-`dt` is the time between two frames in seconds, not a simulation rate: the frame rate stays the screen's (60, 120, 144 Hz). Cap it from above (`maxDt`) before feeding the ticker, so a hidden tab or a stall does not deliver a `dt` of seconds and send every tween to its end in one frame. Our projects use `1/30`, `0.05` or `0.1`; pick one deliberately.
-
-Springs do not need a cap to stay alive: `stepSpring` and `stepSpring3` use the exact solution of the spring equation, so they are stable for any `dt` and give the same path at 30, 60 or 144 frames per second. The usual one-line Euler step (`v += (k·(target − x) − c·v)·dt; x += v·dt`) does neither: stiffness 2000 with `zeta` 1 blows up below ~54 frames per second, and even where it holds the path depends on the frame rate. Do not write that line by hand.
-
-## How it is built
-
-Three layers by dependency: `core/` (nothing), `three/` (needs `three`), `components/` (ready-made interface blocks over the core, styled with our dark-theme values copied as CSS variables, no TaoUI). Design, decisions and the analysis behind them: [docs/design.md](docs/design.md), [docs/analysis-grok.md](docs/analysis-grok.md).
-
-## Not yet
-
-A plain-DOM panel over `tuning` (the Vue one is done). Particles, ribbons, cameras, bloom and shaders stay in the games on purpose: they differ because the pictures differ.
-
-## License
-
-MIT, see [LICENSE](LICENSE).
-
-## Us
-
-Homepage: [666.io](https://666.io). If you want to help, suggest an idea or just talk, come by.
+# @1337exp/pkt-threejs-blueprint
+
+**English** · [Русский](README.ru.md)
+
+The small shared layer our Three.js prototypes keep rewriting: a game clock with tweens, springs that do not blow up, seeded random, and the core of a "tweak it live" panel. Import only what you need; nothing is pulled in that you did not ask for.
+
+## Stack
+
+TypeScript 6, Vitest, plain `tsc` (no bundler: one file per module is the tree-shaking). The core has no dependencies and no DOM. `three` is an optional peer, used only by the modules that say so in the table; `vue` is an optional peer of the panel. It does not depend on TaoUI or TaoUX.
+
+```bash
+npm install @1337exp/pkt-threejs-blueprint   # plus three and vue if you use the modules that need them
+```
+
+Work on the library itself:
+
+```bash
+npm install
+npm run typecheck
+npm test
+npm run build
+```
+
+## What it can do
+
+Each module is its own import (`@1337exp/pkt-threejs-blueprint/<module>`), there is no root entry.
+
+| Module | What |
+|---|---|
+| `ease` | `Ease = (t) => number`, our curves (`easeOutBack` overshoots), `smoothstep(edge0, edge1, x)` in GLSL argument order |
+| `ticker` | `Ticker`: game time with a `speed` (0 is a hit-stop), `tween` and `wait` as promises, `add`, `busy`, `clear` |
+| `spring` | `spring(stiffness, zeta)`, `stepSpring` (a number) and `stepSpring3` (a vector): the exact solution, stable at any step, the same path at any frame rate |
+| `rng` | `mulberry32(seed)`, `randomInt`; the sequence is frozen by a test, saved seeds stay valid |
+| `tuning` | `createTuning(values, { groups, storageKey })`: live values, saving only the differences from the defaults, reset, "copy as code" (`toSource`), safe `localStorage` |
+| `loop` | `startLoop(frame, { maxDt })`: the frame loop; `frame(dt, now)` gets a delta capped at `maxDt` (required: you choose it); `stop()` |
+| `renderer` | needs `three`. `createRenderer(container, parameters, { touchAction })` (the canvas is `touch-action: none` unless you pass `pan-y` and the like), `bindResize(renderer, container, onResize)`: size and a pixel ratio capped at 2, read again on every resize |
+| `pointer` | needs `three`. `clientToNdc(event, element)`, `rayOnPlane(ndc, camera, plane)`: a pointer to the point on a plane, with the camera matrix refreshed |
+| `vue/tuning-panel` | needs `vue`. `TuningPanel`: draws a `tuning` (groups of sliders, what differs from the defaults, Copy as code, Reset). No `.vue` file, no UI library; looks are `--tbp-*` CSS variables with our dark-theme values as fallbacks |
+| `dispose` | needs `three`. `disposeObject(root, { textures })`: geometries and materials (arrays too) freed once however many meshes share them; textures only when asked |
+
+```ts
+import { Ticker } from '@1337exp/pkt-threejs-blueprint/ticker';
+import { easeOutBack } from '@1337exp/pkt-threejs-blueprint/ease';
+
+const ticker = new Ticker();
+// every frame: ticker.update(Math.min(realDt, maxDt));
+await ticker.tween(0.4, (k) => (mesh.scale.x = 1 + k), easeOutBack);
+```
+
+### The frame delta
+
+`dt` is the time between two frames in seconds, not a simulation rate: the frame rate stays the screen's (60, 120, 144 Hz). Cap it from above (`maxDt`) before feeding the ticker, so a hidden tab or a stall does not deliver a `dt` of seconds and send every tween to its end in one frame. Our projects use `1/30`, `0.05` or `0.1`; pick one deliberately.
+
+Springs do not need a cap to stay alive: `stepSpring` and `stepSpring3` use the exact solution of the spring equation, so they are stable for any `dt` and give the same path at 30, 60 or 144 frames per second. The usual one-line Euler step (`v += (k·(target − x) − c·v)·dt; x += v·dt`) does neither: stiffness 2000 with `zeta` 1 blows up below ~54 frames per second, and even where it holds the path depends on the frame rate. Do not write that line by hand.
+
+## How it is built
+
+Three layers by dependency: `core/` (nothing), `three/` (needs `three`), `components/` (ready-made interface blocks over the core, styled with our dark-theme values copied as CSS variables, no TaoUI). Design, decisions and the analysis behind them: [docs/design.md](docs/design.md), [docs/analysis-grok.md](docs/analysis-grok.md).
+
+## Not yet
+
+A plain-DOM panel over `tuning` (the Vue one is done). Particles, ribbons, cameras, bloom and shaders stay in the games on purpose: they differ because the pictures differ.
+
+## License
+
+MIT, see [LICENSE](LICENSE).
+
+## Us
+
+Homepage: [666.io](https://666.io). If you want to help, suggest an idea or just talk, come by.

package/README.ru.md

@@ -1,70 +1,70 @@
-# @1337exp/pkt-threejs-blueprint
-
-[English](README.md) · **Русский**
-
-Небольшой общий слой, который наши прототипы на Three.js постоянно пишут заново: игровое время с твинами, пружины, которые не разлетаются, случайные числа с зерном и ядро панели «покрутить вживую». Подключай только то, что нужно; лишнего не тянется.
-
-## Стек
-
-TypeScript 6, Vitest, обычный `tsc` (без бандлера: по файлу на модуль и есть tree-shaking). Ядро без зависимостей и без DOM. `three` необязательный peer, он нужен только модулям, у которых это сказано в таблице; `vue` необязательный peer панели. От TaoUI и TaoUX не зависит.
-
-```bash
-npm install @1337exp/pkt-threejs-blueprint   # плюс three и vue, если берёшь модули, которым они нужны
-```
-
-Работа над самой библиотекой:
-
-```bash
-npm install
-npm run typecheck
-npm test
-npm run build
-```
-
-## Что умеет
-
-Каждый модуль подключается отдельно (`@1337exp/pkt-threejs-blueprint/<модуль>`), общего входа нет.
-
-| Модуль | Что |
-|---|---|
-| `ease` | `Ease = (t) => number`, наши кривые (`easeOutBack` с перелётом), `smoothstep(edge0, edge1, x)` в порядке аргументов GLSL |
-| `ticker` | `Ticker`: игровое время со `speed` (0 — hit-stop), `tween` и `wait` как обещания, `add`, `busy`, `clear` |
-| `spring` | `spring(stiffness, zeta)`, `stepSpring` (число) и `stepSpring3` (вектор): точное решение, устойчиво при любом шаге, один и тот же путь на любой частоте кадров |
-| `rng` | `mulberry32(seed)`, `randomInt`; последовательность заморожена тестом, сохранённые зёрна остаются верными |
-| `tuning` | `createTuning(values, { groups, storageKey })`: живые значения, сохранение только отличий от умолчаний, сброс, «скопировать как код» (`toSource`), безопасный `localStorage` |
-| `loop` | `startLoop(frame, { maxDt })`: цикл кадров; `frame(dt, now)` получает дельту не больше `maxDt` (параметр обязателен: выбираешь ты); `stop()` |
-| `renderer` | нужен `three`. `createRenderer(container)`, `bindResize(renderer, container, onResize)`: размер и плотность пикселей с потолком 2, читаются заново при каждом изменении размера |
-| `pointer` | нужен `three`. `clientToNdc(event, element)`, `rayOnPlane(ndc, camera, plane)`: от указателя до точки на плоскости, с обновлением матрицы камеры |
-| `vue/tuning-panel` | нужен `vue`. `TuningPanel`: рисует `tuning` (группы ползунков, что отличается от умолчаний, «скопировать как код», сброс). Без `.vue`-файла и без UI-библиотеки; вид задают CSS-переменные `--tbp-*`, запасные значения это наша тёмная тема |
-| `dispose` | нужен `three`. `disposeObject(root, { textures })`: геометрии и материалы (и массивы) освобождаются один раз, сколько бы мешей их ни делило; текстуры только по просьбе |
-
-```ts
-import { Ticker } from '@1337exp/pkt-threejs-blueprint/ticker';
-import { easeOutBack } from '@1337exp/pkt-threejs-blueprint/ease';
-
-const ticker = new Ticker();
-// каждый кадр: ticker.update(Math.min(realDt, maxDt));
-await ticker.tween(0.4, (k) => (mesh.scale.x = 1 + k), easeOutBack);
-```
-
-### Дельта кадра
-
-`dt` — время между двумя кадрами в секундах, а не частота симуляции: частота кадров остаётся экранной (60, 120, 144 Гц). Ограничь её сверху (`maxDt`) перед подачей в тикер, чтобы после фона вкладки или подвисания не прилетел `dt` в секунды и все твины не ушли в конец за один кадр. В наших проектах это `1/30`, `0.05` или `0.1`; выбирай осознанно.
-
-Пружине потолок, чтобы выжить, не нужен: `stepSpring` и `stepSpring3` берут точное решение уравнения пружины, поэтому устойчивы при любом `dt` и дают один и тот же путь на 30, 60 и 144 кадрах в секунду. Привычный однострочный шаг Эйлера (`v += (k·(цель − x) − c·v)·dt; x += v·dt`) не даёт ни того ни другого: жёсткость 2000 при `zeta` 1 разлетается ниже ~54 кадров в секунду, а и там, где держится, путь зависит от частоты кадров. Не пиши эту строку руками.
-
-## Как устроено
-
-Три слоя по зависимостям: `core/` (ничего), `three/` (нужен `three`), `components/` (готовые блоки интерфейса поверх ядра; стили это значения нашей тёмной темы, скопированные как CSS-переменные, без TaoUI). Дизайн, решения и анализ, на котором они стоят: [docs/design.md](docs/design.md), [docs/analysis-grok.md](docs/analysis-grok.md).
-
-## Пока нет
-
-Панель на чистом DOM поверх `tuning` (на Vue готова). Частицы, ленты, камеры, bloom и шейдеры остаются в играх намеренно: они разные, потому что разные картинки.
-
-## Лицензия
-
-MIT, см. [LICENSE](LICENSE).
-
-## Мы
-
-Домашняя страница: [666.io](https://666.io). Хочешь помочь, предложить идею или просто поговорить — заходи.
+# @1337exp/pkt-threejs-blueprint
+
+[English](README.md) · **Русский**
+
+Небольшой общий слой, который наши прототипы на Three.js постоянно пишут заново: игровое время с твинами, пружины, которые не разлетаются, случайные числа с зерном и ядро панели «покрутить вживую». Подключай только то, что нужно; лишнего не тянется.
+
+## Стек
+
+TypeScript 6, Vitest, обычный `tsc` (без бандлера: по файлу на модуль и есть tree-shaking). Ядро без зависимостей и без DOM. `three` необязательный peer, он нужен только модулям, у которых это сказано в таблице; `vue` необязательный peer панели. От TaoUI и TaoUX не зависит.
+
+```bash
+npm install @1337exp/pkt-threejs-blueprint   # плюс three и vue, если берёшь модули, которым они нужны
+```
+
+Работа над самой библиотекой:
+
+```bash
+npm install
+npm run typecheck
+npm test
+npm run build
+```
+
+## Что умеет
+
+Каждый модуль подключается отдельно (`@1337exp/pkt-threejs-blueprint/<модуль>`), общего входа нет.
+
+| Модуль | Что |
+|---|---|
+| `ease` | `Ease = (t) => number`, наши кривые (`easeOutBack` с перелётом), `smoothstep(edge0, edge1, x)` в порядке аргументов GLSL |
+| `ticker` | `Ticker`: игровое время со `speed` (0 — hit-stop), `tween` и `wait` как обещания, `add`, `busy`, `clear` |
+| `spring` | `spring(stiffness, zeta)`, `stepSpring` (число) и `stepSpring3` (вектор): точное решение, устойчиво при любом шаге, один и тот же путь на любой частоте кадров |
+| `rng` | `mulberry32(seed)`, `randomInt`; последовательность заморожена тестом, сохранённые зёрна остаются верными |
+| `tuning` | `createTuning(values, { groups, storageKey })`: живые значения, сохранение только отличий от умолчаний, сброс, «скопировать как код» (`toSource`), безопасный `localStorage` |
+| `loop` | `startLoop(frame, { maxDt })`: цикл кадров; `frame(dt, now)` получает дельту не больше `maxDt` (параметр обязателен: выбираешь ты); `stop()` |
+| `renderer` | нужен `three`. `createRenderer(container, parameters, { touchAction })` (холст с `touch-action: none`, пока не передашь `pan-y` и подобное), `bindResize(renderer, container, onResize)`: размер и плотность пикселей с потолком 2, читаются заново при каждом изменении размера |
+| `pointer` | нужен `three`. `clientToNdc(event, element)`, `rayOnPlane(ndc, camera, plane)`: от указателя до точки на плоскости, с обновлением матрицы камеры |
+| `vue/tuning-panel` | нужен `vue`. `TuningPanel`: рисует `tuning` (группы ползунков, что отличается от умолчаний, «скопировать как код», сброс). Без `.vue`-файла и без UI-библиотеки; вид задают CSS-переменные `--tbp-*`, запасные значения это наша тёмная тема |
+| `dispose` | нужен `three`. `disposeObject(root, { textures })`: геометрии и материалы (и массивы) освобождаются один раз, сколько бы мешей их ни делило; текстуры только по просьбе |
+
+```ts
+import { Ticker } from '@1337exp/pkt-threejs-blueprint/ticker';
+import { easeOutBack } from '@1337exp/pkt-threejs-blueprint/ease';
+
+const ticker = new Ticker();
+// каждый кадр: ticker.update(Math.min(realDt, maxDt));
+await ticker.tween(0.4, (k) => (mesh.scale.x = 1 + k), easeOutBack);
+```
+
+### Дельта кадра
+
+`dt` — время между двумя кадрами в секундах, а не частота симуляции: частота кадров остаётся экранной (60, 120, 144 Гц). Ограничь её сверху (`maxDt`) перед подачей в тикер, чтобы после фона вкладки или подвисания не прилетел `dt` в секунды и все твины не ушли в конец за один кадр. В наших проектах это `1/30`, `0.05` или `0.1`; выбирай осознанно.
+
+Пружине потолок, чтобы выжить, не нужен: `stepSpring` и `stepSpring3` берут точное решение уравнения пружины, поэтому устойчивы при любом `dt` и дают один и тот же путь на 30, 60 и 144 кадрах в секунду. Привычный однострочный шаг Эйлера (`v += (k·(цель − x) − c·v)·dt; x += v·dt`) не даёт ни того ни другого: жёсткость 2000 при `zeta` 1 разлетается ниже ~54 кадров в секунду, а и там, где держится, путь зависит от частоты кадров. Не пиши эту строку руками.
+
+## Как устроено
+
+Три слоя по зависимостям: `core/` (ничего), `three/` (нужен `three`), `components/` (готовые блоки интерфейса поверх ядра; стили это значения нашей тёмной темы, скопированные как CSS-переменные, без TaoUI). Дизайн, решения и анализ, на котором они стоят: [docs/design.md](docs/design.md), [docs/analysis-grok.md](docs/analysis-grok.md).
+
+## Пока нет
+
+Панель на чистом DOM поверх `tuning` (на Vue готова). Частицы, ленты, камеры, bloom и шейдеры остаются в играх намеренно: они разные, потому что разные картинки.
+
+## Лицензия
+
+MIT, см. [LICENSE](LICENSE).
+
+## Мы
+
+Домашняя страница: [666.io](https://666.io). Хочешь помочь, предложить идею или просто поговорить — заходи.

package/dist/three/renderer.d.ts

@@ -1,13 +1,36 @@
 import { WebGLRenderer, type WebGLRendererParameters } from 'three';
+export interface CanvasOptions {
+    /**
+     * The CSS `touch-action` of the canvas. The default is `none`: a finger drag belongs to the game. A scene that has no gesture of its own
+     * (a table you only tap, a model you only look at) should pass `pan-y`, so that a finger moving along the page still scrolls it.
+     * CSS `touch-action` холста. По умолчанию `none`: перетаскивание пальцем принадлежит игре. Сцене без своих жестов (стол, по которому только
+     * тапают, модель, на которую только смотрят) стоит передать `pan-y`, чтобы палец, ведущий вдоль страницы, всё же её листал.
+     */
+    touchAction?: string;
+}
+/** The part of a canvas that {@link styleCanvas} touches. / Часть холста, которой касается {@link styleCanvas}. */
+export interface StylableCanvas {
+    style: {
+        display: string;
+        touchAction: string;
+    };
+}
+/**
+ * The look of the canvas that {@link createRenderer} asks for: a block (no stray line gap under it) and the chosen `touch-action`.
+ * It is a function of its own so that it can be tested without WebGL.
+ * Вид холста, которого просит {@link createRenderer}: блочный (без щели под ним) и выбранный `touch-action`. Отдельная функция, чтобы
+ * её можно было проверить без WebGL.
+ */
+export declare function styleCanvas(canvas: StylableCanvas, options?: CanvasOptions): void;
 /**
  * A renderer on a canvas inside `container`: antialiased by default, the canvas is a block (no stray line gap under it)
- * and `touch-action: none` (a finger drag is for the game, not for scrolling the page). The size and the pixel ratio are set
- * by {@link bindResize}; without it the canvas keeps three's defaults.
+ * and `touch-action: none` (a finger drag is for the game, not for scrolling the page; change it with `options.touchAction`).
+ * The size and the pixel ratio are set by {@link bindResize}; without it the canvas keeps three's defaults.
  * Рендерер на холсте внутри `container`: со сглаживанием по умолчанию, холст блочный (без щели под ним) и с `touch-action: none`
- * (перетаскивание пальцем для игры, а не для прокрутки страницы). Размер и плотность пикселей ставит {@link bindResize};
- * без него холст остаётся с умолчаниями three.
+ * (перетаскивание пальцем для игры, а не для прокрутки страницы; меняется через `options.touchAction`). Размер и плотность
+ * пикселей ставит {@link bindResize}; без него холст остаётся с умолчаниями three.
  */
-export declare function createRenderer(container: HTMLElement, parameters?: WebGLRendererParameters): WebGLRenderer;
+export declare function createRenderer(container: HTMLElement, parameters?: WebGLRendererParameters, options?: CanvasOptions): WebGLRenderer;
 /** The part of a renderer that {@link bindResize} touches. / Часть рендерера, которой касается {@link bindResize}. */
 export interface ResizableRenderer {
     setPixelRatio(ratio: number): void;

package/dist/three/renderer.js

@@ -1,16 +1,25 @@
 import { WebGLRenderer } from 'three';
+/**
+ * The look of the canvas that {@link createRenderer} asks for: a block (no stray line gap under it) and the chosen `touch-action`.
+ * It is a function of its own so that it can be tested without WebGL.
+ * Вид холста, которого просит {@link createRenderer}: блочный (без щели под ним) и выбранный `touch-action`. Отдельная функция, чтобы
+ * её можно было проверить без WebGL.
+ */
+export function styleCanvas(canvas, options = {}) {
+    canvas.style.display = 'block';
+    canvas.style.touchAction = options.touchAction ?? 'none';
+}
 /**
  * A renderer on a canvas inside `container`: antialiased by default, the canvas is a block (no stray line gap under it)
- * and `touch-action: none` (a finger drag is for the game, not for scrolling the page). The size and the pixel ratio are set
- * by {@link bindResize}; without it the canvas keeps three's defaults.
+ * and `touch-action: none` (a finger drag is for the game, not for scrolling the page; change it with `options.touchAction`).
+ * The size and the pixel ratio are set by {@link bindResize}; without it the canvas keeps three's defaults.
  * Рендерер на холсте внутри `container`: со сглаживанием по умолчанию, холст блочный (без щели под ним) и с `touch-action: none`
- * (перетаскивание пальцем для игры, а не для прокрутки страницы). Размер и плотность пикселей ставит {@link bindResize};
- * без него холст остаётся с умолчаниями three.
+ * (перетаскивание пальцем для игры, а не для прокрутки страницы; меняется через `options.touchAction`). Размер и плотность
+ * пикселей ставит {@link bindResize}; без него холст остаётся с умолчаниями three.
  */
-export function createRenderer(container, parameters = {}) {
+export function createRenderer(container, parameters = {}, options = {}) {
     const renderer = new WebGLRenderer({ antialias: true, ...parameters });
-    renderer.domElement.style.display = 'block';
-    renderer.domElement.style.touchAction = 'none';
+    styleCanvas(renderer.domElement, options);
     container.appendChild(renderer.domElement);
     return renderer;
 }

package/dist/three/renderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderer.js","sourceRoot":"","sources":["../../src/three/renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAgC,MAAM,OAAO,CAAC;AAEpE;;;;;;;GAOG;AACH,MAAM,UAAU,cAAc,CAAC,SAAsB,EAAE,aAAsC,EAAE;IAC3F,MAAM,QAAQ,GAAG,IAAI,aAAa,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,CAAC,CAAC;IACvE,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;IAC5C,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,WAAW,GAAG,MAAM,CAAC;IAC/C,SAAS,CAAC,WAAW,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC3C,OAAO,QAAQ,CAAC;AACpB,CAAC;AAqBD;;;;;;;GAOG;AACH,MAAM,UAAU,UAAU,CACtB,QAA2B,EAC3B,SAAsB,EACtB,QAAkD,EAClD,UAAyB,EAAE;IAE3B,MAAM,EAAE,aAAa,GAAG,CAAC,EAAE,WAAW,GAAG,IAAI,EAAE,GAAG,OAAO,CAAC;IAC1D,MAAM,KAAK,GAAG,GAAS,EAAE;QACrB,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC;QACpC,MAAM,MAAM,GAAG,SAAS,CAAC,YAAY,CAAC;QACtC,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM;YAAE,OAAO;QAC9B,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,gBAAgB,IAAI,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC;QAC9E,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC;QAC7C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAC9B,CAAC,CAAC;IACF,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,KAAK,CAAC,CAAC;IAC3C,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAC5B,KAAK,EAAE,CAAC;IACR,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;AACvC,CAAC"}
+{"version":3,"file":"renderer.js","sourceRoot":"","sources":["../../src/three/renderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAgC,MAAM,OAAO,CAAC;AAiBpE;;;;;GAKG;AACH,MAAM,UAAU,WAAW,CAAC,MAAsB,EAAE,UAAyB,EAAE;IAC3E,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;IAC/B,MAAM,CAAC,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,IAAI,MAAM,CAAC;AAC7D,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,cAAc,CAAC,SAAsB,EAAE,aAAsC,EAAE,EAAE,UAAyB,EAAE;IACxH,MAAM,QAAQ,GAAG,IAAI,aAAa,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,CAAC,CAAC;IACvE,WAAW,CAAC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;IAC1C,SAAS,CAAC,WAAW,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC3C,OAAO,QAAQ,CAAC;AACpB,CAAC;AAqBD;;;;;;;GAOG;AACH,MAAM,UAAU,UAAU,CACtB,QAA2B,EAC3B,SAAsB,EACtB,QAAkD,EAClD,UAAyB,EAAE;IAE3B,MAAM,EAAE,aAAa,GAAG,CAAC,EAAE,WAAW,GAAG,IAAI,EAAE,GAAG,OAAO,CAAC;IAC1D,MAAM,KAAK,GAAG,GAAS,EAAE;QACrB,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC;QACpC,MAAM,MAAM,GAAG,SAAS,CAAC,YAAY,CAAC;QACtC,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM;YAAE,OAAO;QAC9B,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,gBAAgB,IAAI,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC;QAC9E,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC;QAC7C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;IAC9B,CAAC,CAAC;IACF,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,KAAK,CAAC,CAAC;IAC3C,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAC5B,KAAK,EAAE,CAAC;IACR,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;AACvC,CAAC"}

package/package.json

@@ -1,106 +1,106 @@
-{
-  "name": "@1337exp/pkt-threejs-blueprint",
-  "version": "0.1.0",
-  "description": "The small shared layer our Three.js prototypes keep rewriting: game clock and tweens, springs, seeded random, live-tuning core. Import only what you need.",
-  "keywords": [
-    "threejs",
-    "three",
-    "tween",
-    "spring",
-    "prng",
-    "typescript"
-  ],
-  "type": "module",
-  "license": "MIT",
-  "homepage": "https://github.com/1337exp/pkt-threejs-blueprint#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/1337exp/pkt-threejs-blueprint.git"
-  },
-  "bugs": {
-    "url": "https://github.com/1337exp/pkt-threejs-blueprint/issues"
-  },
-  "sideEffects": false,
-  "files": [
-    "dist",
-    "CHANGELOG.md"
-  ],
-  "exports": {
-    "./ease": {
-      "types": "./dist/core/ease.d.ts",
-      "import": "./dist/core/ease.js"
-    },
-    "./ticker": {
-      "types": "./dist/core/ticker.d.ts",
-      "import": "./dist/core/ticker.js"
-    },
-    "./spring": {
-      "types": "./dist/core/spring.d.ts",
-      "import": "./dist/core/spring.js"
-    },
-    "./rng": {
-      "types": "./dist/core/rng.d.ts",
-      "import": "./dist/core/rng.js"
-    },
-    "./tuning": {
-      "types": "./dist/core/tuning.d.ts",
-      "import": "./dist/core/tuning.js"
-    },
-    "./loop": {
-      "types": "./dist/core/loop.d.ts",
-      "import": "./dist/core/loop.js"
-    },
-    "./renderer": {
-      "types": "./dist/three/renderer.d.ts",
-      "import": "./dist/three/renderer.js"
-    },
-    "./pointer": {
-      "types": "./dist/three/pointer.d.ts",
-      "import": "./dist/three/pointer.js"
-    },
-    "./dispose": {
-      "types": "./dist/three/dispose.d.ts",
-      "import": "./dist/three/dispose.js"
-    },
-    "./vue/tuning-panel": {
-      "types": "./dist/components/vue/tuning-panel.d.ts",
-      "import": "./dist/components/vue/tuning-panel.js"
-    },
-    "./package.json": "./package.json"
-  },
-  "scripts": {
-    "typecheck": "tsc --noEmit -p tsconfig.core.json && tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "build": "tsc -p tsconfig.build.json",
-    "prepublishOnly": "npm run typecheck && npm test && npm run build"
-  },
-  "peerDependencies": {
-    "three": ">=0.186.1 <0.188.0",
-    "vue": "^3.5.0"
-  },
-  "peerDependenciesMeta": {
-    "three": {
-      "optional": true
-    },
-    "vue": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@types/node": "^26.6.4",
-    "@types/three": "^0.187.0",
-    "happy-dom": "^21.0.4",
-    "three": "^0.187.0",
-    "typescript": "~6.0.3",
-    "vitest": "^5.0.3",
-    "vue": "^3.5.45"
-  },
-  "author": "1337exp",
-  "engines": {
-    "node": ">=18"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "@1337exp/pkt-threejs-blueprint",
+  "version": "0.1.1",
+  "description": "The small shared layer our Three.js prototypes keep rewriting: game clock and tweens, springs, seeded random, live-tuning core. Import only what you need.",
+  "keywords": [
+    "threejs",
+    "three",
+    "tween",
+    "spring",
+    "prng",
+    "typescript"
+  ],
+  "type": "module",
+  "license": "MIT",
+  "homepage": "https://github.com/1337exp/pkt-threejs-blueprint#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/1337exp/pkt-threejs-blueprint.git"
+  },
+  "bugs": {
+    "url": "https://github.com/1337exp/pkt-threejs-blueprint/issues"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "CHANGELOG.md"
+  ],
+  "exports": {
+    "./ease": {
+      "types": "./dist/core/ease.d.ts",
+      "import": "./dist/core/ease.js"
+    },
+    "./ticker": {
+      "types": "./dist/core/ticker.d.ts",
+      "import": "./dist/core/ticker.js"
+    },
+    "./spring": {
+      "types": "./dist/core/spring.d.ts",
+      "import": "./dist/core/spring.js"
+    },
+    "./rng": {
+      "types": "./dist/core/rng.d.ts",
+      "import": "./dist/core/rng.js"
+    },
+    "./tuning": {
+      "types": "./dist/core/tuning.d.ts",
+      "import": "./dist/core/tuning.js"
+    },
+    "./loop": {
+      "types": "./dist/core/loop.d.ts",
+      "import": "./dist/core/loop.js"
+    },
+    "./renderer": {
+      "types": "./dist/three/renderer.d.ts",
+      "import": "./dist/three/renderer.js"
+    },
+    "./pointer": {
+      "types": "./dist/three/pointer.d.ts",
+      "import": "./dist/three/pointer.js"
+    },
+    "./dispose": {
+      "types": "./dist/three/dispose.d.ts",
+      "import": "./dist/three/dispose.js"
+    },
+    "./vue/tuning-panel": {
+      "types": "./dist/components/vue/tuning-panel.d.ts",
+      "import": "./dist/components/vue/tuning-panel.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit -p tsconfig.core.json && tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "build": "tsc -p tsconfig.build.json",
+    "prepublishOnly": "npm run typecheck && npm test && npm run build"
+  },
+  "peerDependencies": {
+    "three": ">=0.186.1 <0.188.0",
+    "vue": "^3.5.0"
+  },
+  "peerDependenciesMeta": {
+    "three": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^26.6.4",
+    "@types/three": "^0.187.0",
+    "happy-dom": "^21.0.4",
+    "three": "^0.187.0",
+    "typescript": "~6.0.3",
+    "vitest": "^5.0.3",
+    "vue": "^3.5.45"
+  },
+  "author": "1337exp",
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}