Text Labels

Text labels are 2D, screen-aligned markers you can attach to arbitrary positions (for example, adsorption sites). They do not rotate with the 3D scene.

The texts field can be any string (not only “+”).

Quick example

const adsorptionSites = [
  [1.25, 0.0, 3.1],
  [2.6, 0.8, 3.1],
];

editor.textManager.setSettings([
  {
    positions: adsorptionSites,
    texts: "+",
    color: "#111111",
    fontSize: "18px",
    className: "text-label text-label-cross",
    renderMode: "shape",
  },
]);

Full HTML example

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>WEAS Text Labels</title>
  </head>
  <body>
    <div id="viewer" style="position: relative; width: 100%; height: 600px"></div>
    <script type="module">
      import { WEAS, Atoms } from "https://unpkg.com/weas@0.2.10/dist/index.mjs";

      const domElement = document.getElementById("viewer");
      const atoms = new Atoms({
        symbols: ["C", "C", "C", "C"],
        positions: [
          [0.0, 0.0, 0.0],
          [1.42, 0.0, 0.0],
          [0.71, 1.23, 0.0],
          [2.13, 1.23, 0.0],
        ],
        cell: [6, 6, 6],
      });

      const editor = new WEAS({ domElement, atoms });
      editor.avr.applyState({ modelStyle: 1 }, { redraw: "full" });

      const p0 = atoms.positions[0];
      const p1 = atoms.positions[1];
      const p2 = atoms.positions[2];

      editor.textManager.setSettings([
        {
          positions: [p0],
          texts: "here!",
          color: "#ff0000",
          fontSize: "18px",
          className: "text-label",
          renderMode: "shape",
        },
        {
          positions: [p1, p2],
          texts: "x",
          color: "#111111",
          fontSize: "18px",
          className: "text-label",
          renderMode: "shape",
        },
      ]);
    </script>
  </body>
</html>

Here is the result of the above code:

WEAS Text Labels

API

The manager lives at editor.textManager.

setSettings(settings)

Replace all text labels with the provided settings array.

addSetting(setting)

Add a single setting to the current list.

Setting fields

  • positions: list of positions [x, y, z] for non-atom sites.

  • texts: label text (string) or array of strings.

  • color: CSS color string.

  • fontSize: CSS font size (e.g., "16px").

  • className: CSS class for styling (default "text-label text-label-cross").

  • renderMode: - "glyph": render text normally (default). - "shape": use CSS shapes for special labels like "+" with text-label-cross.

  • shift: vector added to each position, in world units.

Styling

The default cross style is defined in weas-js/src/style.css under .text-label and .text-label-cross. You can override these classes in your own styles if needed.