examples/test/dom-vdom.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>MathBox - HTML Label</title>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/three@0.137.0/build/three.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/three@0.137.0/examples/js/controls/OrbitControls.js"
    ></script>
    <!--
      - a minified version mathbox.min.js is also available;
      - recommend using a specific version (not @latest) in public sites
    -->
    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/mathbox@latest/build/bundle/mathbox.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/mathbox@latest/build/mathbox.css"
    />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1" />
  </head>
  <body>
    <script>
      mathbox = MathBox.mathBox({
        plugins: ["core", "controls", "cursor", "stats"],
        controls: {
          klass: THREE.OrbitControls,
        },
        camera: {
          near: 0.01,
          far: 1000,
        },
      });
      three = mathbox.three;

      three.camera.position.set(1.1, 1.45, 1);
      three.camera.lookAt(new THREE.Vector3());
      three.renderer.setClearColor(new THREE.Color(0xffffff), 1.0);

      view = mathbox
        .unit({
          scale: null,
        })
        .cartesian({
          range: [
            [-2, 2],
            [-1, 1],
            [-1, 1],
          ],
          scale: [2, 1, 1],
        });

      view.axis({
        zBias: -10,
        end: true,
        width: 10,
      });

      view.axis({
        axis: 2,
        zBias: -10,
        end: true,
        width: 10,
      });

      view.grid({
        divideX: 30,
        width: 10,
        opacity: 0.5,
        zBias: -10,
        axes: [1, 3],
      });

      view.interval({
        width: 16,
        expr: function (emit, x, i, time) {
          y = Math.sin(x + (time * 0.2) / 4) * 0.7;
          emit(x, y);
        },
        channels: 2,
      });

      view.repeat({
        height: 5,
        depth: 2,
      });
      view.spread({
        unit: "absolute",
        height: [0, 0, 0.25],
        depth: [0, 0.25, 0],
      });

      view
        .point({
          color: 0x3090ff,
          size: 40,
        })

        .html({
          width: 16,
          height: 5,
          depth: 2,
          expr: function (emit, el, i, j, k, l, time) {
            time *= 0.2;
            var color = ["#c02050", "#50c020"][i % 2];
            emit([
              el(
                "span",
                { style: { color: color } },
                Math.floor(time * 2 + i / 8)
              ),
              el(
                "strong",
                null,
                String.fromCharCode(j + 65) +
                  String.fromCharCode(
                    i + 0x8000 + (Math.floor(time + i / 8) % 100) * 3
                  )
              ),
            ]);
          },
        })
        .dom({
          snap: false,
          offset: [0, -32],
          depth: 0.5,
          size: 24,
          zoom: 1,
        });
    </script>
  </body>
</html>