[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81627":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":8,"htmlUrl":8,"language":9,"languages":8,"totalLinesOfCode":8,"stars":10,"forks":11,"watchers":12,"openIssues":13,"contributorsCount":13,"subscribersCount":13,"size":13,"stars1d":13,"stars7d":13,"stars30d":11,"stars90d":13,"forks30d":13,"starsTrendScore":13,"compositeScore":14,"rankGlobal":8,"rankLanguage":8,"license":15,"archived":16,"fork":16,"defaultBranch":17,"hasWiki":18,"hasPages":18,"topics":19,"createdAt":8,"pushedAt":8,"updatedAt":20,"readmeContent":21,"aiSummary":22,"trendingCount":13,"starSnapshotCount":13,"syncStatus":11,"lastSyncTime":23,"discoverSource":24},81627,"dollycurve","jtydhr88\u002Fdollycurve","jtydhr88",null,"TypeScript",23,2,22,0,38.63,"MIT License",false,"main",true,[],"2026-06-12 04:01:34","# dollycurve\n\nA Blender-style F-Curve \u002F camera path editor for the web. TypeScript + Three.js.\n\n**Live demo:** https:\u002F\u002Fjtydhr88.github.io\u002Fdollycurve\n\n## What it does\n\n`dollycurve` is a faithful port of [Blender's F-Curve animation engine](https:\u002F\u002Fdocs.blender.org\u002Fmanual\u002Fen\u002Flatest\u002Fanimation\u002Ffcurves\u002Findex.html) to TypeScript. It evaluates Bezier curves with per-handle types, ten Penner easing modes, Cycles + Noise modifiers, and the same auto-handle math (with the full tridiagonal smooth-pass) Blender uses internally. It ships with a canvas-based Graph Editor and Timeline modeled on Blender's, a 3D path editor for spline-based camera moves, and a Three.js binding that drives a `PerspectiveCamera` directly from your animation data.\n\nYou probably want this if Three.js's built-in `AnimationClip` (linear-only between keyframes) is too coarse for cinematic camera moves, or if you want to author camera animation in the browser the same way you would in Blender — and round-trip it through `.blend` files.\n\n## Install\n\n```bash\nnpm install dollycurve three\n```\n\n`three` is an optional peer dependency — only required if you import the Three.js binding, the 3D path editor, or anything else under the `three\u002F` \u002F `editor\u002FScenePathEditor` paths. The pure eval \u002F editing \u002F I\u002FO modules work without it.\n\n## Quick start\n\n```ts\nimport * as THREE from 'three'\nimport {\n  CameraTrackBinding,\n  importCameraActionFromJson,\n} from 'dollycurve'\n\nconst camera = new THREE.PerspectiveCamera()\nconst action = importCameraActionFromJson(jsonExportedFromBlender)\nconst binding = new CameraTrackBinding(camera, action)\n\n\u002F\u002F Each render frame:\nbinding.evaluate(timeInSeconds)\n```\n\n## Editor widgets\n\n```ts\nimport { GraphEditor, Timeline, SimplePanel } from 'dollycurve'\n\nconst timeline = new Timeline({\n  container: document.getElementById('timeline-host')!,\n  action,\n  getCurrentFrame: () => currentFrame,\n  setCurrentFrame: (f) => { currentFrame = f },\n})\n\nconst graph = new GraphEditor({\n  container: document.getElementById('graph-host')!,\n  action,\n  getCurrentFrame: () => currentFrame,\n  onChanged: () => { \u002F* refresh dependent UI *\u002F },\n  onCommit: (label) => { \u002F* push undo step *\u002F },\n})\n```\n\nFor 3D path editing in your own Three.js scene:\n\n```ts\nimport { ScenePathEditor, makeSplinePath, makeSplinePoint } from 'dollycurve'\n\nconst path = makeSplinePath([\n  makeSplinePoint([0, 0, 0],  [1, 0, 0]),\n  makeSplinePoint([5, 0, 5],  [1, 0, 1]),\n])\n\nconst editor = new ScenePathEditor(path, {\n  scene, camera: viewportCam, dom: rendererCanvas, path,\n  onChanged: () => { \u002F* path was edited *\u002F },\n})\n\u002F\u002F Click a control point or handle to drag; X\u002FY\u002FZ lock to axis;\n\u002F\u002F Shift+X\u002FY\u002FZ lock to plane; Ctrl+click on the spline body inserts a\n\u002F\u002F new point via de Casteljau split; Esc \u002F right-click cancels a drag.\n```\n\nSee [`playground\u002Fmain.ts`](playground\u002Fmain.ts) for a complete demo wiring everything together (gizmo, undo, persistence).\n\n## What's in the box\n\n### Evaluation engine\n- `evaluateFCurve(fcu, frame)` with extrapolation modes (CONSTANT \u002F LINEAR), per-segment interpolation dispatch, Cardano cubic solver for X-monotonic Bezier evaluation, all 10 Penner easings (BACK \u002F BOUNCE \u002F CIRC \u002F CUBIC \u002F ELASTIC \u002F EXPO \u002F QUAD \u002F QUART \u002F QUINT \u002F SINE) with IN \u002F OUT \u002F IN_OUT variants.\n- F-Modifiers: **Cycles** (REPEAT \u002F REPEAT_OFFSET \u002F REPEAT_MIRROR, before\u002Fafter, finite count) and **Noise** (Perlin-fbm with replace \u002F add \u002F sub \u002F mul, size, strength, phase, octaves, lacunarity, roughness — handheld camera shake out of the box). Modifiers carry optional `muted` and `influence` fields with proper interpf blending.\n\n### Editing API\n- Insert \u002F delete \u002F move (time + value with handles).\n- Auto-handle calculation: AUTO, AUTO_CLAMPED, VECTOR, ALIGN, FREE — including the **full** `BKE_nurb_handle_smooth_fcurve` tridiagonal smooth pass for `autoSmoothing: 'continuous_acceleration'` (matches Blender bit-for-bit, not the per-key length=6 approximation).\n- **Cycles-aware AUTO handles** at boundary keys for cyclic curves (no velocity discontinuity at the loop seam).\n- Bake (sample to per-frame keys), clean (drop near-redundant keys), decimate (Schneider-style fit-to-tolerance).\n- `unwrapEulerInAction` and `alignQuaternionHemisphere` post-passes — fix the Euler 179°↔−179° wrap and quaternion sign-flip 360° spins respectively.\n\n### 3D path follow\n- `SplinePath` (3D Bezier with optional per-point tilt, closed\u002Fopen, configurable resolution).\n- `PathFollowConstraint` on `CameraAction.pathFollow` — when set, the spline drives camera position; tangent-aligned, lookAt, or fcurve-driven rotation; optional `speedCurve` for arc-length-uniform traversal; optional `tiltCurve` for time-varying banking.\n- Parallel-transport orientation frames (no Frenet flips at zero-curvature points), with **cyclic seam-roll redistribution** so closed paths with non-zero torsion don't jolt at the loop boundary.\n- `bakePathToFCurves` (path → discrete location\u002Frotation FCurves) and `fitFCurvesToPath` (discrete keys → spline, best-effort) for round-tripping.\n\n### Three.js binding\n- `CameraTrackBinding` reads FCurves into `Object3D.position`, `quaternion` \u002F `rotation`, `PerspectiveCamera.fov` (computed from `lens` + `sensor`), `near`, `far`. Quaternion path takes precedence over Euler when both are present. Path-follow integration: when `action.pathFollow` is set, the spline takes over location and (optionally) rotation; lens \u002F clip \u002F sensor FCurves still apply.\n\n### Editor widgets\n- `GraphEditor` (canvas) with channel groups, mute \u002F lock \u002F visibility per channel, drag\u002Fzoom\u002Fpan, multi-select, right-click context menu (Interpolation \u002F Handle Type with active-state ✓), keyboard ops (T = cycle ipo, V = cycle handle, X = delete, A = select all, F \u002F Shift+F = frame all\u002Fselected, Shift+K = column highlight). Out-of-range shading from `getFrameRange` callback. Shared X view with Timeline for synced pan\u002Fzoom.\n- `Timeline` (canvas) with frame ruler, aggregated keyframe diamonds, draggable playhead, markers (drag\u002Frename\u002Fdelete via right-click), out-of-range shading.\n- `SimplePanel` (DOM table editor) for users who want a flat list of keys per channel without a graph.\n- `ScenePathEditor` (Three.js, in your scene) — render + raycast spline + control points, drag with axis\u002Fplane lock, Ctrl+click insert (de Casteljau split preserves curve shape and interpolates per-point tilt), keyboard or programmatic delete, Esc \u002F right-click cancels mid-drag.\n- `UndoStack\u003CT>` — snapshot-per-command undo\u002Fredo with two-axis budget (steps + bytes) and KEEP_ONE baseline. Both `GraphEditor` and `SimplePanel` expose an `onCommit(label)` callback that fires once per user-intent boundary (drag commit, click, input change), suitable for direct wiring into the stack.\n\n### I\u002FO\n- Blender JSON import\u002Fexport (schema v1) covering FCurves, all modifier types, BezTriple handles, KeyType, plus pathFollow \u002F SplinePath \u002F metadata (markers, constraints, subjectTarget).\n- Blender Python addon (`src\u002Fio\u002Fdollycurve_camera_export.py`) — drop into `Edit > Preferences > Add-ons > Install from disk`, exports the active camera's animation as JSON ready for `importCameraActionFromJson`.\n\n## Why mirror Blender?\n\nThree's built-in `AnimationClip` is linear or stepwise between adjacent keyframes (with a quaternion-aware variant for rotations). It cannot represent:\n\n- Bezier handles per side per key — what makes a cinematic camera move feel smooth instead of robotic.\n- Per-segment interpolation modes — Bezier on this section, Linear on the next, hold the one after.\n- Easing libraries with parameters — back-overshoot, elastic-amplitude, bounce-count.\n- Cyclic extrapolation with Y-offset — looping a 4-second orbit forever, shifted by `cycdy` per cycle.\n- Procedural noise overlays.\n- Spline-based path follow.\n\nBlender's animation model has been iterated for ~20 years. Cloning the data model and eval semantics gives import\u002Fexport compatibility for free — you can read FCurves from a `.blend` (via the included Python addon) and replay them identically in the browser.\n\n## Development\n\n```bash\nnpm install\nnpm run dev              # serve playground\nnpm test                 # run vitest\nnpm run build:lib        # build npm package to dist\u002F\nnpm run build:playground # build demo site to dist-site\u002F (deployed to GitHub Pages)\n```\n\n## Source references\n\nEvery load-bearing algorithm in `src\u002Feval\u002F`, `src\u002Fediting\u002F`, and `src\u002Fspline\u002F` is annotated inline with the exact `fcurve.cc` \u002F `curve.cc` \u002F `easing.cc` \u002F `fmodifier.cc` \u002F `math_solvers.cc` \u002F `anim_path.cc` line where Blender does the same thing. Read the source comments alongside Blender's `blenkernel\u002Fintern\u002F` to follow the algorithms.\n\n## License\n\nMIT — see [LICENSE](LICENSE).\n","dollycurve 是一个用于网页的类似Blender风格的F-曲线\u002F摄像机路径编辑器。项目核心功能包括支持贝塞尔曲线评估、多种Penner缓动模式、循环与噪声修改器，并且实现了与Blender相同的自动手柄数学处理。它提供了基于画布的图形编辑器和时间线界面，以及一个3D路径编辑器来创建基于样条线的摄像机动画。此外，通过Three.js绑定可以直接驱动`PerspectiveCamera`进行动画渲染。此工具非常适合需要在浏览器中实现精细控制的摄像机动画场景，特别是当Three.js内置的`AnimationClip`无法满足需求时，或是希望在浏览器中以类似于Blender的方式创作动画并能与`.blend`文件互通的情况。","2026-06-11 04:05:46","CREATED_QUERY"]