examples/frame3d.html

<!DOCTYPE html>
<html>
  <head>
    <title>frame3d</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./assets/css/examples.css" />
    <link rel="stylesheet" href="./assets/css/loading_screen.css" />
  </head>
  <body>
    <script src="../dist/RUN_MODE/bundle.js"></script>
    <script src="./assets/js/loadingScreen.js"></script>
    <script type="text/javascript">
      const udviz = window.udviz;

      udviz
        .loadMultipleJSON([
          './assets/config/extents.json',
          './assets/config/crs.json',
          './assets/config/frame3D_planars.json',
          './assets/config/layer/3DTiles_Lyon.json',
          './assets/config/layer/base_maps.json',
          './assets/config/layer/elevation.json',
          './assets/config/layer/geoJSONs.json',
        ])
        .then((configs) => {
          udviz.proj4.default.defs(
            configs['crs'][0].name,
            configs['crs'][0].transform
          );

          const extent = new udviz.itowns.Extent(
            configs['extents'][0].name,
            parseInt(configs['extents'][0].west),
            parseInt(configs['extents'][0].east),
            parseInt(configs['extents'][0].south),
            parseInt(configs['extents'][0].north)
          );

          const frame3DPlanar = new udviz.frame3d.Planar(
            extent,
            configs['frame3D_planars'][1]
          );

          // eslint-disable-next-line no-constant-condition
          if ('RUN_MODE' == 'production')
            loadingScreen(frame3DPlanar.itownsView, [
              'UD-VIZ',
              'UDVIZ_VERSION',
            ]);

          // add layers
          frame3DPlanar.itownsView.addLayer(
            new udviz.itowns.ColorLayer(configs['base_maps'][0]['name'], {
              updateStrategy: {
                type: udviz.itowns.STRATEGY_DICHOTOMY,
                options: {},
              },
              source: new udviz.itowns.WMSSource({
                extent: extent,
                name: configs['base_maps'][0].source['name'],
                url: configs['base_maps'][0].source['url'],
                version: configs['base_maps'][0].source['version'],
                crs: extent.crs,
                format: configs['base_maps'][0].source['format'],
              }),
              transparent: true,
            })
          );

          const isTextureFormat =
            configs['elevation']['format'] == 'image/jpeg' ||
            configs['elevation']['format'] == 'image/png';
          frame3DPlanar.itownsView.addLayer(
            new udviz.itowns.ElevationLayer(
              configs['elevation']['layer_name'],
              {
                useColorTextureElevation: isTextureFormat,
                colorTextureElevationMinZ: isTextureFormat
                  ? configs['elevation']['colorTextureElevationMinZ']
                  : null,
                colorTextureElevationMaxZ: isTextureFormat
                  ? configs['elevation']['colorTextureElevationMaxZ']
                  : null,
                source: new udviz.itowns.WMSSource({
                  extent: extent,
                  url: configs['elevation']['url'],
                  name: configs['elevation']['name'],
                  crs: extent.crs,
                  heightMapWidth: 256,
                  format: configs['elevation']['format'],
                }),
              }
            )
          );

          configs['3DTiles_Lyon'].forEach((layerConfig) => {
            udviz.itowns.View.prototype.addLayer.call(
              frame3DPlanar.itownsView,
              new udviz.itowns.C3DTilesLayer(
                layerConfig['id'],
                {
                  name: layerConfig['id'],
                  source: new udviz.itowns.C3DTilesSource({
                    url: layerConfig['url'],
                  }),
                },
                frame3DPlanar.itownsView
              )
            );
          });

          configs['geoJSONs'].forEach((layerConfig) => {
            frame3DPlanar.itownsView.addLayer(
              new udviz.itowns.ColorLayer(layerConfig.id, {
                name: layerConfig.id,
                transparent: true,
                source: new udviz.itowns.FileSource({
                  url: layerConfig.url,
                  crs: extent.crs,
                  format: 'application/json',
                }),
                style: new udviz.itowns.Style(layerConfig.style),
              })
            );
          });

          const center = extent.center();

          const iframe = document.createElement('iframe');
          iframe.src = './assets/html/billboard.html';

          const domElement3D = new udviz.frame3d.DomElement3D(iframe);

          domElement3D.rotation.set(Math.PI * 0.5, 0, 0);
          domElement3D.position.set(center.x, center.y, 600);

          frame3DPlanar.appendDomElement3D(domElement3D);

          const process = new udviz.RequestAnimationFrameProcess();
          let currentDt = 0;
          const duration = 10000;

          process.start((dt) => {
            currentDt += dt;
            currentDt %= duration;
            const ratio = currentDt / duration;

            let size = -1;
            if (ratio < 0.5) {
              size = 50 * ratio + 2000 * (1 - ratio);
            } else {
              size = 2000 * ratio + 50 * (1 - ratio);
            }
            domElement3D.scale.set(size, size, size);

            domElement3D.updateMatrixWorld();

            frame3DPlanar.itownsView.notifyChange();
          });
        });
    </script>
    SCRIPT_TAG_RELOAD
  </body>
</html>