StringTune-3D/Docs

Start Here

Overview

Reference-first map of StringTune-3D, its CSS-first runtime model, and the docs structure.

npm i @fiddle-digital/string-tune string-tune-3d three

StringTune-3D

StringTune-3D is a StringTune module that turns DOM elements into a synchronized 3D scene. The public integration surface is intentionally small:

  • register one provider
  • register the String3D module
  • mark up elements with string="3d"
  • drive transforms, materials, lights, text, SVG, and filters through CSS custom properties

What matters first

  • string-tune-3d depends on @fiddle-digital/string-tune and a renderer implementation such as three.
  • The main runtime export is String3D.
  • The default engine bridge is ThreeJSProvider.
  • Most day-to-day authoring happens in HTML attributes and CSS variables, not in imperative scene code.

How to read this docs site

  1. Start with Installation, Quick Start, and Three.js Provider.
  2. Read the Concepts section if you need to understand how DOM objects become scene nodes.
  3. Use Objects Overview when you need the contract for a specific string-3d type.
  4. Use Rendering for materials, textures, filters, and registry-based extensions.
  5. Use API Overview for exact exports and class boundaries.

Runtime model

At runtime, String3D owns four major pieces:

  • a renderer container attached to the page
  • a camera
  • a scene graph of String3DObject instances
  • a synchronizer that reads DOM state and applies it to 3D objects every frame

That means you do not manually position meshes in normal usage. The DOM remains the source of truth.

Public boundary

The supported public surface comes from package exports such as:

  • String3D
  • ThreeJSProvider
  • String3DScene
  • String3DCustomMaterialRegistry
  • String3DCustomFilterRegistry
  • String3DFontRegistry
  • SVGParser

Everything else should be treated as internal unless it is exported by the package root.