Bundled Library APIs

Scene API · Fold.page

Bundled Library

Troika Text

Fold.getTroikaTextLib() returns the full troika-three-text namespace — the same library Fold uses internally for all 3D text. The primary export is Text, a Three.js Mesh subclass that renders crisp SDF glyphs at any size. Instances can be added directly to getGroupScroll() or getThreeState().scene.

const { Text, preloadFont } = Fold.getTroikaTextLib();
const label = new Text();
label.text      = 'Hello world';
label.fontSize  = Fold.getPixelSize(48);
label.color     = 0x5bbfff;
label.anchorX   = 'center';
label.sync();
Fold.getGroupScroll().add(label);

Bundled Library

SVG Loader

Fold.getSvgLoader() resolves to Three.js's built-in SVGLoader class (loaded on demand). It parses an SVG file into a set of ShapePath objects which can be converted to Three.js geometry using SVGLoader.createShapes(). Shapes are in SVG pixel coordinates — scale by getPixelSize() to bring them into the Fold scene, and negate the Y axis to match Three.js's upward convention.

const SVGLoader = await Fold.getSvgLoader();
const loader = new SVGLoader();
loader.load('/logo.svg', (data) => {
  data.paths.forEach((path) => {
    SVGLoader.createShapes(path).forEach((shape) => {
      const geo = new THREE.ShapeGeometry(shape);
      const mesh = new THREE.Mesh(geo, mat);
      // scale SVG px → world units, flip Y
      mesh.scale.set(px, -px, px);
      scrollGroup.add(mesh);
    });
  });
});

Bundled Libraries

GLTF Loader + Draco

Fold.getDracoLoader() resolves to Three.js's DRACOLoader class for decoding Draco-compressed geometry. Attach it to a getGltfLoader() instance to transparently load compressed .glb files. The Draco decoder runs in a Web Worker and requires the WASM decoder files to be served separately.

const GLTFLoader  = await Fold.getGltfLoader();
const DRACOLoader = await Fold.getDracoLoader();

const draco = new DRACOLoader();
draco.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.7/');

const loader = new GLTFLoader();
loader.setDRACOLoader(draco);

loader.load('/model.glb', (gltf) => {
  Fold.getGroupScroll().add(gltf.scene);
});