string diagram scene

defaultWithTexture.ts

import { MeshBuilder } from "@babylonjs/core";
import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
import { Engine } from "@babylonjs/core/Engines/engine";
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight";
import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial";
import { Color3, Color4 } from "@babylonjs/core/Maths/math";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
import { RibbonBuilder } from "@babylonjs/core/Meshes/Builders/ribbonBuilder";
import { Mesh } from "@babylonjs/core/Meshes/mesh";
import { TransformNode } from "@babylonjs/core/Meshes/transformNode";
import { Scene } from "@babylonjs/core/scene";
import { CreateSceneClass } from "../createScene";

export class DefaultSceneWithTexture implements CreateSceneClass {

  createScene = async (
    engine: Engine,
    canvas: HTMLCanvasElement
  ): Promise<Scene> => {

    const scene = new Scene(engine);

    const camera = new ArcRotateCamera(
      "my first camera",
      0,
      Math.PI / 3,
      10,
      new Vector3(0, 0, 0),
      scene
    );
    camera.inertia = 0;
    camera.angularSensibilityX = 250;
    camera.angularSensibilityY = 250;
    camera.setTarget(Vector3.Zero());
    camera.attachControl(canvas, true);

    const light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);

    light.intensity = 0.7;

    const mat = new StandardMaterial("mat", scene);
    mat.diffuseColor = new Color3(0.8, 0.9, 1);
    mat.alpha = 0.3;

    const mat2 = new StandardMaterial("mat", scene);
    mat2.diffuseColor = new Color3(1, 0.9, 0.8);
    mat2.alpha = 1;

    const CUBESIZE = 10;
    const SUBDIV = 20;
    const rowpath = (p: number) => {
      const path = [];
      for (let i = 0; i <= SUBDIV; i++) {
        const ps = p / SUBDIV;
        const is = i / SUBDIV;
        const z = 0.5 * Math.sin(1 + 2 * Math.PI * ps)
          + 0.25 * Math.sin(3 * Math.PI * is)
          + 0.6 * Math.sin(1.2 * Math.PI * is + 3.4 * Math.PI * ps);
        path.push(new Vector3(CUBESIZE * (ps - 1 / 2), z, CUBESIZE * (is - 1 / 2)));
      }
      return path;
    };

    const arrayOfPaths = [];
    for (let p = 0; p <= SUBDIV; p++) {
      arrayOfPaths[p] = rowpath(p);
    }

    const g = new TransformNode('g');
    g.scaling = new Vector3(0.3, 0.3, 0.3);
    g.rotation = new Vector3(0, Math.PI / 6, -Math.PI / 8);

    scene.clearColor = new Color4(1, 1, 1, 1);

    const vecs = [[1, 0, 0], [0, 1, 0], [0, -1, 0], [0, 0, 0], [2, 0, 0]];
    vecs.forEach((v, i) => {
      const plane = MeshBuilder.CreatePlane(`plane${i}`, { height: CUBESIZE, width: CUBESIZE, sideOrientation: Mesh.DOUBLESIDE }, scene);
      plane.position = new Vector3(0, 0, CUBESIZE / 2);

      const gi = new TransformNode('g' + i);
      gi.rotation = new Vector3(v[0] * Math.PI / 2, v[1] * Math.PI / 2, 0);
      gi.parent = g;
      plane.parent = gi;
      plane.material = mat;
    });


    const rib = RibbonBuilder.CreateRibbon('ribbon', { pathArray: arrayOfPaths, sideOrientation: Mesh.DOUBLESIDE });
    rib.material = mat2;
    rib.parent = g;

    return scene;
  };
}

export default new DefaultSceneWithTexture();